Asp.net Project – Javascript button is clickable but not carrying out the function

I’ve been trying to integrate an api into a project that I have been working on with some friends but I’m having difficulty with getting the "ok" button to actually execute the function. It’s supposed to allow you to upload a photo, click ok, and then it returns data about the plant. The "choose files button works, but the ok button doesn’t.

Since the API sample was already created I tested it in a separate solution and was able to get it to work which leads me to believe that I’ve made a mistake in the code somewhere else or maybe there’s something blocking the program from talking to API’s web address. But for some reason it doesn’t work within the project that I’m trying to integrate it into. (ASP.NET razor page).

I’ve also tried making a new button and moving the javascript tag into the header and other spots but that didn’t work either, and I’ve run out of ideas to try. I have omitted the api key itself below for the sake of privacy. I’d really appreciate any help on the subject!

@{
    ViewData["Title"] = "Identify a Plant";

}
   
<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <form>
        <input type="file" multiple />
        <!--<button type="button">OK</button> -->
        <button type="button">OK</button>
    </form>

    <script type="text/javascript">
        document.querySelector('button').onclick = function sendIdentification() {
            const files = [...document.querySelector('input[type=file]').files];
            const promises = files.map((file) => {
                return new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    reader.onload = (event) => {
                        const res = event.target.result;
                        console.log(res);
                        resolve(res);
                    }
                    reader.readAsDataURL(file)
                })
            })

            Promise.all(promises).then((base64files) => {
                console.log(base64files)

                const data = {
                    api_key: "Die8ewFGvpw5JrRTuOEjgGR10uL--",
                    images: base64files,
                    modifiers: ["crops_fast", "similar_images"],
                    plant_language: "en",
                    plant_details: ["common_names",
                        "url",
                        "name_authority",
                        "wiki_description",
                        "taxonomy",
                        "synonyms"]
                };

                fetch('https://api.plant.id/v2/identify', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data),
                })
                    .then(response => response.json())
                    .then(data => {
                        console.log('Success:', data);
                    })
                    .catch((error) => {
                        console.error('Error:', error);
                    });
            })

        };
    </script>
</body>

</html>

1 thought on “Asp.net Project – Javascript button is clickable but not carrying out the function”

Leave a Comment