Multiple File Drag and Drop Upload using HTML5 and Jquery.

Awesome. Could you make it into a real file hosting script, where users could upload and get direct download link? generated by md5 hash or something smaller. Thanks, contact me: admin@team-enigma.net!

I have found another (much worse and old-school) method quite a few years ago, when JQuery wasn't as popular...
In a closed environment you can setup a SFTP server and embed an iframe in the admin area of the site with credentials already embeded, then leave the FTP handling to the browser, that way you can drop any files in the iframe and the browser will upload them into a preconfigured folder.

its really nice work to upload multiple files...

The most awaited script. Many Thanks

Amazing arun...it saves lot of time searching individual files..good job...

awesome

Really nice feature!

what if i only want to allow images?

you forgot a important thing, the delete button, if someone put the wrong image theres no way to remove it, unless the refresh page

Many Thanks arun...

Can add progress bar and percent upload? :)

real good,thanks for sharing great work

input type="file" multiple="multiple" name="file[]" works well too

if the file name is same it over writes it how to avoid???

good job...

How can I add a progress bar ???

It only shows uploading. Where does it store the images?

And isnt IE a modern browser?

well i'm trying to configure the multiupload.js with this on _preview = function(data)
var sampleIcon = 'img src="images/image.png" tag a id="del" href="" border="0" tag img src="images/trash.png" end tag a';

for delete just pick one and most don't upload it
thanks for the nice post but i can't delete yet :/

Very, very good tutorial, I like!!

Last time I made same thing in ASP.NET MVC with a little feature more.

I show the images when someone upload them live without any refresh. Can you please make them here in php too.

The plugin I use is located here https://github.com/malsup/form

thanks srinivas, u r doing good work for all developers.

That is fine and works good...but Arun I am looking to upload from both local drive and from another website, which means I can drag image from another tab of same browser or another browser and drop in there to upload SAME AS imgur(.)com...try this site to upload from both local drive and another website. Is it possible? do you know how to do so? Please reply me if you have any idea.

Thank you so much

Hey you need to add remove button to each file, as well it is allowing the duplicate selection of same image. please do check these.

it is possibile to integrate whit joomla?

It is possible to integrate with joomla?

Thank you for your good tutorial!

Great Work !

Cool job but not working in ie8 ..is there any solution..

what changes i should do if i want to upload doc file , pdf files or zip files.....
Thank you

How to create a unique URL for every file uploaded?

How can I call another function after all the files were uploaded?

nice work

Thanks for sharing. Much appreciated.

Also saying that its not works proper in IE8. If any problem in your coding or mine process.

good work...

When will the update be ready to download ?
(Update with deletebutton and progressbar)

nice script but css needs some improvements :S

nice

nice

Please I need help. I did all what your tutorial says. If I upload an image it doesnt stop to upload

Please help

Please help.

How can I add an Database Input Query?

Please answere.

Thanks

i added zip/tar to the allowed files but i cant upload it. Please help

Really Helpful post..Thanks

Is it really working..? Are you sure buddy...??

Here it only shows uploading. Where does it store the images?

yeah..... this is really awesome tutorial....thanks for sharing this...

huuuuummmmmmmmmmm...................Thanks for sharing this man...Really use full for me....Thanks a lot again....

not working with IE7. any compatability issues

I have problem, i have uploaded photo and modify your code:

if(move_uploaded_file($_FILES['file']['tmp_name'], "uploads/".$_FILES['file']['name'])){
echo($_POST['index']);
}

to the following:

if(copy($_FILES['file']['tmp_name'],"uploads/".$_FILES['file']['name']))
{
$temp="uploads/".$_FILES['file']['name'];
$insert="insert into reg values('NULL','$temp') ";
$res=mysql_query($insert);

echo($_POST['index']);
}
In database the image path is store but it store each time all the previous uploaded image path

Arun you have done a good job. please help me.

hey arun i got the solution just place the

if(this.all.length = 0){
window.location.reload(); }

in the line number 103 of multiupload.js.. its working

Is there a way to limit the total filesize?

Excellent script boss...

Aman, here's a list of mime types:

http://www.hansenb.pdx.edu/DMKB/dict/tutorials/mime_typ.php

In index.php, just add 'application/pdf' and 'application/zip' and (I think) 'application/octet-stream' to the "support:" line.

Thanks .. very useful for file upload .. good job ;)

This seems like a very daft question, so apologies for asking...

When I press 'upload', I'd like to move on to the upload page itself rather than staying on the same page. How?

I removed the if in the move uploaded file, and then it wont upload anymore whats wrong if i remove it?

nice job arun..can i upload mp3 files using this upload form..???

GREATE JOB SIRINVAS , CAN YOU ADD RESIZING WITH THIS UPLOAD FORM PLEASE

Wow,
nice and simple
thx so much brother :)

Great script - one thing I've found is that if a user hits 'upload' again, it uploads any files that were dropped in, even though their progress bars and such are gone. Is there a way to clear out the queue once it's done, or preferably have each item remove itself from the queue once its upload/success has been triggered?

How to accept all types of files?

This works well. I am unable to insert the file information into the database.I am trying to connect the to db before the if st. Any help is appreciated. Thanks.

how do i do a database insert? It is not inserting if i put in php db insert. Thanks for your help.

No funciona en internet explorer, ayuda porfavor

Very useful upload example. Thanks.

I have been looking for a useable version of this for ages! thank you sooo much!

PS - thanks to whoever explained 'mime types'

This is the way to be able to upload any file type.

I have a problem with special characters..

füder_box.jpg => füder_box.jpg / füder_box.jpg :-(

awesome code ever... lot of thank ..

it is not working in IE8 too, please update for IE version otherwise unable to use it.

Congratulations, this is the best uploader.

how can i make this photos name and destinations to be recorded in mysql table...please help....its urgent

Yes it did work... and looks pretty good but i seem to have problems uploading audio and video files...even after adding the MIME types to the support variable...!! this the support variable i have with me...!

support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif,image/tiff,application/pdf,audio/mp3,video/mp4,video/avi", // Valid file formats

Is there any file size restriction put in the script....if so please advice on how to change it...! Thanks!! :)

yes its very good.. thanks

Code not available anymore :(

Not work in Internet explorer why?

can anyone help me to upload a complete folder plesae???

can anyone help me to upload directories, I mean complete folder?

can anyone help me to upload multiple file in jsp

any way to remove file limit

If it keeps uploading check the authorisaton for URL defined in the "uploadUrl". Also make sure the defined path in "upload.php" where the files will uploaded is correct and writable.

Great code. Does somebody know when the update will be up and runnnig?

Has anyone been able to figure out how to specify file size max? By default it doesn't seem to handle large files (i.e. 2.5MB or greater)

Hi,

Good Job Arun. Its really awesome lib.
I have one question. Can I put multiple instances of it in my single page. I need multiple drag and drop areas in my single page.
Please guide me.
Thanks

Its not working into IE and safari if you have any version or any modification please share with us.
We appreciate your help
Thanks.

how about multiple uploading of mp3 files? can you help me with this?

Is there a way to limit the amount of files to be uploaded?

Line 48 in multiupload.js should be:

$("#"+this.config.dragArea).append(html);

Thanks.
But if you explained the multiupload.js would have been better.

I have it set to save to a directory which has proper permissions, etc. but the files are not actually being stored there - or anywhere. This ALMOST works....ugh.

Valid file formats i want to upload file.php ? can

how can i remove a file from FileList?

hi,

Thanks guys, i will upgrade this ASAP with delete and progress status.Keep watching

How to accept other formats (doc, pdf) in Multiple File Drag and Drop Upload using HTML5 and Jquery.?

support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif,doc/doc,pdf/pdf", not work

Thanks

I can't upload with google chrome. Please help...

Nice one. I have use it several time but it does not work in ie7 can you give any suggestion.

Hi, I am using this drag n drop. This is not working with full window or maximize window.
When i restore window then it works..
Please let me if you have any solution

Thanks
Ishaq

thanks

thanks

hi.please heip how to upload mp3 files using this form

how I can decide where is upload path? can I add input fild where i can set directory name to upload.

Pls help me

Thank you very much. it is a very good script

Thank you very much for this code

Thank you very much. it is a very good script

hii i have problem that i want to use passed id in the same page like in url of uploaded directory which passed from last page..

images/users/2/".$_GET['galTitle']."/images/".$_FILES['file']['name'];

Hi,

I try to add a choosing folder with a "select" to your script but I don't know how to receive it with a $_POST variable in the file upload.php
and uplaod the pictures in the folder choose by the user like :

upload/player/
upload/press
upload/match/

regard's

actually I am storing the three Values in Data Base,it successfully storing date, path but not storing the gallery id, here is my code I am using




I have already spent two days on it but all in Vain
Could any body please solve my problem. thanks in advance

Is it possible to upload .html files?

I tried adding text/html in the file formats but didnt work.

Great starting point for developing a more detailed up-loader. Thanks so much for sharing!

Can any one say me how to limit the number of files to 5 , if user uploads 6 it shouldnot accept

can any one say me how can i limit the number of files uploaded to 5 , if user upload 6 , the drag and drop should not accept