Loading...

Search jQuery

Search

jQuery Forum

Using jQuery UI

drag & drop file upload question

in Using jQuery UI • 4 years ago

Hi,

The following jQuery drag & drop demo is interesting.
http://smoothprogramming.com/javascript/demo-file-upload-using-drag-drop/

In the meantime, it's only half of a real function, that is, we need to upload the dropped file onto the server as well.

I've looked at some samples on form data passing with with $.post() function, however, I'm stumbled with two issues.
(1) for regular form data, it can be handled like $('#formID').serialize();
but in this case, the form data is a file, which can be a PDF, a Word doc or Excel or image or other types of file.
(2) how to map the the DIV with ID of "dropFiles" to the FORM element of type "file"?
(3) at form post, the state should be the form processing outcome.

// create form and file element
var fm = document.createElement('form');
fm.id = 'myfrm';
fm.enctype = 'multipart/form-data';
fm.method = 'post';
var el = document.createElement('input');
el.type = 'file';
el.name = 'myfile';
// following syntax is incorrect
el.value = document.getElementById('dropFiles').innerHTML;
// send form
$.post('processFileUpload.cfm?data=',$('#myfrm').serialize()); // to upload file to server

Thanks.

1

Replies(18)

jakecigar

Re: drag & drop file upload question

4 years ago

Your code doesn’t work for several reasons.

1. Your form and input are not in the DOM.

2. The input is not in the form.

3. But, most importantly, you can’t serialize a file.

You need to use Ajax with a FormData.

Here’s a part of one of my pages that does file drop uploads…

function drop(e) {
e.preventDefault()
var dataTransfer = e.originalEvent.dataTransfer,
fd = new FormData()
if (dataTransfer.files && dataTransfer.files.length){
$.each(dataTransfer.files,function(i,v) {
fd.append("file",v,v.name)
})
fd.append("url","drop")
upload(fd)
}
}
function upload(fd){
return $.ajax({
url:"/upload.cgi",
type:"POST",
processData:false,
contentType: false,
data:fd,
success:function(){ console.log("Uploaded.",arguments) },
error:function(){ console.log("Error Uploading.",arguments) },
})
}

JΛ̊KE

Re: drag & drop file upload question

4 years ago

Ok, very informative.

For the sample page,

<div id="dropFiles"></div>

How can we map the div id="dropFiles" dropped file to your drop() function's e parameter?

Or is it optional (for the original event of dropping) ?

Thanks.

jakecigar

Re: drag & drop file upload question

4 years ago

$("#dropFiles").on("drop",drop);

You will also need

$("#dropFiles").on("dragover", dragover);

function dragover(e) {
e.originalEvent.dataTransfer.dropEffect = 'copy'
e.preventDefault()
return false
}

I usually use $(document) instead of a particular div. But a div would work as well.

JΛ̊KE

Re: drag & drop file upload question

4 years ago

Ok.

Here's the complete js script content:

<script>

$(document).ready(function(){

$("#dropFiles").on('dragenter', function(ev) {

// Entering drop area. Highlight area

$("#dropFiles").addClass("highlightDropArea");

});

$("#dropFiles").on('dragleave', function(ev) {

// Going out of drop area. Remove Highlight

$("#dropFiles").removeClass("highlightDropArea");

});

$("#dropFiles").on("dragover", dragover);

// process dropped over file

$("#dropFiles").on('drop', function(ev) {

// Dropping files

ev.preventDefault();

ev.stopPropagation();

// Clear previous messages

$("#messages").empty();

if(ev.originalEvent.dataTransfer){

if(ev.originalEvent.dataTransfer.files.length) {

var droppedFiles = ev.originalEvent.dataTransfer.files;

for(var i = 0; i < droppedFiles.length; i++)

{

console.log(droppedFiles[i]);

$("#messages").append("<br /> <b>Dropped File </b>"+ droppedFiles[i].name);

// Upload droppedFiles[i] to server

}

}

}

$("#dropFiles").removeClass("highlightDropArea");

return false;

});

var dragover = function(e) {

e.preventDefault();

var dataTransfer = e.originalEvent.dataTransfer,

fd = new FormData();

if (dataTransfer.files && dataTransfer.files.length){

$.each(dataTransfer.files,function(i,v) {

fd.append("file",v,v.name)

})

fd.append("url","drop");

upload(fd);

}

}

function upload(fd){

return $.ajax({

url:"processFileUpload.cgi",

type:"POST",

processData:false,

contentType: false,

data:fd,

success:function(){ console.log("Uploaded.",arguments) },

error:function(){ console.log("Error Uploading.",arguments) },

})

}

})

</script>

OUTCOME:

Redirect to the source file path.

chrome debugging:

Resource interpreted as Document but transferred with MIME type image/png: "file:///C:/Users/mypc/Downloads/myImage.png".

What am I still missing?

Thanks.

jakecigar

Re: drag & drop file upload question

4 years ago

Your drop code doesn’t handle files. I’ve not tried handling them in a dragover event.

Dragover let’s the browser know that a drop is permitted.

JΛ̊KE

Re: drag & drop file upload question

4 years ago

Your fd object seems to contain the dropped files. Where is your FormData()

defined?

Also, what's the FORM content look like upon submission?

Thus, my server side script can process it/them accordingly.

Yes, because ajax we can't see how the server side script runs

but probably your "arguments" in the success:function(){ console.log("Uploaded.",arguments) },

can offer some clue.

Thanks.

jakecigar

Re: drag & drop file upload question

4 years ago

The info sent to the server program looks just like a post request with a <Input type=file name=file>.

The first argument is the response from the server. You can code

success:function(data){ do something with data }

JΛ̊KE

jakecigar

Re: Re: drag & drop file upload question

4 years ago

arguments is just an array-like var with all the arguments that were passed to the success function. It’s a native javaScript thing.

JΛ̊KE

Re: drag & drop file upload question

4 years ago

Ok.

And not surprisingly I'm getting same outcome: the dropped file has not been uploaded to the server while my server side script has a routine to process the FORM submission with <Input type=file name=file>.

Also, I set up a debugging to output the entire FORM content to a file right upon form submission. But the file has not been created. Thus, it seems that the ajax routine for file upload either failed to be called or something is messing up.

Btw, Where is your FormData() defined?

Thanks.

jakecigar

Re: drag & drop file upload question

4 years ago

FormData - Web APIs | MDN It’s part of vanilla javaScript.

JΛ̊KE

jakecigar

Re: drag & drop file upload question

4 years ago

All together…

And it sends…

------WebKitFormBoundaryG6O6N9WaYc3vF1Xl

Content-Disposition: form-data; name="file"; filename="some-5.csv"

Content-Type: text/csv

------WebKitFormBoundaryG6O6N9WaYc3vF1Xl

Content-Disposition: form-data; name="url"

drop

------WebKitFormBoundaryG6O6N9WaYc3vF1Xl--

JΛ̊KE

Re: drag & drop file upload question

4 years ago

Very nice, thank you JΛ̊KE

Re: drag & drop file upload question

4 years ago

JΛ̊KE,

I wonder if there's a way to refresh the page, thus, the uploaded file would immediately show up as well.

Here's my attempt of adding a load function as the last process upon upload event,

return $.ajax({
url:"/upload.cgi",
type:"POST",
processData:false,
contentType: false,
data:fd,
success:function(data){ console.log("Uploaded.",data) },
error:function(){ console.log("Error Uploading.",arguments) },
});
// refresh the page
$("#myDIV").load("myPage.cgi");

But it has no effect.

Thanks.

jakecigar

Re: Re: drag & drop file upload question

4 years ago

It would depend on the page.

JΛ̊KE

jakecigar

Re: Re: drag & drop file upload question

4 years ago

Whatever you do. You should do it inside the success function. Not after it.

JΛ̊KE

Re: drag & drop file upload question

4 years ago

Thanks JΛ̊KE .

jQuery form usually sends me a notification upon a reply, this time it missed me, thus, the late appreciation.

Re: drag & drop file upload question

4 years ago

Is there a way to drag and drop to remove / delete a file on a server?

Thanks.

jakecigar

Re: drag & drop file upload question

4 years ago

How would you see that working? Drop a file, then ask the server if it has it already then remove it?

JΛ̊KE