Verwenden von Dropzone.js zum Hochladen von Dateien OnClick mit ASP.NET-Dienst - JavaScript, HTML, asp.net, Datei-Upload, dropzone.js

Hallo allerseits und vielen Dank im Voraus.

Grundsätzlich möchte ich eine Dropzone hinzufügen.js Upload-Feld auf meiner Seite, in dem ich n "Drop-Dateien in die Dropzone ziehen und dann auf eine Schaltfläche klicken kann, um sie mithilfe einer Back-End-API in einen Ordner hochzuladen. Der Fehler liegt beim JS auf der Clientseite, und ich suche nur nach Unterstützung darüber, wie ich das besser / funktionierender angehen kann.

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

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

Mein Fehler:

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)

Ich hoffe das reicht im Detail. Vielen Dank.

Antworten:

Schaue hier nach DropZone Doc, Verwendung ohne JS. Der Inhalt im Fallback-Div wird entferntvon dropzone.js, wenn JS verfügbar ist. Dies bedeutet, dass keine fileUpload-Eingabe verfügbar ist, nachdem die JS von dropzone.js auf pageload ausgeführt wurde. Stattdessen erstellt dropzone eine eigene. Sie können es sehen, wenn Sie sich den HTML-Code in Ihrem Browser ansehen.

Da ist der Fallback nur dort verfügbarist kein Javascript, es gibt auch keine Möglichkeit, den Inhalt Ihres Formulars mit JS zu senden. Können Sie erklären, warum Sie die Daten nicht mit der Formularaktion hochladen? Vielleicht kann ich Ihnen ein bisschen mehr dabei helfen, dies zu beheben.