Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cross-browser drag-and-drop HTTP file upload?

I'm looking for a cross-browser html file uploader with drag-and-drop capability. Ideally the drop target area can be large and overlap other elements (ie. I'd like to allow the user to drop the item on existing parts of the HTML UI instead of requiring a separate target area).

Cross browser support (including IE6) is important, as is reliability. I'm using jQuery, but am open to good solutions that don't use jQuery.

Any recommendations?

like image 397
Parand Avatar asked May 03 '11 17:05

Parand


People also ask

How do I drag and drop files to upload?

Drag and drop file uploads happen when you drag one or more files from an underlying platform's file manager and drop them onto a web page for upload. A preview of the image indicates the upload has begun. Many JavaScript libraries create this type of drag and drop file upload feature with a few lines of code.

How do you upload a file to a website using HTML?

HTML allows you to add the file upload functionality to your website by adding a file upload button to your webpage with the help of the <input> tag. The <input type=”file”> defines a file-select field and a “Browse“ button for file uploads.


1 Answers

Give FileDrop a try:

http://proger.i-forge.net/FileDrop_-_cross-browser_JavaScript_Drag-Drop_file_upload/7CC

As per the site:

supports Firefox 3.6, Internet Explorer 6, Google Chrome 7, Apple Safari 5 and Opera 11.61 (Opera 12+ supports native drag & drop).

Keep in mind drag-and-drop doesn't work in IE < 10 though.

Not sure if the drop area will work as you want, you will have to experiment.

like image 127
tomtastico Avatar answered Sep 30 '22 13:09

tomtastico