Using dropzone.js to upload files OnClick with ASP.NET Service

Question

Hi all and thank you in advanced.

Basically, I want to add a Dropzone.js Upload box on my page that allows me to drag n' drop files into the dropzone and then click a button to upload it to a folder using a backend API. The error is client side with the JS and I'm just looking for assistance on how I can approach this in a better/working way.

My html:

<form action="#" class="dropzone">
  <div class="fallback">
     <input id="fileUpload" type="file" name="file" multiple onchange="setFileInfo(this.files)" />
  </div>
</form>
<button id="btnUploadFile" type="button"></button>

My JS:

$('#btnUploadFile').on('click', function () {

var data = new FormData($('form')[0]);
var files = $("#fileUpload").get(0).files;

// Add the uploaded image content to the form data collection
if (files.length > 0) {
    for (i = 0; i < files.length; i++) {
        data.append("UploadedImage" + i, files[i]);
    }
}

console.log(data)

// Make Ajax request with the contentType = false, and procesDate = false
var ajaxRequest = $.ajax({
    type: "POST",
    url: "api/fileupload/uploadfile",
    enctype: 'multipart/form-data',
    contentType: false,
    processData: false,
    data: data
});

ajaxRequest.done(function (xhr, textStatus) {
    // Do other operation
    console.log(textStatus)
    console.log(xhr)
});

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone(element, {
    url: "#",
    autoProcessQueue: false
});

My error:

Uncaught TypeError: Cannot read property 'files' of undefined
at HTMLButtonElement.<anonymous> (core.js:1064)
at HTMLButtonElement.dispatch (jquery.js:5206)
at HTMLButtonElement.elemData.handle (jquery.js:5014)

I hope this suffices in detail. Thank you very much.

Answer 1

Take a look here DropZone Doc, Usage without JS . The content in the fallback div will be removed by dropzone.js when JS is available. This means, there is no fileUpload-Input available, after the JS from dropzone.js is executed on pageload. Instead dropzone will create its own . You can see it, when you take a look at the HTML in you browser.

Since the fallback is only available when there is no javascript, there is also no way to send the content of your form with JS. Can you explain why you aren't uploading the data with the form action? Maybe I can help you a little more how to fix this.