JQuery Will Not Run In ASPX

Question

I am trying to use the Cloudinary JQuery SDK in a .aspx page, using the following code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.rawgit.com/cloudinary/cloudinary_js/master/js/jquery.ui.widget.js" type="text/javascript"></script>
<script src="https://rawgit.com/cloudinary/cloudinary_js/master/js/jquery.iframe-transport.js" type="text/javascript"></script>
<script src="https://rawgit.com/cloudinary/cloudinary_js/master/js/jquery.fileupload.js" type="text/javascript"></script>
<script src="https://rawgit.com/cloudinary/cloudinary_js/master/js/jquery.cloudinary.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        console.log("Ready!");
        $.cloudinary.config({
            cloud_name: 'MYCLOUD'
        })

        $('.cloudinary_fileupload').unsigned_cloudinary_upload('MYUNSIGNEDUPLOADPRESET', {
            cloud_name: 'MYCLOUD',
            tags: 'browser_uploads'
        }, {
            multiple: true
        })
        .bind('cloudinarydone', function(e, data) {
            // inspect data.result for return value with link to the uploaded image and more
            console.log('Upload result', data.result);
            // Create a thumbnail of the uploaded image, with 150px width
            var image = $.cloudinary.image(
                data.result.public_id, {
                    secure: true,
                    width: 150,
                    crop: 'scale'
                });
            $('.gallery').prepend(image);
        });
    });
</script>

And

        <asp:Panel runat="server" ID="JQuery">
        <input name="file" type="file" class="cloudinary-fileupload"/>
        </asp:Panel>

Unfortunately, when I select an image, nothing occurs and the upload is never completed.

Can anyone point out what is wrong might be stopping the JQuery script from working as expected?

Answer 1

The issue is that I was using the wrong class name in my HTML.

The following:

    <asp:Panel runat="server" ID="JQuery">
    <input name="file" type="file" class="cloudinary-fileupload"/>
    </asp:Panel>

Should be changed to:

    <asp:Panel runat="server" ID="JQuery">
    <input name="file" type="file" class="cloudinary_fileupload"/>
    </asp:Panel>