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: [email protected]!

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?

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

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

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

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

For setting your own upload-path, you can add a new inputfield in uploader.php with an id='path'. Then add data.append('path', $('#path').val()); in line 71 of the multiupload.js file.

You will also need to get this path with $path = $_POST['path']; in upload.php.

It is not working in safari browser.... Can anyone help me

I need to redirect the page after upload all the images how can i achieve that??

Hi Arun, thanks for this code. Its a really good start.

I note for accepting other file formats (I can't test the server side at the moment) but adding around line 45 the following will tell you what the file format is being determined as:

alert(this.items[i].type). You can then add he type that is displayed to the allowed config list. Someone with server-side running can test this.

I found word documents are "application/msword", excel documents are "application/vnd.ms-excel", pdf documents are "application/pdf".

Will be excellent once a delete function is included.

Thanks again!

further to my last comment it looks as though lines 42-45 might be responcible for not allowing other formats. Need Arun's confirmation, but perhaps if this validation is expanded, or removed, all file types might be allowed.

Ultimately the code is simply identifying local files and providing an upload functionality, so any format is possible it will just boil down to the client side validations within the script. Not sure how many are needed for the core function to run.

its not working on mobile browser.

Awesome work! I can use it for my own projects ? (not for sell) or its private or something ? Thanks.

how can we post additional input fields.. ex. attaching description for the uploaded images and send it to DB

After uploading all selected files... how can i redirect to another URL OR refreshing the page...

Hi, nice job! A little question: I read all the code trying to find where you call the end of the process. I want to show a message when you upload all the files. Any help? Thx

Wooow, this is incredible! :) Thank you!

For automatic reloading, try this on line 92 of multiupload.js ...

Instead of:

if (f+1 < file.length) {
self._uploader(file,f+1);
}

try this:

if (f+1 < file.length) {
self._uploader(file,f+1);
} else {
window.location.reload();
}

i appreciated for script.. this is exactly what i've been looking for almost 1 week(it was like a year :) )

But it doesn't do server side validation using php.And how can I get the feedback from php to the javascript??

This is nice, very useful. Only I need is bit modification for CodeIgniter functions.

i put code below in index. and getting error

"support : 'image/png'"

sir i want to upload multiple data like text,image,video and audio on my wall
plz help me if u have any idea@

it is not supported for Excel uploads.Could you help on this

For Excel uploads change the file extension

Hello Arun,
The plugin is really cool and it works. There seems to be some issue with the upload code. Once the uploading is done successfully the selected files list are still shown beside the browse button. Also when we click upload once again the previous selected files are uploaded again and again.
Also 'progressBar' and 'status' div classes are been used for any purpose?

This is great one , all i need is to change it to codeigniter format, I tried myself but uploading seems to be not working. Please do help me to write the upload function

Hi..

This plugin is really great but I want some changes under this plugin like upload only single uploading and also upload only csv and xls file. I tried to upload csv and xls but it doesn't work. Some help me to resolve this problem. I really need it.

Thanks

This script is really cool. Thank you for sharing.
I would like to make the "choose Files" and "Upload" buttons inactive or hidden while the upload is in progress (as soon as the "upload" button has been pressed). I would also like to add another div at the bottom to display a link to the next step.
How can I turn these div visible/invisible based on the end result of the upload?

thats cool, thanks

Guys i added delete and progress bar in plugin. Add this function after init function line 21.

multiUploader.prototype._remove = function(e){
e.stopPropagation(); e.preventDefault();


var rel=e.srcElement.attributes[0].nodeValue.split('close_');

$("div[rel='"+rel[1]+"']").remove();
for(var k=0;k<self.all.length;k++){
var temp=[];
j=0;
for(var i=0;i<self.all[k].length;i++){
if(self.all[k][i].name!==e.target.nextSibling.innerText){
temp[j]=self.all[k][i];
j++;
}
}
self.all[k]=temp;
}

}

replace preview function for delete

multiUploader.prototype._preview = function(data){
this.items = data;

if(this.items.length > 0){
var html = "";
var uId = "";
for(var i = 0; i<this.items.length; i++){
uId = this.items[i].name._unique();
var sampleIcon = '<img src="images/image.png" />';
var errorClass = "";
if(typeof this.items[i] != undefined){
if(self._validate(this.items[i].type) <= 0) {
sampleIcon = '<img src="images/unknown.png" />';
errorClass =" invalid";
}
html += '<div class="dfiles'+errorClass+'" rel="'+uId+'"><span id="close_'+uId+'" style="float:right;cursor: pointer;" class="close">X</span><h5>'+sampleIcon+this.items[i].name+'</h5><div id="'+uId+'" class="progress" style="display:none;"><img src="images/ajax-loader.gif" /></div></div>';

}
}
$("#dragAndDropFiles").append(html);
var i=0;
$('.close').each(function(){

$(".close")[i].addEventListener("click", multiUploader.prototype._remove, false);
i++;
});

}
}

This comment has been removed by the author.

How to upload any file i.e per file how to add upload button??

Drag and drop functionality not working in firefox . im using latest firefox version 42.0.
Drag and drop functionality work in vhrome properly but not in firefox.please let me know if anyone
know this answer.last one week i search the code but nothing is happen.

This code is not working in firefox,please help me out this.

How to accept all types of files?because doc and xls files are not uploded.

Great script! I am working on a way to modify this so that multiple files can be uploaded to more than one location. In other words, multiple "Drag & Drop" boxes that each have a target upload to separate locations. My question is how can I send the target upload location to the script? I attempted to send it from the "uploadUrl: by sending the URL over http such as "upload.php?target=somenewdir" , then having the upload.php file read in that var, but it will not read in - Any ideas on how to do this?

Hi..

This plugin is really great but I want some changes under this plugin like upload only single uploading and also upload only csv and xls file. I tried to upload csv and xls but it doesn't work. Some help me to resolve this problem. I really need it.

Thanks

how to check if drag and drop section is empty?
and arun solve the issues pls.

How do I pass a variable from the upload form to upload.php so I can store it in the DB?
For instance in the form: < i n p u t type="hidden" id="parent" "value="5">
Then on upload.php $parent = $_POST['parent'];

Okay now I have the $parent variable passing through to my database. But now the progress bar is stuck on and never goes away. If I put the exit command in front of my php code the bar goes away. If I put it at the end, it doesn't.

Has anyone written code to rename all extensions that will not currently upload, to '.txt', then renamed again just before it is actually copied?

How can add support to upload Microsoft word documents? I tried with the mime type application/msword but doesn't work

Awesome code. Thanx for the script.
Could you please also help with how to insert image title, description and image name to MySQL table at the time of uploading!!!

once successfully updated. how to redirect another page?

How to accept all types of files?because doc and xls files are not uploded.