Usando o dropzone.js para carregar arquivos OnClick com o serviço ASP.NET - javascript, html, asp.net, upload de arquivo, dropzone.js

Oi tudo e obrigado em avançado.

Basicamente, quero adicionar um Dropzone.js Caixa de upload na minha página que me permite arrastar n "soltar arquivos no dropzone e clicar em um botão para fazer o upload para uma pasta usando uma API de backend. O erro é do lado do cliente com o JS e estou apenas procurando por ajuda sobre como posso abordar isso de uma maneira melhor / funcional.

Meu 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>

Meu 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
});

Meu erro:

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)

Espero que isso seja suficiente em detalhes. Muito obrigado.

Respostas:

Dê uma olhada aqui DropZone Doc, uso sem JS. O conteúdo no div de fallback será removidopor dropzone.js quando JS está disponível. Isso significa que não há entrada de upload de arquivo disponível, depois que o JS de dropzone.js é executado no pageload. Em vez disso, o dropzone criará o seu próprio. Você pode vê-lo, quando você dá uma olhada no HTML em seu navegador.

Como o fallback só está disponível quando hánão há javascript, também não há como enviar o conteúdo do seu formulário com o JS. Você pode explicar por que você não está enviando os dados com a ação do formulário? Talvez eu possa ajudá-lo um pouco mais como corrigir isso.