Uso de dropzone.js para cargar archivos OnClick con ASP.NET Service - javascript, html, asp.net, file-upload, dropzone.js

Hola a todos y gracias de antemano.

Básicamente, quiero añadir una Dropzone.El cuadro de carga de js en mi página me permite arrastrar y soltar archivos en la zona de colocación y luego hacer clic en un botón para cargarlo en una carpeta mediante una API de back-end. El error es del lado del cliente con JS y estoy buscando ayuda sobre cómo puedo abordar esto de una manera mejor / de trabajo.

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

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

Mi 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)

Espero que esto sea suficiente en detalle. Muchas gracias.

Respuestas

Echa un vistazo aquí DropZone Doc, Uso sin JS. El contenido en el div fallback será eliminadopor dropzone.js cuando JS está disponible. Esto significa que no hay una entrada de entrada de archivo disponible, después de que JS de dropzone.js se ejecute en la carga de la página. En su lugar, Dropzone creará su propio. Puede verlo, cuando eche un vistazo al HTML en su navegador.

Dado que la reserva solo está disponible cuando hayno es javascript, tampoco hay manera de enviar el contenido de su formulario con JS. ¿Puede explicar por qué no está cargando los datos con la acción de formulario? Tal vez pueda ayudarlo un poco más a solucionar este problema.