CODEWITHSUNDEEP
javascripthtmlservletsdrag-and-drop
icanc
icanc

Reputation: 3577

How do you upload an image to server after drag and drop

I have this whole drag and drop thing working, but how do you upload it to the server??? I can get the dataURL of the image which is some base64 encoding. Is there way to upload this to my servlet and how will the servlet accept this? This tutorial was helpful but it's missing the uploading portion. I've also looked at other JQuery plugins which seemed to customized and heavy for my use.

Upvotes: 0

Views: 1524

Answers (2)

icanc
icanc

Reputation: 3577

After more searching, I found out that it's very easy to submit a file using JavaScript's FormData object. After you get the image file from dataTransfer.files, which part of the drag and drop API, the following code able to successfully send the image file to the server.

// Create formdata object
var formData = new FormData;
// Append form item (key, value)
formData.append('file', imageFile);

// JQuery ajax call to submit the file using post request
$.ajax({
    url: 'url_of_server_script',
    data: formData,
    processData: false,
    contentType: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

Upvotes: 1

Scot
Scot

Reputation: 582

One options would be to use this:

http://www.plupload.com/

While it does come with a UI, it also comes with JS library were you can send your file to a server programmatically. The UI and programmatic portions are separate js files so you won't have to clutter your website with unnecessary JS...

I'm a big advocate of not reinventing wheels...:-)

Upvotes: 1

Related Questions