Multiple File Drag and Drop Upload using HTML5 and Jquery.
Wall Script
Follow Me:
Monday, September 03, 2012

Multiple File Drag and Drop Upload using HTML5 and Jquery.

Are you looking for Drag and Drop multiple file upload using HTML5. Just take a look at this post, I had implemented this system with using jquery and PHP that uploads multiple files into server. This script helps you to enrich your web applications upload system. It works with all modern browsers try live demo and drop files.

Multiple File Drag and Drop Upload

Download Script     Live Demo

Developer
Arun Kumar Sekar
Arun Kumar Sekar

Engineer, Plugin Expert
Chennai, INDIA

Multiple File Drag and Drop Upload this will work in modern browsers like Crome, Firefox and Safari, File uploads happening through ajax
for this I implemented with Form Data and File Reader javascript API.

Requirements
- Jquery (tested with 1.7+)
- HTML 5

How to use
Just include Jquery library and multiupload.js files available in download script.

Javascript Code
All config parameters are required. If you want to allow other files formats, add in valid files variable.
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/multiupload.js"></script>
<script type="text/javascript">
var config = {
// Valid file formats
support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif",
form: "demoFiler", // Form ID
dragArea: "dragAndDropFiles", // Upload Area ID
uploadUrl: "upload.php" // Server side file url
}
//Initiate file uploader.
$(document).ready(function()
{
initMultiUploader(config);
});
</script>

upload.php
Simple PHP code uploading files from client mechanic to server location uploads folder.
if($_SERVER['REQUEST_METHOD'] == "POST")
{
if(move_uploaded_file($_FILES['file']['tmp_name'], "uploads/".$_FILES['file']['name']))
{
echo($_POST['index']); // to validate
}
exit;
}

HTML5 Code
HTML5 drag and drop form.
<div id="dragAndDropFiles" class="uploadArea">
<h1>Drop Images Here</h1>
</div>
<form name="demoFiler" id="demoFiler" enctype="multipart/form-data">
<input type="file" name="multiUpload" id="multiUpload" multiple />
<input type="submit" name="submitHandler" id="submitHandler" value="Upload" />
</form>
<div class="progressBar">
<div class="status"></div>
</div>
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


155 comments:

  1. 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!

    ReplyDelete
  2. 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.

    ReplyDelete
  3. its really nice work to upload multiple files...

    ReplyDelete
  4. The most awaited script. Many Thanks

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

    ReplyDelete
  6. what if i only want to allow images?

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

    ReplyDelete
  8. Many Thanks arun...

    ReplyDelete
  9. Can add progress bar and percent upload? :)

    ReplyDelete
  10. real good,thanks for sharing great work

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

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

    ReplyDelete
    Replies
    1. it will avoid with use prag replace function which can give a unique name to a file thankyou

      Delete
  13. How can I add a progress bar ???

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

    ReplyDelete
  15. And isnt IE a modern browser?

    ReplyDelete
  16. 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 :/

    ReplyDelete
  17. Very, very good tutorial, I like!!

    ReplyDelete
  18. 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

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

    ReplyDelete
  20. 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.

    ReplyDelete
  21. 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.

    ReplyDelete
  22. it is possibile to integrate whit joomla?

    ReplyDelete
  23. It is possible to integrate with joomla?

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

    ReplyDelete
  25. Thank you for your good tutorial!

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

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

    ReplyDelete
  28. How to create a unique URL for every file uploaded?

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

    ReplyDelete
  30. Thanks for sharing. Much appreciated.

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

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

    ReplyDelete
  33. nice script but css needs some improvements :S

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

    Please help

    ReplyDelete
  35. Please help.

    How can I add an Database Input Query?

    Please answere.

    Thanks

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

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

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

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

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

    ReplyDelete
  40. not working with IE7. any compatability issues

    ReplyDelete
  41. 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

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

    ReplyDelete
  43. 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

    ReplyDelete
    Replies
    1. You rule NIRAJ. Got mad until saw your solution!!
      Obviously thanks to Big ARUN too...

      Delete
  44. Is there a way to limit the total filesize?

    ReplyDelete
  45. 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.

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

    ReplyDelete
  47. 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?

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

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

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

    ReplyDelete
  51. 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?

    ReplyDelete
  52. How to accept all types of files?

    ReplyDelete
  53. 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.

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

    ReplyDelete
  55. No funciona en internet explorer, ayuda porfavor

    ReplyDelete
  56. Very useful upload example. Thanks.

    ReplyDelete
  57. 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.

    ReplyDelete
  58. I have a problem with special characters..

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

    ReplyDelete
  59. awesome code ever... lot of thank ..

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

    ReplyDelete
  61. Congratulations, this is the best uploader.

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

    ReplyDelete
  63. 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!! :)

    ReplyDelete
  64. yes its very good.. thanks

    ReplyDelete
  65. Not work in Internet explorer why?

    ReplyDelete
  66. can anyone help me to upload a complete folder plesae???

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

    ReplyDelete
  68. can anyone help me to upload multiple file in jsp

    ReplyDelete
  69. any way to remove file limit

    ReplyDelete
  70. 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.

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

    ReplyDelete
  72. 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)

    ReplyDelete
  73. 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

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

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

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

    ReplyDelete
  77. Line 48 in multiupload.js should be:

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

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

    ReplyDelete
  79. 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.

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

    ReplyDelete
  81. how can i remove a file from FileList?

    ReplyDelete
  82. 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

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

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

    ReplyDelete
  85. 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

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

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

    Pls help me

    ReplyDelete
  88. Thank you very much. it is a very good script

    ReplyDelete
  89. Thank you very much for this code

    ReplyDelete
  90. Thank you very much. it is a very good script

    ReplyDelete
  91. 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'];

    ReplyDelete
  92. 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

    ReplyDelete
  93. 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

    ReplyDelete
  94. Is it possible to upload .html files?

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

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

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

    ReplyDelete
  97. 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

    ReplyDelete
  98. 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.

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

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

    ReplyDelete
  101. 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!

    ReplyDelete
  102. 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.

    ReplyDelete
  103. its not working on mobile browser.

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

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

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

    ReplyDelete
  107. 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

    ReplyDelete
  108. Wooow, this is incredible! :) Thank you!

    ReplyDelete
  109. 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();
    }

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

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

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

    ReplyDelete
  113. i put code below in index. and getting error

    "support : 'image/png'"

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

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

    ReplyDelete
  116. For Excel uploads change the file extension

    ReplyDelete
  117. 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?

    ReplyDelete
  118. 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

    ReplyDelete
  119. 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

    ReplyDelete
  120. 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?

    ReplyDelete
  121. thats cool, thanks

    ReplyDelete
  122. 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;
    }

    }

    ReplyDelete
  123. 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++;
    });

    }
    }

    ReplyDelete
  124. This comment has been removed by the author.

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

    ReplyDelete
  126. 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.

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

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

    ReplyDelete
  129. 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?

    ReplyDelete
  130. 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

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

    ReplyDelete
  132. 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'];

    ReplyDelete
  133. 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.

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

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

    ReplyDelete
  136. 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!!!

    ReplyDelete
  137. if i upload more than one image means, example - 3 image means ajax calls upload.php file for 3 times. Means for every image ajax calls the upload file. Is possible to upload all the image files in single ajax call. Thanks in advance.

    ReplyDelete
  138. once successfully updated. how to redirect another page?

    ReplyDelete

Make in India