Multiple File Drag and Drop Upload using HTML5 and Jquery.
Wall Script
Wall Script
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>
web notification

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

    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. 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
  18. thanks srinivas, u r doing good work for all developers.

    ReplyDelete
  19. 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
  20. 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
  21. it is possibile to integrate whit joomla?

    ReplyDelete
  22. It is possible to integrate with joomla?

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

    ReplyDelete
  24. Thank you for your good tutorial!

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

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

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

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

    ReplyDelete
  29. Thanks for sharing. Much appreciated.

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

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

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

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

    Please help

    ReplyDelete
  34. Please help.

    How can I add an Database Input Query?

    Please answere.

    Thanks

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

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

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

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

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

    ReplyDelete
  39. not working with IE7. any compatability issues

    ReplyDelete
  40. 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
  41. Arun you have done a good job. please help me.

    ReplyDelete
  42. 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
  43. Is there a way to limit the total filesize?

    ReplyDelete
  44. 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
  45. Thanks .. very useful for file upload .. good job ;)

    ReplyDelete
  46. 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
  47. I removed the if in the move uploaded file, and then it wont upload anymore whats wrong if i remove it?

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

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

    ReplyDelete
  50. Wow,
    nice and simple
    thx so much brother :)

    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. it is not working in IE8 too, please update for IE version otherwise unable to use it.

    ReplyDelete
  60. Congratulations, this is the best uploader.

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

    ReplyDelete
  62. 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
  63. yes its very good.. thanks

    ReplyDelete
  64. Not work in Internet explorer why?

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

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

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

    ReplyDelete
  68. any way to remove file limit

    ReplyDelete
  69. 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
  70. Great code. Does somebody know when the update will be up and runnnig?

    ReplyDelete
  71. 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
  72. 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
  73. 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
  74. how about multiple uploading of mp3 files? can you help me with this?

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

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

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

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

    ReplyDelete
  78. 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
  79. Valid file formats i want to upload file.php ? can

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

    ReplyDelete
  81. 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
  82. I can't upload with google chrome. Please help...

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

    ReplyDelete
  84. 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
  85. hi.please heip how to upload mp3 files using this form

    ReplyDelete
  86. 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
  87. Thank you very much. it is a very good script

    ReplyDelete
  88. Thank you very much for this code

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

    ReplyDelete
  90. 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
  91. 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
  92. 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
  93. Is it possible to upload .html files?

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

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

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

    ReplyDelete
  96. 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
  97. 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
  98. It is not working in safari browser.... Can anyone help me

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

    ReplyDelete
  100. 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
  101. 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
  102. its not working on mobile browser.

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

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

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

    ReplyDelete
  106. 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
  107. Wooow, this is incredible! :) Thank you!

    ReplyDelete
  108. 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
  109. i appreciated for script.. this is exactly what i've been looking for almost 1 week(it was like a year :) )

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

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

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

    "support : 'image/png'"

    ReplyDelete
  113. 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
  114. it is not supported for Excel uploads.Could you help on this

    ReplyDelete
  115. For Excel uploads change the file extension

    ReplyDelete
  116. 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
  117. 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
  118. 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
  119. 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
  120. thats cool, thanks

    ReplyDelete
  121. 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
  122. 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
  123. This comment has been removed by the author.

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

    ReplyDelete
  125. 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
  126. This code is not working in firefox,please help me out this.

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

    ReplyDelete
  128. 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
  129. 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
  130. how to check if drag and drop section is empty?
    and arun solve the issues pls.

    ReplyDelete
  131. 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
  132. 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
  133. 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
  134. How can add support to upload Microsoft word documents? I tried with the mime type application/msword but doesn't work

    ReplyDelete
  135. 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
  136. once successfully updated. how to redirect another page?

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

    ReplyDelete

mailxengine Youtueb channel
Make in India
X