CODEWITHSUNDEEP
javascriptjquerydrag-and-drop
Daniel Thompson
Daniel Thompson

Reputation: 2351

Files dragged and dropped show up in JavaScript but do not appear in request

I am trying to create a file upload form that will work through both drag and drop and generic upload buttons, but I am having trouble getting the drag and drops to upload.

At this point in the code, before sending the ajaxData object using jquery:

    var ajaxData = new FormData($form.get(0));

    if (droppedFiles) {
        $.each( droppedFiles, function(i, file) {
            ajaxData[i] = file;
        });
    }

    console.log(ajaxData)

The ajaxData dictionary shows all of the expected file names and file information for dragged and dropped files, but

However when I normally upload the files, through <input type="file"/> the ajaxData logs as a simple formData object that (seems to be) empty:

FormData {}__proto__: FormData

Now, when I examine the requests that are made, the ajaxData created by the drag and drop sends just the keys with no files, 

csv1: 
csv2:
csv3:

whereas the generic upload sends the files as expected.

csv1: csv1.csv
...

Why don't the dragged files upload, even though I am seeing them in the JavaScript console when I don't see the generic uploads?

Upvotes: 0

Views: 46

Answers (1)

guest271314
guest271314

Reputation: 1

You can use .append() method of FormData to append properties to the FordData instance

ajaxData.append(i, file)

and .get() to get the value of the specific property of the FormData instance 

ajaxData.get("csv1")

Upvotes: 1

Related Questions