Upload multiple files with a single file element

Published July 13th, 2005

STOP PRESS: There is now a new version here, based on Mootools.

Please note: As you will notice if you take the time to read this article, you will see no mention of the word ‘Ajax’ (apart from the ones in this paragraph). That’s because this technique has nothing whatsoever to do with Ajax — and I never claimed that it did. The fact that people are linking to this page and suggesting some sort of Ajax-y connection has nothing to do with me. So please, no more “but it’s not Ajax!” comments.

Thank you.

10th October 2005: Updated to add Safari support. Many thanks to Luis Torrefranca, Jamie Butler and Matt Kurpiewski (http://www.law.pitt.edu) and Shawn Parker & John Pennypacker (http://www.fuzzycoconut.com) for their help. Please download again.

2nd October 2005: I updated the script to fix a potentially nasty bug.

If you have a form where you want to allow a user to upload more than one file, you’re stuck with either adding as many file input elements as the number of files you want to upload, or possibly having new ones appear ‘magically’ through Javascript.

I was mulling over some ideas while walking home from work last week, when I came up with what I thought might be a quite cunning (and more atttractive and useable) way to allow a form to use a single file input element — sort of — to upload multiple files. Since you can only store file upload information in a file upload element (<input type=”file”>), you’ll always need to have one element per file to be uploaded. But what occurred to me is that you don’t need to display all those file elements.

Using the DOM, it’s actually a relatively simple matter to conceal a file element once a file has been chosen, and add a new (empty) one in its place. And to keep doing so, as many times as you like. It all happens so quickly, that it appears that there’s only one input element.

To make it even smarter, you can then read the value of each element (ie. the name of the file to be uploaded) and build a list, in whatever format you like, of chosen files. And with a little bit more code you can add the ability selectively to remove files that have been picked.

Enough waffling — here’s a demonstration:

Files (maximum 3):

I’ve deliberately left all styling out of the class, so the list is ugly (you can edit this yourself quite easily). And obviously there’s no submit button (I don’t want a load of junk files uploaded to my host, thanks) so I can’t show it ‘in action’ as such. You’ll just have to take my word for it, that it really does work. Or of course, download the (zipped) file and try it for yourself (don’t use the version included in this page, it’s slightly different).

The code is heavily commented to explain a) how to use it and b) how it works, although I’ve also included a compressed, comment- and whitespace-free version which is significantly smaller. I’ve tested it successfully with Mozilla Firefox 1.04, MSIE 6 and Opera 8 but I’m fairly confident that it’ll work with most, if not all, modern DOM-enabled browsers — if you can confirm or disprove this, please let me know.

One thing to be aware of when allowing mutliple uploads is that there are generally limits on the quantity of data that can be sent in any one request — for example, PHP has a default limit of 2MB (although this can be changed, using ini_set(‘upload_max_filesize’, ‘[new size]M’) where new size is the maximum number in megabytes — this will not work if safe mode is enabled on your host).

If you’re looking for help handling the files once they’ve been uploaded, you could do worse than take a look at this this comment by Shawn Parker (thanks again, Shawn!).

The licence for this code is simple: use it how you like, but don’t blame me if it breaks anything. Also, it’d be nice if you’d leave the credit (with the link to this site) in the code.

44 Trackbacks/Pingbacks

  1. Pingback: Tired Idea » Blog Archive » Upload. Wash. Rinse. Repeat. on August 17, 2005
  2. Trackback: geek ramblings on September 27, 2005
  3. Pingback: warpedvisions.org » Blog Archive » Ajax multi-file upload on September 28, 2005
  4. Pingback: Incoherent Babble » Blog Archive » Ajax Multi-Upload Utility on September 28, 2005
  5. Pingback: Kiss in the dark » Upload de fichiers multiples avec un seul champ file on September 28, 2005
  6. Trackback: InfoSauce on September 28, 2005
  7. Trackback: Fiftyfoureleven.com Web Development Weblog on September 29, 2005
  8. Trackback: Bluetrait on September 30, 2005
  9. Pingback: vasily kartashov » Blog Archive » Ссылки on October 4, 2005
  10. Pingback: PhotoStack » Beta 361 on October 4, 2005
  11. Pingback: A random pixel » Upload multiple files with a single file element on October 19, 2005
  12. Pingback: 今日連結 (2005-10-31) [JeffHung.Blog] on October 31, 2005
  13. Pingback: PhotoStack » r373 on November 3, 2005
  14. Pingback: h7 blog » Blog Archive » Mehrere Dateien uploaden on December 22, 2005
  15. Pingback: Bram.us » My TinyMCE File Management : Spinoff 1 : PHP file uploads on November 30, 2006
  16. Pingback: Subir archivos multiples al servidor con AJAX - SWFUpload at mi binxe blog :P on December 19, 2006
  17. Pingback: 15 Days Of jQuery : Multiple File Upload Magic With Unobtrusive Javascript on December 19, 2006
  18. Pingback: www.svetoslav.info » Blog Archive » Upload multiple files on February 24, 2007
  19. Pingback: It Forx on March 28, 2007
  20. Pingback: Urls Sinistras » Blog Archive » del.icio.us entre 27/04/2007 e 02/05/2007 on May 3, 2007
  21. Pingback: Mai 07/02 on May 13, 2007
  22. Pingback: Upload multiple files with a single file element « Brave Dave’s Musings on May 31, 2007
  23. Pingback: Multiple file uploader: Mootools version » StickBlog on July 2, 2007
  24. Pingback: ???? (2007-07-04) [JeffHung.Blog] on July 6, 2007
  25. Pingback: omeck - strona domowa » Archiwum » Upload wielu plików na serwer w CakePHP v1.2 on July 19, 2007
  26. Pingback: jacobslusser.com » Blog Archive » Multiple File Upload on September 13, 2007
  27. Pingback: Upload de múltiplos arquivos usando um único INPUT. « Trecos & Tarecos da Informática on December 28, 2007
  28. Pingback: gauda.de » Blog Archive » Multiple File Upload with Ruby on Rails and file_column on January 21, 2008
  29. Pingback: M.I.S.H.U. » Blog Archive » Cakephp: working multiple files uploads ready to download script on February 7, 2008
  30. Pingback: PHP File Upload « ??????? on April 16, 2008
  31. Pingback: Multiple file uploader: Mootools version | Stickblog on July 21, 2008
  32. Pingback: Multiple file uploader: Mootools version | Stickblog on July 21, 2008
  33. Pingback: Multiple file uploader: Mootools 1.2 version | Stickblog on July 21, 2008
  34. Pingback: Scott » Blog Archive » Multiple upload of files using javascript function on July 22, 2008
  35. Pingback: Kucha?ka | brtnik.info on August 21, 2008
  36. Pingback: Ajax Multi-Upload Utility - Habari on August 30, 2008
  37. Pingback: Handle multiple attachments in ruby on rails | Article@Smarteguru on September 19, 2008
  38. Pingback: Runas caur biezpienu » Gl?t?ka failu pievienošana on November 3, 2008
  39. Pingback: Creating an image gallery for phpBB « on January 27, 2009
  40. Pingback: Multiple file upload with attachment_fu « Is the coffee still warm? on April 13, 2009
  41. Pingback: JavaScript - dynamisch formulare hinzuf?gen - Freesoft-Board on April 30, 2009
  42. Pingback: Multiple Attachments in Rails ???rails???????? on June 18, 2009
  43. Pingback: multiple-attachments-in-rails on July 11, 2009
  44. Pingback: Multiple Upload Using Single Upload File With jQuery - Hungred Dot Com on February 20, 2010

499 Comments

  1. nate on August 19, 2005

    Thanks for your code! I think there might be a bug in multifile.js, though. When I first tried it, I was having problems that the file input was immediately disabled after I intialized MultiSelector. Problem seemed to be with:
    if( this.count >= this.max || !this.max ){
    element.disabled = true;
    };
    If max is ‘0’ (no limit), (! this.max) is true, and the element is disabled before it is used. I think you want “if (this.max > 0 && this.count >= this.max)” or the like.

  2. Stickman on August 25, 2005

    Thanks for the bug report — you’re absoultely right. I’ve changed the code such that if max isn’t specified, it’s set to -1. The code then checks for this value when verifying the maximum number of files.

  3. Thuven on September 12, 2005

    Hi dude. thanks a lot for the helping hand .. you rock!! …

  4. Le on September 14, 2005

    Hi dude, thanks a lot for the script… :).

  5. Dougal Campbell on September 27, 2005

    If you have javascript disabled, you get one file input, but it still says “maximum 3″. You might want to either generate the “maximum” message via JS, or perhaps fall back to displaying all of the file inputs when there’s no scripting. You could default to displaying them all, and hide the extras with JS when it’s available.

  6. Mark Wubben on September 29, 2005

    There’s a memory leak in the code though. (Circular reference through closures leads to memory leaks in IE.) To fix it, set the `list_target` and `element` variables to null once you’ve set all the events.

    More here: http://novemberborn.net/javascript/event-cache

  7. sean on September 29, 2005

    Nice! On several of the sites I run, I just have 10 file upload boxes so you can choose to upload up to 10 files at a time (pics mainly), and I always thought it looked like hell. This will make it a lot better :D

  8. legionnewbie on September 29, 2005

    Dont suppose anyone would want to help out a newbie. How do I

    3. Instantiate a MultiSelector object, passing in the DIV and an (optional) maximum number of files
    * eg. var multi_selector = new MultiSelector( document.getElementById( ‘files_list’ ), 3 );
    Where do I put this ? in the _js file or the html file.

    sorry for the newbiness

  9. neal on September 29, 2005

    Just a thought, but how does it handle the case when three files have been selected and the first one is then deleted and another one added?

    I only ask as looking at the code it appears you will get two input elements with the same name.

  10. Kae Verens on September 30, 2005

    The demo does not work in Konqueror. I have not checked the source, though, to see what was wrong, but I’m sure it is easy to fix. If I fix it before you do, then I’ll alert you with the code changes.

  11. Touxe on September 30, 2005

    Thanks a lot for this very useful multi upload form.
    I’d like to change the “list-file” output for a table.
    In the first cell, the filename and in the second the button. I would like to do this in order to have all filename and button align.
    I’have tried but i’m a newbie. I’m able to create new line in my table but i can’t delete it.

    Can someone help me … thanks a lot.

    ps : sorry if you don’t understand me :)

  12. ceejayoz on October 1, 2005

    That is a beautiful approach! Wow!

  13. Dustin Diaz on October 1, 2005

    What a brilliant idea!
    Simple, Elegant, well documented and fast. The source is easy to follow and had no problems iterating through the logic. well done.
    Next time I run into a case where I need to upload multiple files, I’ll remember to keep this in mind.

  14. Jose on October 1, 2005

    Hi, i don’t know what am i doing wrong, all i get is a “Error: element has no properties” Javascript error and a think i followed all the instructions given.

    Does anyone have the same error?

  15. Stickman on October 2, 2005

    To everyone who’s linking to me, and for all the praise: thanks, I’m flattered. :)

    To everyone having problems getting this to work: I’ve added an example HTML file to the .zip.

    To neal: you’re right about the duplicate name problem, thanks for pointing it out. I’ve added a not-very-clever fix for the moment, until I get time to rewrite it properly.

    To Mark Wubben: I’m aware of IE’s memory leak problems but hadn’t really thought about them when writing this. When I get a moment I’ll look at rewriting to take this into account.

    To Kae Verens: I don’t have access to a machine running KDE to test on Konqueror. Any suggestions as to what the problem is (and potential solutions) are most welcome.

    I’m about to go on holiday for a week, so no more updates will occur until I get back.

  16. Jose on October 2, 2005

    Now is working great! Thanks man, awesome work!

  17. tdgraphix on October 2, 2005

    Great Idea and Implementation! Works like a charm!

  18. mattl on October 2, 2005

    Works in Safari too.

  19. Tom on October 2, 2005

    Nice but it has problems :-( On Mac OSX 10.4.2 it works fine with Firefox but does not perform any uploads (error: 4) when used in Safari (2.0.1) In my test file the first form using your sample fails but the second vanilla upload works fine. Any help would be appreciated.

    Tom

    “;
    print_r ($_POST);echo “”;
    ?>

    ” method = “post”>

    Files:

    var multi_selector = new MultiSelector( document.getElementById( ‘files_list’ ), 3 );

    multi_selector.addElement( document.getElementById( ‘my_file_element’ ) );

  20. Tom on October 2, 2005

    neal,

    why not just name the input something like “”userfile[]” and then deal with the php array in $_FILES on accepting the POST?

  21. Hans on October 3, 2005

    Nice work!
    It is annoying to have a script tag in the middle of the code. How about putting the entire script in one file? Then you need to add some more code. Note that the code that was previously in the script tag, is now in the _init code:

    addEvent(window, “load”, multiselector_init);

    function multiselector_init() {
    var multi_selector = new MultiSelector( document.getElementById( ‘files_list’ ), 3 );
    multi_selector.addElement( document.getElementById( ‘my_file_element’ ) );
    }
    function addEvent(elm, evType, fn, useCapture)
    // addEvent and removeEvent
    // cross-browser event handling for IE5+, NS6 and Mozilla
    // By Scott Andrew
    {
    if (elm.addEventListener){
    elm.addEventListener(evType, fn, useCapture);
    return true;
    } else if (elm.attachEvent){
    var r = elm.attachEvent(“on”+evType, fn);
    return r;
    } else {
    alert(“Handler could not be removed”);
    }
    }

  22. David Kaneda on October 3, 2005

    I can confirm the script doesn’t work in the most recent Safari-

  23. Adam on October 3, 2005

    Thanks man! I was thinking about the same thing the other day after work, with a quick Google, I found you. It’s good to know we don’t all have to do the work twice as long as there are plenty of people like us out there.

  24. Noel Jackson on October 4, 2005

    This is awesome. Mind if I use it in PhotoStack???

  25. Noel Jackson on October 4, 2005

    Well, I thought I would, but it doesn’t work in safari! DOH!

  26. Jim Johnson on October 4, 2005

    Just saying thatnk found the element I already had plus used your element.onchange=funtion rather than my addHandler()
    works cross browser better Appreciate the code

  27. delvinj on October 5, 2005

    Nice work. anyone tried this with a servlet or jsp on the recieving end?

    ~d

  28. Noel Jackson on October 5, 2005

    Anyone know how to get this working in Safari? I’d love it if you could tell me.

  29. Shawn on October 5, 2005

    I believe that it has something to do with assigning it a display of ‘none’ when created.
    CSS behavior will have an element like an image not even load from the server with a display: none; – and if you remove line 77 ( this.style.display = ‘none'; ) from the js file Safari works.

    There needs to be another way of hiding the newly created file input element. Maybe hiding a div that contains it instead of the element itself…

  30. Noel Jackson on October 5, 2005

    how about text-indent: -1000 em; ???

  31. Shawn on October 5, 2005

    Tried that and it didn’t like it. On top of that – whenever I did get something to work in Safari, Firefox would freak out and either show a sliver of the element or not work like Safari did…
    Granted, I’m not a CSS or Javascript Guru by any means – I’m still learning – but there just might have to be some browser sniffing going on here.
    A little browser sniffing could get this to work because every other browser responds to display: none being applied to the element while Safari liked having height: 0; width: 0; overflow: hidden; applied to it.
    I know its archaic to browser sniff, but for now its the only way I found to do it. I might also try putting a size limit on the list div and make sure it does not grow, and make sure the new file input elements don’t run inline but that they each run on a new line – that way overflow: hidden could be applied to their parent element without styling the inputs themselves.
    I didn’t have time to test that concept yet.

  32. Luis Torrefranca on October 6, 2005

    For a mailer, I added a browser sniffer and changed the style handling to this:

    if (is_safari) {
    this.style.position = ‘absolute';
    this.style.left = “-10000px”;
    } else {
    this.style.display = ‘none';
    }

    I was also having some trouble retrieving the data, so we modified the element.name to use an array:
    element.name = ‘attachment[]';

    and retrieved it on the php processing page with:
    $files = sizeof($_FILES['attachment']['name']);
    for ($i = 0; $i

  33. Luis Torrefranca on October 6, 2005

    oops… code cut me off…

    anyway, loop through from 0 through the array size. Then call them by:
    $_FILES['attachment']['tmp_name'][$i] and so on

    again, hope this helps

  34. superkain on October 6, 2005

    Looking Good man! Great inception.

  35. Shawn on October 7, 2005

    Luis – I just came back to post that same Safari fix – damn you! ; )

    I got around the files thing by just doing a foreach on the $FILES array and only working on the entries that had an error of 0. Saved the extra hassle of having to do it client side.

    Lets see if all my code makes it

    $no_files = 0;
    foreach($_FILES as $file)
    {
    switch($file['error'])
    {
    case 0:
    // file found
    if($file['name'] != NULL && okFileType($file['type']) != false)
    $v = processFile($file);

    // build string for confirmation display
    if(isset($v) && $v == true)
    {
    showSuccess($file);
    $no_files++;
    }
    break;

    case (1|2):
    // upload too large
    $error[] = ‘file upload is too large';
    break;

    case 4:
    // no file uploaded
    break;

    case (6|7):
    // no temp folder or failed write – server config errors
    $error[] = ‘internal error – flog the webmaster';
    break;
    }
    }

  36. Pranveer on October 7, 2005

    where is catch.php

  37. Shawn on October 7, 2005

    Another Safari fix: I changed my delete button into an image button, and for some reason after I did that Safari wanted to refresh the page after doing that which also cleared my upload fields.

    This can be avoided by simply adding:
    return false;
    to the end of
    new_row_button.onclick= function(){
    // Remove element from form
    this.parentNode.element.parentNode.removeChild( this.parentNode.element );
    // Remove this row from the list
    this.parentNode.parentNode.removeChild( this.parentNode );
    // Decrement counter
    this.parentNode.element.multi_selector.count–;
    // Re-enable input element (if it’s disabled)
    this.parentNode.element.multi_selector.current_element.disabled = false;

    return false; // add this to appease Safari
    };

  38. Leo on October 11, 2005

    What does this have to do with AJAX??? Does “AJAX” manicker now get used for any clever Javascript hack? Don’t get me wrong, I think the script is a cool idea, but it’s not AJAX unless it sends micro-requests to server in an XML format and does micro-updates of those responses.

    The whole point of AJAX is that I can send a request to server and update a part of the page without having to reload and re-render the whole page.

  39. Stickman on October 11, 2005

    You’re right, but then I never said it had anything to do with Ajax.

  40. smith288 on October 11, 2005

    AJAX is used very liberally these days. Its alot easier to say that than “asyncronis javascript connection without using xml…”

  41. Stickman on October 11, 2005

    True. But as has been pointed out, this widget is just DOM manipulation — there’s no client-server communication, unless you count the form submission (which is handled in the usual fashion).

  42. Sheetal Jain on October 12, 2005

    I have managed to get this working even by hiding the file control -Just the way Gmail does for email attachment –

    Had to dig through gmails’s dirty secert

    here is the solution

    http://

  43. Sheetal Jain on October 13, 2005

    Ops! – I didn’t put the url in last posting

    http://sheetaljain.blogspot.com/

    Thanks

  44. newbegin on October 13, 2005

    hello
    it good ….
    now i am plan to use this …

    Thanks

  45. Marcos Lopez on October 14, 2005

    It’s a wonderful solution, but…. what about having the ability to choose several files at the same time? or even all the files under a directory?

    It would be very usefule a “select folder” winamp-style control

    Thanx

  46. Stickman on October 14, 2005

    Not possible, I’m afraid. For very good security reasons, file input elements are very limited in their capabilities and there’s simply no way (that I’m aware of) to work around that.

    I suppose it’s possible that you could achieve it in Internet Explorer using a custom ActiveX control, but I’m no expert on that sort of thing and anyway, that would of course kill cross-browser comptability.

  47. MisterJ on October 18, 2005

    Excellent script !

    I have made a little mod in order to display only the filename i/o full path+filename :
    element_work = element.value;
    element_tab = element_work.split(“\\”);
    nbr_elements = element_tab.length;
    new_row.innerHTML = element_tab[nbr_elements-1];

    instead of :
    new_row.innerHTML = element.value;

    cheers ;)

  48. Jpep on October 19, 2005

    Can a javascript wiz please help me (if possible) change the delete button to the word ‘remove’. I’d rather use text instead of the button for style purposes. Thanks for the great work!

  49. Jpep on October 19, 2005

    Me again… Sorry, but I’m having a bit of trouble handling the multiple files using php. My original form was based on this example from php.net (http://us3.php.net/manual/en/features.file-upload.multiple.php). Here is my form…

    I then use the following php just to test the first upload on the first file.

    / $userfile is where the file went on the webserver
    $userfile = $_FILES['userfile']['tmp_name'][0];

    // $userfile_name is the original file name
    $userfile_name = $_FILES['userfile']['name'][0];

    // $userfile_size is the size in bytes
    $userfile_size = $_FILES['userfile']['size'][0];

    // $userfile_type is the mime type
    $userfile_type = $_FILES['userfile']['type'][0];

    // $user_file error is any error encountered
    $userfile_error = $_FILES['userfile']['error'][0];

    I echo these variables and the result is that I don’t get any data for the above variables. When I change the input id to id=”my_file_elementXXXXX”. The upload works. So obviously I’m doing something wrong on the php end.

    Any ideas? Thank you so much. Sorry for the multiple posts.

  50. Jpep on October 19, 2005

    Okay. I figured out what I was doing wrong. Obviously I cannot follow directions. If anyone else out there is having problems, make sure that your input field does not have a ‘name’ set. As per the instructions, make it look like this…

    Then one way (not the best way) of process the files with php would be the following…

    $file_count = sizeof($_FILES);
    echo ‘Number of files: ‘ . $file_count .’…';

    for ($i=0; $i';
    echo ‘Size: ‘ . $userfile_size.”;
    echo ‘Type: ‘ . $userfile_type .”;
    echo ‘Error: ‘ . $userfile_error .”;
    echo ”;

    }

  51. Jpep on October 19, 2005

    Oops. My code got cut off. What’s the best way to post php? Anyway, on the server (php), I use…

    $file_count = sizeof($_FILES);

    to get the number of files uploaded

    and then I just loop thru and process as needed using the file naming scheme provided by this script…

    $thisfilename = ‘file_’ . $i;
    $userfile = $_FILES[$thisfilename]['tmp_name'];

    Hope that helps someone out.

  52. Sudhir on October 19, 2005

    Hi

    I would like to use this script but I want to use the checkbox instead of delete button and I want to delete the checked files at once rather than deleting individually.

    Please help me in getting this if anyone has work around.

    Thanks in advance
    Sudhir

  53. Jpep on October 20, 2005

    ***Does not work in Netscape 7.02 / WinXP***
    Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.0.2) Gecko/20030208 Netscape/7.02 (VAUSSU03)

    Yes, me again. I noticed that this demo doesn’t work in the above environment. In my test, I must hit the browse button again after selecting the file for the file to show in the file list below the form.

    In further tests, the files do not appear to upload either.

    Can anyone else confirm this behavior?

  54. Stickman on October 20, 2005

    I don’t have NS7 installed but I’ve tried it in NS8beta and it appears to work.

    If I could think of an elegant, reliable way (ie. not sniffing for specific browsers/versions) to exclude those browsers that are known to have problems, then I’d implement it. Suggestions welcome.

  55. hm on October 22, 2005

    doesnt do crap, just dumps me at http://localhost/your_script_here.script

  56. Stickman on October 22, 2005

    :) That’s the bit you do for yourself — hence the name ‘your_script_here’. If you need help handling the uploaded files, I suggest Google.

  57. Flyboy on October 24, 2005

    After uploading the files (done through ajax, so the uploadform never leaves the page) I want to reset the form so it’s ready to select a bunch of other files and then upload them too.

    But the submit button doesn’t react any more then.

    Is this a build in protection against people double clicking the button if they think nothing happend?
    And if so, how can I fix this so I don’t have to reload my whole page to upload another file.

    Thanks

  58. Stickman on October 24, 2005

    Interesting idea. You’d have to step through each element, using removeChild() to get rid of it. Or you could use innerHTML, but I wouldn’t recommend it.

    If I get a spare minute, I might create a clearElements() function.

  59. Flyboy on October 24, 2005

    ok, thanks

    now even reloading the form doesn’t help, because the javascript variables still exist on the main page.

  60. Javaholli on October 25, 2005

    Great thing! Thanks…
    I’ve made some changes for a nicer output (table).
    In the example HTML I replaced the tag with the following code:

    In the multifile.js file I’ve added/changed the following lines:
    var new_tr = document.createElement(“tr”);
    var new_td_filename = document.createElement(“td”);
    var new_td_button = document.createElement(“td”);
    // Set row value
    new_row.innerHTML = element.value;
    // Add button
    new_td_button.appendChild( new_row_button );
    new_td_filename.appendChild(new_row);
    new_tr.appendChild(new_td_filename);
    new_tr.appendChild(new_td_button);
    // Add it to the list
    this.list_target.appendChild( new_tr );

    Important thing is that the ‘s are added to the tbody tag! It won’t work if you’re not using the tag. Took me a while to figure that out…

  61. dan on October 31, 2005

    how do i actually pass the value over to my asp page?

  62. Execute on October 31, 2005

    Hello, very nice code, isorta skim read the code after downloading, but i found this using AJAX search in google, obviously so did others who left angry comments :P.
    My question is, can you make an example of AJAX submitting the form? I have been having trouble submitting “file” inputs thru my AJAX script, I tried using the .value of the file input but it doesnt send it to the php script. How can i get the “Value” or the “file” itself with JS to send to PHP? any ideas?

  63. Stickman on October 31, 2005

    Execute: you can’t upload files via XMLHTTPRequest. Simple as that.

    However, as I think has been mentioned above you could use a hidden iframe. I’ve done it myself and it works, but it can be a bit of a pain to get it working reliably.

  64. Execute on October 31, 2005

    ok… yea i found that out after a little bit of reading afteri posted that comment. thats a shame… However I did use an iframe, and just did target=’iframe’, and it works out fine… but what do you mean “bit of a pain to get it working reliably”, was way easier than i thought. Is there something else you were thinking of?

    But still im amazed your script works in all these browsers, i havent tested with opera, or ie, but with firefox 1.07 works fine :). And i easily set it up without any hassle, so seriously great job, and i will include your comment etc and wont remove it ;P.

    Happy halloween from DesignPlanet.biz

  65. Stickman on November 1, 2005

    Thanks for the flattery — always appreciated :)

    For more info on the trials I had with uploading with iframes, see this entry.

  66. DisasterMan on November 1, 2005

    Found the script very easy to get working, and have used it to great effect. Thank you very much!

  67. vanaja on November 3, 2005

    Thanks for wonderful script.
    Can any one tell me how to create a space in between the path and button?
    i am new to programming.

  68. Emmerson Miranda on November 4, 2005

    Excelent work, It do all I need.

    Good luck!!!

  69. Robert on November 6, 2005

    This is very smart and cool.

    But….what is “Ajaxian” about this ?????
    I don’t see no XMLHttpRequest calls.

    Somebody please tell me

  70. Robert on November 7, 2005

    Re my comment above:
    Just want to clarify –
    STICKMAN did not call it AJAX in any way.

    I was referring to those other stupid blog posts calling it “AJAX” – fawking idiots

  71. Robert on November 7, 2005

    >>Flyboy Says:
    >> After uploading the files (done through ajax, so the upload

    hmmm you sure you did thru XMLHTTPRequest ?
    Care to share with us how you did it ?

  72. Execute on November 8, 2005

    Use iframes. because YOU CANT send files through javascript. I been lookin all over for a way to do it with the XMLhttpRequest rather than iframes. So you just simply target the iframe which is on top of your form, make it invisible with css and you got yourself a fake-ajax system :)

  73. Robert on November 8, 2005

    ^^^^ so “FlyBoy” is full of BS ?

  74. Stickman on November 8, 2005

    Calm down, Robert. Clearly, for some people, Ajax has become a catchall term for a variety of newer browser technologies. While that might not tie in with the strict meaning of the term as it was originally intended, I don’t think it’s necessary to be quite so pedantic about it.

  75. Fabian on November 9, 2005

    Heyho, just wanted to say thanks for this great Widget…
    It’ll help me in developing a FileBrowser-Servlet :)

  76. ahussam on November 10, 2005

    Hi, I am having some trouble with actually uploading the files in the backend, i tried a “stupid” approach to understand the logic, added 4 files, removed the 3rd the submit, used file_1 as static filename, then file_2…etc, it did not recognize file_2 although i removed the 3rd file !?

    also i need to know (as a concept) as I use CFML, how would I transform the number of files and the filenames to the backend, i know how to do that on 1 file, but i just can’t understand the logic here for multiple files

    thanks

  77. Tbolt on November 12, 2005

    Need to add a function that clears all onSubmit or whatever. Anyone set this up already? Otherwise you have to manually delete them out if you want to add more files.

    Otherwise, it’s a great little script.

    thanks

  78. Shawn on November 12, 2005

    For those still needing a file upload script – I offer up a starting point.
    Yes, a starting point. This script solely handles file uploads and nothing else. You are responsible for securing your user’s input – I simply can’t do that for you, nor can anyone else.

    http://www.top-frog.com/files/scripts/upload_sample.phps

    Feel free to use the script or modify it in any way. For more information on handling file uploads in PHP you can refer to these pages:
    http://us2.php.net/manual/en/features.file-upload.php
    http://us2.php.net/manual/en/security.variables.php

  79. JD on November 13, 2005

    Great tool….this is the simplest multi-upload tool that I have seen.

    I have a question…Is it possible to retrieve the number of file elements on the page at any given time? I am trying to send the “file count” in a hidden form field so that I know how many files to process on the server side.

    Any help is appreciated.

    Thanks for the work Stickman…….

  80. Ulrich Fuchs on November 14, 2005

    Hello!
    I copied the 2 script files in /catalog/, and inserted your code in my contact form.
    When I change input type to “image”, then I get an error – if I let it be as “file”, I can see the dialog, select pictures, but they will not be attached to the mail!!
    Please help me and explain what to change if I want that IPG and PNG pictures can be attached – but no DOC, PPS and such stuff.
    Thanks!

  81. prince on November 14, 2005

    ur script seems to be very useful…Stickman……can u make an image preview for uploading images.then it would be much useful.and also validate the image dimension,image type,etc….like the following one:

    http://www.reallycoolspace.com/upload.html
    http://www.reallycoolspace.com/upload.js (the js file, the html file links to this)

    but this script doesnt work in all browsers.plz rectify it thru ur script….

  82. Flyboy on November 15, 2005

    Just back from a holiday and euhm, no, I’m not full of BS
    You surely can upload files through javascript.
    Problem is I wanted a status bar with it, had no time to do it all in ajax, so now I ended using 1 iframe, just for the status bar, will try and change that shortly too.

    Now my only need is the function to clear out all the variables instead of having to do it manualy every time.

  83. David Levin on November 15, 2005

    Awesome tool! Great work!

  84. Magic on November 15, 2005

    Hi all. i tried that script at firefox 1.0.7. it does not works. it upload only one file. other selected files not uploads.

  85. dpinto on November 16, 2005

    Can you add a feature that checks if the same file is added twice in the list and alerts the user that he already has added that file once.
    Overall its a nice script.

  86. dpinto on November 16, 2005

    Also that delete button could be an HTML link.

  87. dheeraj on November 23, 2005

    hi,
    Thanks for your usefull code for multiple file upload…but I need that the file dialog box must be hidden… and instead of it their should be a link “upload files” just like GMail file attachment.
    I have tried it but i have to click submit button 2 times to submit the files..
    Pls give me a solution for that..

  88. Mitt on November 23, 2005

    First off, great job! Second for those of you who have asked about the image preview, I wanted the same thing but found that Firefox will not allow the image preview to work because it is a security feature to disallow linking or access to local files. I was able to make it work in IE but ened up leaving it out all together because I don’t like to restrict users on a browser they have to use.

  89. Scaramouch on November 25, 2005

    First off, great script. You’ve “thunk” outside the box a bit & come up with what i think is a very good approach to this. Now if i can only figure out how to use is in a .NET environment.

    Does anyone know how i might be able to grab the files once they’ve been uploaded? Typically, i’d use the <asp:FileUpload> control, or even just something like <input type=”file” id=”file_1″ runat=”server”> (note the runat=”server” property) so that the control can be referenced server-side by it’s id. However since the file elements are being added client-side this approach won’t work.

    I’d love to be able to use this script in my webform if I can.

    Any help would be appreciated. Thanks.

  90. Stewart Boutcher on November 26, 2005

    I can verify that this script does not work in Firefox 1.0.7, either with file input naming convention “file_0″, etc or with “userfile[]”. In all cases only the first file is ever uploaded.

  91. Mir Ai on November 28, 2005

    Hi Everyone,

    Very, very cool solution to uploading multiple files.

    My requirements are a little different. I don’t want the user to see the file input files (text field or browse button). I want to be able to show a link which says “Add File”. I’ve tried hiding the ‘my_file_element’ field and then adding a link on the page which calls the following method:

    // adds a new file
    function addFile() {
    var myUploadField = document.getElementById(‘my_file_element’);
    if (myUploadField != null) {
    myUploadField.click();
    }
    }

    This “sort of” works. Clicking the links adds the file and then shows the uploaded file name in the list. However, it adds more file upload fields to the screen and when I try to remove an uploaded file, it gives me a javascript error. The form also does not want to submit the first time. I have to click the submit button a second time.

    Any ideas or thoughts on how to make this work?

    Thanks,
    Mir

  92. Shawn on November 28, 2005

    Well, the script works fine with Firefox 1.0.7 on Mac. So I’d venture to guess that there is something wrong with the usage for the complaint that it doesn’t work on FF 1.0.7

  93. ®@T@Ø on November 28, 2005

    How I can restrict the type (s) of archives for upload?
    In the javascript, not in PHP. Something of this type was thinking about using substr to only catch the extention of the value of input file, but I did not obtain…

    Sorry my english, I´m brazilian…

    I´m waiting a return!!!

    ;º)

  94. Joe Shelby on December 3, 2005

    It works fine for me on Firefox 1.0.7 for Windows and IE 6, using JBoss/Tomcat/Struts/LazyDynaBean for the server side.

    I hacked at it a bit. We needed to associate a description with the file as part of the app i’m using it in, so I added a callback feature along with some additional references. diffs are bolded below:

    function MultiSelector( list_target, max, handler ){

    // Is there a maximum?
    if( max ){
    this.max = max;
    } else {
    this.max = -1;
    };
    // Is there a callback?
    this.callback = handler;

    element.onchange(): add the new if
    // Hide this: we can’t use display:none because Safari doesn’t like it
    this.style.position = ‘absolute';
    this.style.left = ‘-1000px';

    if (this.multi_selector.callback) {
    this.multi_selector.callback(this, “added”);
    }

    };

    this.addListRow(): add new_row as a reference so callback can manipulate it.
    // References
    new_row.element = element;
    element.new_row = new_row;

    a demo callback:
    function additionalAttachmentsCallback( element, action ){
    if (action == ‘added’) {
    element.new_row.appendChild(document.createElement( ‘br’ ));
    var t = document.createTextNode(“Description:”);
    var new_row_description = document.createElement( ‘input’ );
    new_row_description.type = ‘text';
    new_row_description.value = ”;
    new_row_description.size = 60;
    new_row_description.name = “desc_” + element.name;

    element.new_row.appendChild(t);
    element.new_row.appendChild(new_row_description);
    }
    }

    and now in addition to getting file_0, my struts action can look for a desc_file_0 for the description.

  95. Wing on December 7, 2005

    This isn’t an example of AJAX. It’s just manipulating the DOM using Java.
    Where’s the advanced javascript and xml?

  96. Stickman on December 7, 2005

    You’re absolutely right. Please see the numerous, similar comments above.

  97. aparch on December 16, 2005

    Oh
    thanks for your help.
    I will come here sometimes for it.

  98. Shrimp on December 18, 2005

    Wow, I see the trackbacks have caused a rather large headache for the author :). I too found this page looking for AJAX information (via Google).

    Don’t really have anything to comment on this script about, but Stickman, I feel your pain ;). People would do well to read the comments and trackpacks before ripping into the author.

  99. Oliver on December 21, 2005

    Hi Folks

    First of all;
    Thank you for publishing this great and neat script!

    I got it work with a GET request ‘only’ but would rather prefer to send the FORM by a POST.
    Does anybody else face this issue or could me explain a work arround?

    Oliver

  100. Oliver on December 22, 2005

    Hello All

    I figured out, that I doesn’t work with FireFox but InternetExplorer.
    If anybody found a workarround for FireFox, I’d very appreciate to learn about.

    Btw. You may wish to see my modifications here: http://www.planetdoom.ch/test/upload_test.php

    Regards
    Oliver

  101. lanner on December 23, 2005

    hello,

    can you explain to me what you put here :

    action=”your_script_here.script”

    i’m not understand about this, thanks a lot

  102. zaila on December 28, 2005

    i have try your code. When i save using “.html”, its work. But, when i save using “.htm”, it doesn’t work. can i know why and how to solve it.

  103. Sourabh on December 28, 2005

    sure it is a real nice way to upload multiple files. but as we have an option of zipping the stuff. this would defeat the idea of having the limit to upload. but sure, it can extend to any limit of uploading..

    keep going….. !!

  104. Mohammad on January 8, 2006

    can anyone tell me in detail that if i chose four image files then ho i and where i go get the valuse to put in my mysql server i am bit confussed please please Help if you can write me a two line of script of insert that would be great i can feed off of that but its a great script very nice hats off to you man but with little more help for novice like me can solve the problem for lots of us out thee how they are trying to learn a thing or two.

  105. James on January 17, 2006

    Well, the script works fine with Firefox 1.0.7 on Mac. So I’d venture to guess that there is something wrong with the usage for the complaint that it doesn’t work on FF 1.0.7

  106. Eric Kaiser on January 24, 2006

    Great script! I’m about as stupid as it comes to stuff like this. I was in search of an inclusive script that not only allowed multiple selection of files to upload, but I wanted it to upload as well. Some of the upload examples on this forum don’t make sense, or are incomplete. I hope to post a change to that. By surfing other sites I came up with a vare bones PHP upload script you can put on your page. There is no resizing of the files or file checking, but I’m sure I will get that going real soon. If anybody wants that feel free to email me.

    Here’s the PHP code that uploads the files:

    foreach ($_FILES["file"]["error"] as $key => $error) {
    echo “key: “.$key.””;
    if ($error == UPLOAD_ERR_OK) {
    $tmp_name = $_FILES["file"]["tmp_name"][$key];
    $name = $_FILES["file"]["name"][$key];
    move_uploaded_file($tmp_name, “tmp/”.$name) or die(‘upload error’);
    }
    }

    I made one change to the multifile.js script. Look for the line that reads:

    element.name = ‘file_’ + this.id++;

    This is currently around line 65, and change it to:

    element.name = ‘file[' + this.id++ + ']‘;

    I’m submitting my form onto itself. I have not tested this script if your form action goes to another page.

    Thanks again for this script.

  107. Rich S Wyatt on January 24, 2006

    Hello Stickman! Great work.

    I’m using this in an intranet and have a couple of questions.

    #1 – I would like to modify the output to include some additional text after a file is selected. Right now it simply states the path to the file on the local machine. I’ve played with some pieces of the code to no avail. Can you point me to the line that would allow me to add some things to the path on display?

    For example: Image 1: U:\MyPath\MyImages\bobspic.jpg

    Secondly – when an administrator browses the administration page for a section that may already have some images uploaded:

    Is it possible to recreate what you are doing dynamically with the images that already exist? That way I can “Delete” images that are no longer needed and then catch that all with PHP on the submit of my form.

    Thanks, in advance, for any insight you may give and again: great work!

  108. Steve Owen on January 26, 2006

    Great script, but there does appear to be a bug (feature?) in Firefox. I’ve only tested it in Firefox and IE, and it’s fine in IE, but in Firefox, if you have the script in a table, but the form is outside of the table cell, the new File elements, as they are created, are not assigned to the form. This can be tested by asking the script for the form name of the new element (“undefined”) or keeping count of how many form elements there are (it doesn’t go up). This is almost certainly Mozilla’s unforgiving nesting of tags, and is fair enough, but you do need to watch out for it.

    As an example, in the test page in the zip, put the form name after a table tag but before the tr tag. Submit the form with more than one file and only the first one is uploaded.

    It’s driven me mad for a few days trying to track this down, so I’d spare anyone else the pain.

    Stickman, great script. Thanks.

  109. Steve Owen on January 26, 2006

    Oh, as a follow-up, if anyone’s interested in mods, I’ve added to the script to also just show the filename rather than full path, and to put the Delete button at the start, just as an “X”. It means it all lines up and, I think, looks a lot nicer. You could of course style up the button to make it look even better.

    Because of the innerHTML being affected by putting the button first, you need to put it in its own element. So here’s part of the new script, the this.addListRow function…

    /**
    * Add a new row to the list of files
    */
    this.addListRow = function( element ){

    // Row div
    var new_row = document.createElement( ‘div’ );

    // Delete button
    var new_row_button = document.createElement( ‘input’ );
    new_row_button.type = ‘button';
    new_row_button.value = ‘X';

    // References
    new_row.element = element;

    // Delete function
    new_row_button.onclick= function(){

    // Remove element from form
    this.parentNode.element.parentNode.removeChild( this.parentNode.element );

    // Remove this row from the list
    this.parentNode.parentNode.removeChild( this.parentNode );

    // Decrement counter
    this.parentNode.element.multi_selector.count–;

    // Re-enable input element (if it’s disabled)
    this.parentNode.element.multi_selector.current_element.disabled = false;

    // Appease Safari
    // without it Safari wants to reload the browser window
    // which nixes your already queued uploads
    return false;
    };

    // Set row value
    var c = element.value.lastIndexOf(‘\/’); //For Unix, etc.
    if (c != -1)
    html = element.value.substring(c+1);
    else {
    var c = element.value.lastIndexOf(‘\\’); //Win
    if (c != -1)
    html = element.value.substring(c+1);
    else
    html = element.value;
    }

    // Add button
    new_row.appendChild( new_row_button );
    var new_row_text = document.createElement( ‘span’ );
    new_row.appendChild(new_row_text);
    new_row_text.innerHTML = ‘ ‘ + html;

    // Add it to the list
    this.list_target.appendChild( new_row );

    };

    I also liked to change the size and class name of the Browse button, which you can add by expanding the MultiSelector object:

    function MultiSelector( list_target, max, class_name, browse_size ){

    and after this.max = -1, these changes:

    this.max = -1;
    };
    this.class_name = class_name;
    this.browse_size = browse_size;

    /**
    * Add a new file input element
    */
    this.addElement = function( element ){

    // Make sure it’s a file input element
    if( element.tagName == ‘INPUT’ && element.type == ‘file’ ){

    // Element name — what number am I?
    element.name = ‘FILE’ + this.id++;
    element.className = this.class_name;
    element.size = this.browse_size;

    // Add reference to this object
    element.multi_selector = this;

    I hope these additions are useful.

  110. Nate on January 27, 2006

    Man, this script works great in all of the browsers -I-, but not in the one browser my company (and subsequently, some of our customers) use!

    Sadly, we’re stuck in the stone age with IE 5.x Mac, and it doesn’t seem to work at all. When I browse/add a file, the file name just sits in the field and doesn’t go anywhere, nor does it appear in the listing below.

    I know I’ve had trouble with CSS in this version of IE, but it mostly had to do with using quotes in url() options, and the classic box-model problems. Since the filename seems to hang in the field, I’m guessing it’s a JS-related issue, and not CSS.

    This makes me sad, because this is the _perfect_ solution to some of our problems. Our customers upload a lot of files to us on a daily basis, and this is so much cleaner than 10 file/browse lines.

    Thanks in advance for any hints

  111. Arminda on January 28, 2006

    Hello,

    can someone help me with uploading the file(s) using the hidden iframe, so that i can upload at the same as i insert the file?

    Execute: ” However I did use an iframe, and just did target=’iframe’, and it works out fine..”, can you show me? I don’t understand?

    Stickman: “However, as I think has been mentioned above you could use a hidden iframe…”, can you?

    Thanks.

  112. Chris on January 31, 2006

    Hi, Just have a quick question. I’m using IE 5.5. I use css for my input fields. On my text input fields I have a border on all four sides. When the page initially loads the border is around my text window but after the first click on the browse button and selecting a file the css disapears and I just have a empty space where the text button should be. It’s still there, just no borders. Any idea how to keep the css?

    Thanks

  113. Chris on January 31, 2006

    I figure it out.

    In you .js file under –

    element.name = ‘file_’ + this.id++;

    add
    element.className = ‘formInputs'; // or what ever class your text input is

    This will pull any class you’ve assigned to the input fields objects and apply it to the new input field object that gets created by the js file.

    You can also do this for the delete button,

    find the following
    new_row_button.value = ‘Delete';

    add this after
    new_row_button.className = ‘submitbutton'; // or what ever class your submitbutton are

    Thanks for the great script.

  114. Tj on February 4, 2006

    Hey everyone, is anyone having problems with the files uploading in IE? It’s not working for me… It works just fine and awesome in FireFox, but IE wont upload the files…

    Thanks for any help! :-D

    -Tj

  115. Ben on February 9, 2006

    Hi, thank for the useful script. I’ve made some changes for a nicer output (table).

    In example.html, changes line <div id=”files_list”></div> to <table id=”files_list”></table>

    In multifile_compressed.js, changes function addListRow as follow:
    this.addListRow = function( element ){

    // Row div
    var new_row = document.createElement( ‘tr’ );
    var new_col_filename = document.createElement( ‘td’ );
    var new_col_button = document.createElement( ‘td’ );

    new_col_filename.setAttribute( ‘align’, ‘left’);
    new_col_button.setAttribute( ‘align’, ‘right’);

    // Delete button
    var new_row_button = document.createElement( ‘input’ );
    new_row_button.type = ‘button';
    new_row_button.value = ‘Delete';

    new_row.appendChild( new_col_filename );
    new_row.appendChild( new_col_button );

    // References
    new_row.element = element;

    // Delete function
    new_row_button.onclick= function(){

    // Remove row from table
    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);

    // Remove element from form
    this.parentNode.parentNode.element.parentNode.removeChild( this.parentNode.parentNode.element );

    // Decrement counter
    this.parentNode.parentNode.element.multi_selector.count–;

    // Re-enable input element (if it’s disabled)
    this.parentNode.parentNode.element.multi_selector.current_element.disabled = false;

    // Appease Safari
    // without it Safari wants to reload the browser window
    // which nixes your already queued uploads
    return false;
    };

    // Set row value
    //new_row.innerHTML = element.value;
    new_col_filename.innerHTML = element.value;
    new_col_button.appendChild( new_row_button );

    // Add it to the list
    this.list_target.appendChild( new_row );

    };

    Hopeful that will help some one.

  116. Kelly on February 15, 2006

    Help!, Updated my mozilla and now this multifile uploader wont work!!!

  117. Steve Owen on February 15, 2006

    Ben’s table code is excellent, but doesn’t actually work in IE. Or rather, isn’t DOM-compliant. (And it’s ironical that IE is the browser that doesn’t like its lack of compliance.)

    Instead, you want to append the child to a element. It’s a simple change. Where you replaced <div id=”files_list”></div> with <table id=”files_list”></table>, you should actually replace <div id=”files_list”></div> with <table><tbody id=”files_list”></tbody></table>

    Cheers,
    Steve

    PS, That has got to be the most annoying “security code” I’ve ever seen. It always takes about four goes and several refreshes to actually work out what it says.

  118. Steve Owen on February 15, 2006

    Sorry, that last comment should have read:

    “Instead, you want to append the child to a <tbody> element.”

  119. Jesse H on February 17, 2006

    Here is vb.net back end implementation after the page is submitted. Someone was asking for it.

    ‘get the form file collection
    Dim myfiles As System.Web.HttpFileCollection = System.Web.HttpContext.Current.Request.Files
    Dim iFile As Integer

    For iFile = 0 To myfiles.Count – 1
    ‘ get the posted file
    Dim postedFile As System.Web.HttpPostedFile = myfiles(iFile)

    ‘make sure it is not blank
    If Not postedFile.FileName.Equals(“”) Then
    ‘Save File to the proper directory
    postedFile.SaveAs(Request.MapPath(“folder/”) + System.IO.Path.GetFileName(postedFile.FileName)
    End If

    Next iFile

  120. Jonny on February 20, 2006

    Perfect. Thank you very much for making the script available.

  121. Mark on February 21, 2006

    I want to load several hundred webpages to my typepad blog… can anyone recommend a good program for this? Please email me, thants

  122. Mark on February 21, 2006

    What’s the best telnet program and can they be used on blogs such as typepad?
    http://information.typepad.com

  123. Jorge on February 21, 2006

    Greatfull

  124. Cade on February 22, 2006

    what is the best php for upload with multiple-file???
    Can i use this file so i want or exist a coopyright(by the way i don’t said that it’s my code)?

  125. Stickman on February 22, 2006

    Rather than post my own code for handling the upload at the server end, I’ve left that up to you. There are plenty of good tutorials out there that deal with this — for example, look at this look at this comment or check Google.

    As for usage, you are free to make use of the code in any way you like, although I would appreciate it if you left the copyright information in the file.

  126. Rich on March 7, 2006

    This script is perfect for what I need. Thanks!

    One little problem – it works great the first time, but if I go back to the page, it’s almost like the script has disappeared. When I select a file via the browse button, it doesn’t update the file list, and doesn’t create a new and empty control. I can only upload one file from then on.

    I’ve tried it both Firefox 1.5 and IE 6 and they both act the same. It looks like the DOM is setup properly the second time around, so I’m a bit stymied.

    Any suggestions? I’m using java and struts.

  127. duh on March 7, 2006

  128. Rich on March 7, 2006

    regarding my “doesn’t work the second time post”:

    Turned out that I wasn’t resetting the form correctly.

  129. Bleeding Edge on March 9, 2006

    Looks like IE 7 beta 2 (7.0.5296.0) has a little trouble with this code. It doubles up the elements once a file has been selected. Has anyone else experienced this problem? Has anyone created a fix for this? I will try to look into it more and see if I can find a fix. I’ll keep you posted.

  130. Andy on March 10, 2006

    Nice script, Stickman. I was hoping you or somone else could help me fine tune it to my needs.

    What I’m trying to do is give the user another input box in which to enter a title for the file and then have that title display (instead of the filename) after the user has clicked an “Add to Queue” button (as opposed to displaying immediately after they’ve finished browsing, as the script does currently).

    This is what I’ve tried so far:

    function addFile(){
    var multi_selector = new MultiSelector( document.getElementById( ‘files_list’, 5 ) );
    multi_selector.addElement( document.getElementById( ‘my_file_element’ ) );
    }

    Title:

    File:

    Add

    Files:

    I tried to trigger the display of the filename by using an onclick call to a function containing the instantiation of the MultiSelector class. I can’t figure out why this won’t work. Any help would be greatly appreciated.

    Thanks a lot!

  131. Andy on March 10, 2006

    Crap. Your wysiwyg took that a little too literally. Here’s an attempt to re-post my code. I had to replace “” signs to get it to display, thus all the \’s. I hope it’s not too hard to read. Thanks again!

    function addFile(){
    var multi_selector = new MultiSelector( document.getElementById( ‘files_list’, 5 ) );
    multi_selector.addElement( document.getElementById( ‘my_file_element’ ) );
    }

    Title: \\input type=”text” name=”title_1″\\
    File: \\input id=”my_file_element” type=”file” name=”file_1″\\
    \\a href=”javascript: void(null);” onclick=”addFile();” class=”buttons add”\\Add\\/a\\

    Files:

    \\div id=”files_list”\\ \\/div\\

  132. Bleeding Edge on March 12, 2006

    IE7 beta 2 fires the onchange event twice when you select files using the browse button. Once when a files has been selected. And then once more when it looses focus.
    Blocking the onchange event once it gets executed fixes the problem.
    Changing the code as seen below puts a bandaid on it so it works in IE7 (it also still works in Firefox 1.5).

    // What to do when a file is selected
    element.onchange = function(){
    if (!element.block)
    {
    element.block = true;

    // New file input
    var new_element = document.createElement( ‘input’ );
    new_element.type = ‘file';

    // Add new element
    this.parentNode.insertBefore( new_element, this );

    // Apply ‘update’ to element
    this.multi_selector.addElement( new_element );

    // Update list
    this.multi_selector.addListRow( this );

    // Hide this: we can’t use display:none because Safari doesn’t like it
    this.style.position = ‘absolute';
    this.style.left = ‘-1000px';
    }
    };

  133. Rob Mitchell on March 16, 2006

    Hi – I’m using your script with IE 6.0.2900.2180.xpsp_sp2_rtm.040803-2158 on Windows XP Pro SP2 and results in a Javascript error when trying to submit the form with Access is denied. Any ideas?

    Thanks!

    Rob
    rob@baseclasstech.com

  134. vic on March 20, 2006

    Hi,

    I got a problem with uploading the files:
    I used Shawn Parkers upload script-> http://www.top-frog.com/files/scripts/upload_sample.phps

    But when I try to upload I get this error:

    Warning: move_uploaded_file(C:/Program Files/xampp/htdocshttp://localhost/restricted/upload/uploads/tyson_4.jpg) [function.move-uploaded-file]: failed to open stream: Invalid argument in C:\Program Files\xampp\htdocs\restricted\upload\upload.php on line 119

    Warning: move_uploaded_file() [function.move-uploaded-file]: Unable to move ‘C:\Program Files\xampp\tmp\php11.tmp’ to ‘C:/Program Files/xampp/htdocshttp://localhost/restricted/upload/uploads/tyson_4.jpg’ in C:\Program Files\xampp\htdocs\restricted\upload\upload.php on line 119

    Does anyone has an idea what’s wrong?
    regards,

    Vic

  135. Neil on March 29, 2006

    (tip for beginners)
    In PHP this is a good starting point for handling the files

    echo ‘<pre>';
    print_r ($_POST);
    print_r ($_FILES);
    echo ‘</pre>';

    Just shows you what you’ve got after the submit.

  136. Lito on April 6, 2006

    This is a added to check if the file all ready exists in the list:

    element.onchange = function () {
    var files = this.parentNode.getElementsByTagName(‘input’);
    var existe = new Array();

    for (var i=0; i 1) {
    return false;
    }
    }
    }

  137. Steven on April 7, 2006

    Great Script. Got some problem with it though. I use firefox, php to generate the javascript.

    page1: the multiselector, works fine, no errors, shows the fullpath of the file.

    -submit the form to page2-

    page2: php receive the variable file_”id” as a filename only, instead of the fullpath of the file.

    Anyone else got this kind of problem? Any help would be great.

    Cheers

  138. Anilal on April 7, 2006

    Wonderful file upload component.
    Could some one help me how we can get the files in the backend ASP so as to upload it.
    What will be the File name(s)? any idea or code ..appreciated

    Anilal

  139. Craig on April 8, 2006

    Would it be possible to add all of the file elements to a single array? My php upload class (Easy PHP Uploads) expects an array like…

    _FILES: Array
    (
    [upload] => Array
    (
    [name] => Array
    (
    [0] => FETall.jpg
    [1] => gan_multiplot.plt
    [2] => will-look-up_0_97.zip
    )

    [type] => Array
    (
    [0] => image/jpeg
    [1] => application/octet-stream
    [2] => application/octet-stream
    )

    [tmp_name] => Array
    (
    [0] => C:\WINNT\php59B.tmp
    [1] => C:\WINNT\php59C.tmp
    [2] => C:\WINNT\php59D.tmp
    )

    [error] => Array
    (
    [0] => 0
    [1] => 0
    [2] => 0
    )

    [size] => Array
    (
    [0] => 46676
    [1] => 6713
    [2] => 33271
    )

    )

    )

    Thanks for any advice. I’m no js expert, but with a drawing can probably figure it out. :)

    Cheers.

  140. Melissa on April 8, 2006

    This was quick and easy! You save my time without having to code and look elsewhere. Thanks.

  141. Craig on April 8, 2006

    My appologies this was answered in comment XXXII.

    hint: element.name=’upload[]'; // d’uh!

  142. thinsoldier on April 10, 2006

    in safari the limit of 3 files is not obeyed.

    And your security code is really hard.

  143. Andrew Bulmer on April 11, 2006

    Not sure if anyone checks this page, but I found a small bug in this. If you click browse twice to bring up 2 file selectors at once and then select a couple of files, one of them can’t be deleted. It throws an error on the following:

    this.parentNode.element.parentNode.removeChild( this.parentNode.element );

    This is because when you open the second selector it tried to remove it twice. I think you might want to do something like this inside the element.onchange function (in addElement):

    this.onchange = function ()
    {
    this.multi_selector.addElement (this) ;
    this.multi_selector.addListRow (this) ;
    } ;

    I’ll have to do some testing to see if that works on the submit side of things

  144. Andrew Bulmer on April 11, 2006

    Well it seems it wasn’t as simple as I first thought. But I do have a solution… I just made the onchange event update the row. To do this I had to make addListRow return the DOM node of the list and add a textnode instead ofusing innerHTML. I also had to make a refernce to the text node and the delete button in the DOM node. Here’s the code for addElement and addList node:

    /**
    * Add a new file input element
    */
    this.addElement = function( element ){

    // Make sure it's a file input element
    if( element.tagName == 'INPUT' && element.type == 'file' ){

    // Element name -- what number am I?
    element.name = 'file_' + this.id++;

    // Add reference to this object
    element.multi_selector = this;

    // What to do when a file is selected
    element.onchange = function(){

    // New file input
    var new_element = document.createElement( 'input' );
    new_element.type = 'file';

    // Add new element
    this.parentNode.insertBefore( new_element, this );

    // Apply 'update' to element
    this.multi_selector.addElement( new_element );

    // Update list
    var row = this.multi_selector.addListRow( this );

    // Hide this: we can't use display:none because Safari doesn't like it
    this.style.position = 'absolute';
    this.style.left = '-1000px';

    this.onchange = function () {

    // just in case the user opens two file selectors at once
    row.removeChild(row.text) ;
    row.text = document.createTextNode (this.value) ;
    row.insertBefore( row.text, row.button );
    }
    };
    // If we've reached maximum number, disable input element
    if( this.max != -1 && this.count >= this.max ){
    element.disabled = true;
    };

    // File element counter
    this.count++;
    // Most recent element
    this.current_element = element;

    } else {
    // This can only be applied to file input elements!
    alert( 'Error: not a file input element' );
    };

    };

    /**
    * Add a new row to the list of files
    */
    this.addListRow = function( element ){

    // Row div
    var new_row = document.createElement( 'div' );

    // Delete button
    new_row.button = document.createElement( 'input' );
    new_row.button.type = 'button';
    new_row.button.value = 'Delete';

    // References
    new_row.element = element;

    // Delete function
    new_row.button.onclick= function(){

    // Remove element from form
    this.parentNode.element.parentNode.removeChild( this.parentNode.element );

    // Remove this row from the list
    this.parentNode.parentNode.removeChild( this.parentNode );

    // Decrement counter
    this.parentNode.element.multi_selector.count--;

    // Re-enable input element (if it's disabled)
    this.parentNode.element.multi_selector.current_element.disabled = false;

    // Appease Safari
    // without it Safari wants to reload the browser window
    // which nixes your already queued uploads
    return false;
    };

    // Set row value
    new_row.text = document.createTextNode (element.value) ;
    new_row.appendChild(new_row.text) ;

    // Add button
    new_row.appendChild( new_row.button );

    // Add it to the list
    this.list_target.appendChild( new_row );

    return new_row ;
    };

    Hope this helps

  145. stephen on April 13, 2006

    great script. i have it working with classic asp. buzz me if you need src.

  146. Fitz on April 16, 2006

    I am using Coldfusion. Can someone give me an example of the backend for the multiupload. I have the front end with no problem but the back end I am not sure how to address after I submit to another page. All the examples are in php that I currently see. Any help is welcomed.

    Thank you in advance.

    Fitz

  147. Fitz on April 17, 2006

    I found the problem with my server end. It had nothing to do with the code it was actually firefox. The deal with having the form delcared within in a table was causing the problem Once I read the above post I found that the form had to be delcared above the table and all is well. For those few that are having to use coldfusion at their job and need this code here it is..

    Could not upload file [#file.serverfile#]

    “>

    “>

    Sorry for the crude formatting.

    Fitz

  148. Fitz on April 17, 2006

    Ooops forgot about the special characters: See if this works better.

    <cfloop from=”0″ to=”#lvMaxNumberFiles#” index=”iItem”>
    <cfset filename = “form.File_#iItem#”>
    <cfif isdefined(“#variables.filename#”)>
    <!— Handle the Pictures\All Folder first —>
    <cfif evaluate(variables.filename) neq “”>
    <cfset lvUploadOkay = “true”>
    <CFTRY>
    <cffile action=”upload” filefield=”#variables.filename#” destination=”#lvPicturesPath#” nameconflict=”unique”></cffile>
    <CFCATCH TYPE=”Any”><cfset lvUploadOkay = “false”><CFOUTPUT><b>Could not upload file [#file.serverfile#]</b><br></cfoutput></CFCATCH>
    </CFTRY>

    <cfif isdefined(“lvUploadOkay”) and lvUploadOkay is ‘true’>
    <cfset message = message & “#file.serverfile# was uploaded successfully<br>”>
    <cfelse>
    <cfset message = message & “#file.serverfile# was not uploaded<br>”>
    </cfif>
    </cfif>
    </cfif>
    </cfloop>

  149. Luca on April 19, 2006

    What do you think about adding this code to the UPLOAD SCRIPT with PROGRESS BAR in AJAX ?! at this site http://php5.bluga.net/progressDemo/demo.php

    thanks

    Luca.

  150. Jesus on April 21, 2006

    El código es genial, un excelente trabajo…
    Thank you.

  151. Tomaž on April 28, 2006

    Very coll code, thanks.

    Tomaž

  152. hudz on April 28, 2006

    Anyone know how to do it with Java-struts? …

    Just email me and I will appreciate it very much, i will put credit on you.

  153. hudz on May 2, 2006

    I have trouble with downlisting the files. I have tried it for several days using java-struts and mozilla FireFox 1.5.0.2. It doesn’t seem to work. I haven’t alter the code, it’s a standard from the downloaded file. Also, what is exactly the function between these two files, multifile.js and multifile_compressed.js, I have read the comments but does not help me. Please Help.

  154. hudz on May 3, 2006

    hi all,

    I have downloaded the files and implemented it at my code, but it seems doesn’t works. I used struts. and im totally new. This is my code

    Zhtml:file property=”attachment” size=”75″ /> Zbr>
    Zdiv id=”files_list”>Zstrong>Files :Z/strong>Z/div>
    Zscript>
    var multi_selector = new MultiSelector( document.getElementById( ‘files_list’ ), 4 );
    multi_selector.addElement( document.getElementById( ‘attachment’ ) );
    Z/script>

    Please tell me what is lack in my code because it does not list down the files..

    this is my email hudzna@gmail.com

    Thank you..very much

  155. derek on May 4, 2006

    hudz, The compressed file is the same code, just smaller in filesize. Just makes your site load faster since there is a smaller download.

  156. hudz on May 4, 2006

    Thank you Derek,

    I’ve noticed it..Sorry for posting a nonsense post. But, Currently I’ve tried to do it with struts but it seems to not working. I’ve posted my code above. Hope anyone can help me.

    Thank you again..

  157. mankind on May 5, 2006

    alert(“Nice Work …..”);

    [Stickman says: Hmm...embedding Javascript in a comment...testing for XSS vulnerabilities? I think maybe you need to read up a bit more on the topic first.]

  158. hudz on May 9, 2006

    in original :

    input id=”my_file_element” type=”file” name=”file_1″ >

    in my struts

    html:file property=”attachment” size=”75″ />

    where should I put name=”file_1″??

  159. Ron W. Waatsveen on May 14, 2006

    Is it possible to hide the tag?
    I have an application with a Java applet that download a file to a spesific catalog on my lokal disk.
    When im finished with my document I push a button that starts an applet who upload the file.
    I dont like this method because its little bit slow and maybe a overkill.
    I also want to say that the applet I use uploads several files at time. I can select a hole folder with files and upload them.

  160. Dave on May 15, 2006

    Hi,

    has anyone used this yet for creating a mail feedback form that in the back-end (php based) mails the attached files? I would be looking for this. Until now I got stuck with pre-defining the number of possible attachments so for the front end this script would be great. Now I’m not so sure how to process the files in the back-end and mail them. Any?

    Thx

    Dave

  161. David Scotti on May 18, 2006

    Does not work in Netscape – and in this world – if it doesn’t work in netscape, then it doesn’t work at all!

    :(

  162. david on May 21, 2006

    Is anone able to give me a piece of code to completly rest the multiuploader? (delete all rows and hidden file input fields). I tried to do this for several hours but it did not work :-(

    Thank you,
    david

  163. derick on May 24, 2006

    Great script. Doesn’t work in Konqueror, though. The file list doesn’t update.

  164. power cord on May 25, 2006

    :)

  165. Prasanna on May 30, 2006

    Hai,,

    Thank you for the Script it working fine .

    Any AJAX based FTP component For c#.NET Development and ASP.NET Development.

    Thank you..

    R.Prasanna Vignesh

  166. Sondre on June 2, 2006

    Hi!
    This looks like a great solution to me, but I’m simply not into coding… What am I to do with the files when I have downloaded them? Sorry if it’s a stupid question…

  167. Frank on June 3, 2006

    Was wondering if there has been any code fixes for the table code in one of the above posting. Primarily this one post :Comment by Ben | 02/09/06 at 3:38 pm . I cannot get it to see the tbody’s!! I have tried a bunch of things. Any help would be appreciated. Thank you.

  168. dave on June 22, 2006

    Very nice script.

    I have added the following javascript script to prevent the user from uploading the same file more than once.

    // Check to ensure same file is not uploaded more than once dhy
    var files = this.parentNode.getElementsByTagName(‘input’);
    var lastfilename = files[files.length-1].value
    for (var i=0; i

  169. dave on June 22, 2006

    Ok, the web page online messed up previous post. I will try again below.
    element.onchange = function(){

    // Check to ensure same file is not uploaded more than once dhy
    var files = this.parentNode.getElementsByTagName(‘input’);
    var lastfilename = files[files.length-1].value
    for (var i=0; i

  170. dave on June 22, 2006

    i

  171. dave on June 22, 2006

    element.onchange = function(){

    // Check to ensure same file is not uploaded more than once dhy
    var files = this.parentNode.getElementsByTagName(‘input’);
    var lastfilename = files[files.length-1].value
    for (var i=0; i

  172. Craig J. on June 24, 2006

    Has anyone written a Delete All function?

    I’d like to add a button to remove all of the files that the user has entered but I am not sure how to properly remove all of the file elements.

    Can someone help me with this?

    Thanks
    Craig J.

  173. Lee on June 27, 2006

    I was wondering if it would be possible to hide the ‘no file selected’ (in safari) message that the file input places on the form? I tried adding new_element.style.color = ‘#FFFFFF'; in the javascript, but the font colour didn’t change (the text colour in the file input box in firefox changed to white).

    Anyone else have any ideas?

  174. Jafo on June 27, 2006

    To add a space before the delete key:

    // Set row value
    new_row.innerHTML = element.value;

    Change to:

    // Set row value
    new_row.innerHTML = element.value + ‘ ‘;

  175. Hisham Al-Beik on July 7, 2006

    #1 – great code.. thanks for it..

    #2- How to DELETE ALL… :-) (Stickman, you can implement it in your code if you like, just credit me, thanks, and if you are able to clean it up.. then please shoot me an email with the clean (uncompressed) code.) thanks..

    Step #1 – I added two hidden fields.. to keep track of the ID of added rows and ‘hidden’ file inputs.

    Step #2 – I edited the multifile.js so that everytime it adds a field and a row, it appends the hidden fields with their IDs seperated by a comma. (which we will need later to break them down into an array)

    // Element name — what number am I?
    ada = ‘file_’ + this.id++;
    element.name = ada;
    element.id = ada;

    //Hide this: we can’t use display:none because Safari doesn’t like it
    this.style.position = ‘absolute';
    this.style.left = ‘-1000px';

    document.getElementById(‘hidden_field_2′).value += this.id + “,”; // Delete All

    Also, if you want you can put in the form tag within the onReset, so that when resetting the form it will also clear the file list..

    any question email me at halbeik AT DONOTSPAM vicr DOT com (just remove the donotspam part and replace the rest with the proper characters….

    ######## Stickman, I can email you a copy of my edited example zip i downloaded from here.. and you can clean it up and host it.. just email me if you like….. (i’ll also include this message as a txt file.. i’ll have to clean it up with the line breaks and such… #########################

  176. Hisham Al-Beik on July 7, 2006

    Ok… so part of it didnt show up.. here is a link to a text file on how you can implement a DELETE ALL..

    on a side note, one thing i added to this in my work, is a text input below each row of the file list, this is because the usage is to upload multiple images.. and i wanted to inclde a feature to add captions to each picture…. i think as long as you add anything within the div element.. it’ll get removed with the delete all… i havent tested yet, but will do tomorrow.. and put an update..

    http://djhash.dockex.com/how-to-delete-all.txt

  177. Hisham Al-Beik on July 7, 2006

    Ok.. so the test was successful.. anything u put in the div, will get removed with the delete all function..

    Have fun..

  178. Jose Rodriguez on July 8, 2006

    Hope this helps for the uploading part, the code only shows useful information…
    it only let you upload gif and jpeg files.

    <html>
    <head><title>Results</title></head>
    <body>
    <?php
    echo "Files sent<br>";
    reset ($_FILES);
    while (list ($clave, $val) = each ($_FILES)) {
    if($val['type'] == "image/gif" or $val['type'] == "image/pjpeg"){
    echo ‘<br>';
    echo "$clave => $val<br>";
    echo ‘Name: ‘ . $val['name'].'<br>';
    echo ‘TmpN: ‘ . $val['tmp_name'].'<br>';
    echo ‘Size: ‘ . $val['size'].'<br>';
    echo ‘Type: ‘ . $val['type'].'<br>';
    echo ‘Err_: ‘ . $val['error'].'<br>';
    }
    }
    ?>
    </body>
    </html>

  179. Damon on July 13, 2006

    Uhh, nice effort but.. don’t you think you’ve reinvented the wheel a bit with this? This has been done hundreds of times before.. the most popular probably being gmails method for attachments (which also uploads them as each gets attached so it feels lightning fast).

  180. Damon on July 13, 2006

    Also, forgot to mention that the spec allows more than one file per field (comma delimited IIRC). The vendors have just never implemented it. If they would you could Ctrl/Shift click to select multiple files in the file browser just like you can outside the browser.

  181. Stickman on July 13, 2006

    Damon: If you read the original post, you’ll see that the intention was specifically to avoid the ‘multiple file elements’ approach (as used by GMail, among others). Of course the end result is the same, but that’s not the point — it’s about presentation.

    As for uploading files on the fly: you could do the same with this technique but I didn’t because again, that wasn’t the point. This was never supposed to be ‘the ultimate AJAX upload widget’, just a nicer way to present multiple uploads.

    If I had more spare time, maybe I’d develop this to the nth degree — there certainly have been plenty of suggestions for improvements in the 180 or so comments so far. But for now I think of it as a nice little proof-of-concept — it’s up to the developer to decide what, if anything, to do with it.

  182. Wenqi Dwyer on July 16, 2006

    It appears the script doesn’t support maintaining the file list values upon refreshing of the page. Any work-around?

  183. Kabelo on July 19, 2006

    thanks for the code it seems to work,the proble i’m having is to insert those uploaded files to the database.can you help with the insert of those file.

  184. Patrick on July 25, 2006

    How would you handle this via php? The code works fine to upload my files as long as you don’t delete any files along the way. I give each upload box the name

    element.name = ‘uploadedfile’ + this.id++;

    Then in my php code I upload the file from the file box called uploadedfile1, uploadedfile2, etc. As you delete any files it still increments the element name and this causes me a problem.

    I have a maximum of 12 files to upload so if you delete two files the last two uploaded file box names are uploadedfile12 (since numbering starts at 0) and uploadedfile13.

    Anyone have any suggestions?

  185. Ashok on July 27, 2006

    Hi Plz send me code to attach multiple file in email using PHP..

  186. Pablo on August 1, 2006

    Hey! I’m a newbie! So please help me on this one!

    I simple do not know how to get the selected files uploaded to my server!?

    I’m using asp.net 2.0 and Visual Studio 2005…

    Below i my code:
    ——————–

    .ASPX
    ——-

    Files:

    var multi_selector = new MultiSelector( document.getElementById( ‘files_list’ ), 3 );
    multi_selector.addElement( document.getElementById( ‘my_file_element’ ) );

    .CS
    ——

    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;

    public partial class Default2 : System.Web.UI.Page
    {
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
    //‘get the form file collection
    HttpFileCollection myfiles = System.Web.HttpContext.Current.Request.Files;

    for(int iFile = 0; iFile

  187. Pablo on August 1, 2006

    Hmm…I do not know what happen before…my message got pretty f…..? why? posting too much…

    Hey! I’m a newbie! So please help me on this one!

    I simple do not know how to get the selected files uploaded to my server!?

    I’m using asp.net 2.0 and Visual Studio 2005…

    Below is my code:
    ——————–

    .ASPX
    ——-

    Files:

    var multi_selector = new MultiSelector( document.getElementById( ‘files_list’ ), 3 );
    multi_selector.addElement( document.getElementById( ‘my_file_element’ ) );

    and – see next message…

  188. Pablo on August 1, 2006

    .CS
    ——

    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;

    public partial class Default2 : System.Web.UI.Page
    {
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void Button1_Click(object sender, EventArgs e)
    {
    //‘get the form file collection
    HttpFileCollection myfiles = System.Web.HttpContext.Current.Request.Files;

    for(int iFile = 0; iFile

  189. Aalok on August 2, 2006

    Jesse H gave this code for vb.net .

    Here is vb.net back end implementation after the page is submitted. Someone was asking for it.

    ‘get the form file collection
    Dim myfiles As System.Web.HttpFileCollection = System.Web.HttpContext.Current.Request.Files
    Dim iFile As Integer

    For iFile = 0 To myfiles.Count – 1
    ‘ get the posted file
    Dim postedFile As System.Web.HttpPostedFile = myfiles(iFile)

    ‘make sure it is not blank
    If Not postedFile.FileName.Equals(””) Then
    ‘Save File to the proper directory
    postedFile.SaveAs(Request.MapPath(”folder/”) + System.IO.Path.GetFileName(postedFile.FileName)
    End If

    Next iFile

    Dear sir ,
    When i am using this code on button click for final submit . then it’s give nothing.
    When i am tracing
    Trace.Warn(“myfiles counter”, myfiles.Count)
    thein it gives count “0”. Means no file collection now what can i do please reply as soon as possible .
    one thing —

    in form collection it show’s all files which i am uploading .
    now boll in ur hand .
    With regards
    Aalok Kumar Yadav

  190. Aalok on August 2, 2006

    isolve out my problem

  191. raduen on August 3, 2006

    I wonder if it;s possible to put a sort of grid lines in de file list div with file size en mod date. those last two are not that important.
    ps: i have the file list div in a tbale

  192. upload file on August 3, 2006

    Very nice post.

    About file hosting, i usually use yoUpload.com to upload all my files. I believe that is the best, but it’s my opinion, ehehe…

    http://www.youpload.com

    Thanks,
    Robert

  193. John D on August 4, 2006

    Hi,

    I was wondering if it was possible to have a check box or a text box associated with each file upload. I mean this script is great in that it allows you to upload multiple files through a single element, but how can i upload multiple files AND information associated with them (as entered via a checkbox or text box next to the file input)????

    Any ideas? I was able to get your code to work beautifully as is, but how can i add this functionality? Please keep in mind that i am a newbie and am very unfamiliar with coding in javascript (i work mainly with PERL)

    THANK YOU!!!!!

  194. teo on August 9, 2006

    I’m able to implement this inside my jsp here. But the only problem is how do I pass all the attach files to a single property in sturts? And how do I get all the attach files inside the action class? Hope someone would help on this. Thanks.

  195. Chris Coleman on August 9, 2006

    For everyone having issues actually uploading more than one file, here is the solution! The error is due to the face that “createElement” objects are attached to the “document” but are not attached to the form you are submitting. So, only the original element transfers. To correct this:

    1. Assign an ID tag to your form, e.g.
        <FORM ID=\”YOUR_FORM_ID\”>

    2. Add the bold line of code to your .js file (just before the lines to change this.style.position and this.style.left:
        document.getElementById( ‘YOUR_FORM_ID’ ).appendChild( this );

    Well, I hope that helps everyone. Good luck and email me if you have any further questions!

  196. jimy on August 17, 2006

    Perfect script, Stickman. Thank you very much for making the script available.

  197. Jonhoo on August 18, 2006

    WoW, great script!

    Just one thing I’ve noticed:
    I think you can use visibility:hidden to hide the input fields instead of using

    this.style.position = ‘absolute';
    this.style.left = ‘-1000px';

    Not sure yet though…

  198. Stickman on August 18, 2006

    Jon: The positioning hack is to fix a a problem with Safari, which ignores form elements that are hidden.

  199. Jonhoo on August 18, 2006

    Are you sure that applies to visibility:hidden as well?

    visibility:hidden has always worked for me, even though display:none haven’t..

  200. Stickman on August 18, 2006

    The ‘display’ and ‘visibility’ properties aren’t the same: if you set ‘display:none’ then the element is completely removed from the page flow, whereas ‘visibility:hidden’ just hides the element — ie. you get a gap where the element was. So it isn’t really suitable.

  201. Jonhoo on August 18, 2006

    Ah, rigth :)

    Learn something new every day ^^

    GREAT script by the way.

  202. Jonhoo on August 21, 2006

    There is a problem with the script regarding getting the files after you’ve pressed submit, it is the following:

    Usually, if the user does not press the delete button at any time, we can use a for loop to get the information as such:

    for ($file = 0; $file

  203. Jonhoo on August 21, 2006

    for ($file = 0; $file

  204. Jonhoo on August 21, 2006

    Hmm, code doesn’t seem to work…

    I’ll try to explain with an image:

    Usual file array with max 3 files:
    file_0 = First file
    file_1 = Second file
    file_2 = Third file

    If the user presses delete on the second file, however, and then adds another one, the array will be as such:

    file_0 = First file
    file_1 = Empty
    file_2 = Third file
    file_3 = New Second file

    Is there a way to get around this so we won’t have to resort to the much slower foreach loop, and check if each file has in fact been downloaded?

  205. don don on August 25, 2006

    I have avoided the foreach loop with

    for ($x=0;$x7) {

    // for example you can attach the file to a mail — don´t do this without security checks before

    $mail->AddAttachment(${file_.$x},$_FILES['file_'.$x]['name']);
    }
    }

    do not really know if this is faster as a foreachloop but it works for me

  206. don don on August 25, 2006

    sorry for the double post – but there was missing a line

    I have avoided the foreach loop with

    for ($x=0;$x7) {

    // for example you can attach the file to a mail — don´t do this without security checks before
    $mail->AddAttachment(${file_.$x},$_FILES['file_'.$x]['name']);
    }
    }

    do not really know if this is faster as a foreachloop but it works for me

  207. Jonhoo on August 25, 2006

    But how about if the user presses the delete button 8 times.. Then your loop won’t catch all the files…

    I’ve found a workaround using a while loop, but I really would prefer a for loop..

    $found = 0;
    $file = 0;
    $max = setmaxlimithere;

    while ($found lessthan $max)
    {
    if (!empty($_FILES['file_'.$file]['tmp_name']))
    {
    //Do your thing here… :) $_FILES['file_'.$file] will always be one of the files the user uploaded
    $found++;
    }
    $file++;
    }

  208. tommygeorge.com on August 26, 2006

    Thanks to: Jose Rodriguez, above.
    If you’re like me and still having trouble sorting through the files in PHP, here’s an example of doing so…
    In this example I’m using htmlMimeMail, and adding attachments to an email.
    You should be able to pick out the important parts, especially with all of the other information available here.

    First, just use the script as-is. It will upload the files to the server just fine.
    Then, in PHP…

    reset ($_FILES); // Be sure that the Array Pointer starts at the beginning.
    while ( list($key, $value) = each($_FILES) )
    {
    $tmp_name = $value["tmp_name"];
    $name = $value["name"];
    // As of now, the file is in the ‘/tmp’ directory.
    // To place it on the server you would use something like
    // move_uploaded_file($tmp_name, “folder/” . $name);
    // But here I’m attaching it via a variable. (I know it seems wasteful, I just like it that way).
    $attachment_file = addslashes(fread(fopen($tmp_name, “rb”), filesize($tmp_name)));
    // Add the file to the attachment list (htmlMimeMail class)…
    $mimemail->addAttachment($attachment_file, $name);
    }//end while

    I know this probably came out looking terrible here in the comment (no formatting), but I promise it works. =)

    TommyGeorge.com

  209. fara on August 31, 2006

    Hello, nice code you have here =)
    (and wow..look at those numerous comments! ^_^)

    I tried to modified your code a bit,
    I wanted to show preview of the images being uploaded,

    I tried to create the image element in multifile_compressed.js…well, something like this:

    var new_row_image = document.createElement( ‘img’ );

    now I need to assign the img src…

    new_row_image.src =

    umm, the problem is… element.value is object, isn’t it?
    document.write( element.value); will write the file path on the screen, but how could I assign that path to the img src?

    Sorry if I rambled too much ^^
    I hope someone out there will kindly lend me a hand?
    Thanks =)

    P.S.: Once again, thank you so much, Stickman!!

  210. Malte on September 1, 2006

    First off, thanks for your scripts, Stickman and Shawn!

    Shawn, I think there may be a little bug in your php code. I should say that I am very new to PHP. Actually I programmed my first script two days ago. However, I have a pretty clear clue why it did not work.

    What I noticed was that I was not getting any error message when the file upload was too large. Actually, count($GLOBALS['error']) was still 0 after I tried to upload a file that was too large, although it should have been 1; because of this code portion:

    case (1|2):
    // upload too large
    $error[] = ‘file upload is too large for ‘.$file['name'];
    break;

    …and yes, $file['error'] (the switched variable). WAS 1, I checked that too.

    I narrowed down the problem; I think it lies in the “case (1|2):” statement, more specifically the “(1|2)” part, which simply does not work for me. I programmed the following simple script:

    The output is “D’oh!” on my server. So as you can see, my PHP does not seem to interpret it correctly.

    When I changed the script like this:

    The output was indeed “Looks like it’s working”.

    As I said, I’m very new to PHP (but I do know C++). I never saw a statement like “case (1|2):” and it does not work for me. Maybe it’s only supported in some special versions of PHP or something like that… anyway, if anyone else is seeing this, the fix is obvious; replace “case (1|2):” by “case 1: case 2:” and “case (6|7):” by “case 6: case 7:”.

    I’m running a Debian 3.1 “Sarge” server with Apache 1.3.33 and php4 module version 4.3.10-16.

    Any comments?

    Cheers,

    Malte

  211. Malte on September 1, 2006

    Um, sorry, it seems that my PHP code was filtered out by the comments script, because of the <?php and ?> parts at the beginning and the end, I guess. So I’m trying again, this time without those tags ;-)

    This is the script that outputs “D’oh!”:

    $var = 1;

    switch( $var) {

    case (1|2):
    echo “Looks like it’s working”;
    break;
    default:
    echo “D’oh!”;
    break;
    }

    And this is the script that outputs “Looks like it’s working”:

    $var = 1;

    switch( $var) {

    case 1:
    case 2:
    echo “Looks like it’s working”;
    break;
    default:
    echo “D’oh!”;
    break;
    }

    Cheers,

    Malte

  212. Gregory on September 5, 2006

    Hi, everyone!
    Take a look at nice free Flash multiple files upload software tool http://www.element-it.com/MultiPowUpload.aspx

    It also includes a lot of working examples of server-side upload scripts like PHP, ASP, PERL, ASP.NET.

  213. spijky on September 13, 2006

    check the smallville site on http://www.freewebs.com/smallville_benelux

  214. priya on September 13, 2006

    how to open multi file in open dialog box?
    how to show all the selected file in control tool?
    how to save it in database?

  215. sibsoft on September 14, 2006

    Hello,
    thanks for great idea. We’ve used it in our upload progress bar. We also have 2nd method of adding files using “Add upload slot” button. Simpler than this method, but works well.

    Thanks, anyway.

    p.s. Great captcha. Entered 6 times :)

  216. alex on September 14, 2006

    10x for a great script :D

  217. Tincho Liguori on September 20, 2006

    Thanks for the Code. Is very usefull.
    I have a concern that this code is not working into Internet Explorer 7.0 (i think that almost all the code (not only yours) does not work with Internet Explorer 7.0:) )

    The problem that i have is that the button of the browse file is displaying as much times as the files that were added.

    Also the linked files are displaying twice above instead of only one time.

  218. Kabelo on September 22, 2006

    How can somebody use this multiple file upload ,to upload files to the database,i have tried uploading to the database but in insert only one file .can you help.

  219. russ on September 23, 2006

    hi

  220. James F. on September 26, 2006

    Quick note – in IE7 and in Opera9, when I click “Choose..”/”Browse…”, it lets me pick the file, then it creates a second upload field and set of buttons, as well as displaying TWO of the selected uploads with their respective buttons once I click anywhere on the page again.

    Then it continues to allow me unlimited uploads, creating a second field every time – so if I select five files, I have ten upload fields, all active, and ten displayed files with their buttons.

    Any ideas? This is using


    var multi_selector = new MultiSelector( document.getElementById( ‘files_list’ ), 3 );

    multi_selector.addElement( document.getElementById( ‘fileBox’ ) );

  221. James F. on September 26, 2006

    Well it cut out my code, but it’s ASP FileUpload and Button – ideas?

  222. Michele on September 26, 2006

    What a brilliant idea!
    but i need a control for upload only image file with max size 50 Kb

    HELP ME!!!!!!

  223. James F. on September 26, 2006

    Quick update – using Bleeding Edge’s script, it no longer causes any problems in Opera9, but in IE 7, it still has multiple ASP:FileUploads appearing, though once an item is selected, it appears only once. Because it allows me to have an unlimited amount of uploads, I think it’s letting me create the new multi-selector many times.

    Ideas?

  224. Jim on September 30, 2006

    Thank you very much for script! Was looking for something like this for a long time! THANKS!

  225. volcan on September 30, 2006

    it is a good thing

  226. Walter on October 1, 2006

    Nice piece of code, well done guy!.
    Thanks.
    Walter – Buenos Aires – Argentina

  227. James on October 3, 2006

    Quick question, how could I post a seperate field for text boxes? Say I want to do something like this:

    /**
    * Add a new row to the list of files
    */
    this.addListRow = function( element ){

    // Row div
    var new_row = document.createElement( ‘div’ );

    // Delete button
    var new_row_button = document.createElement( ‘input’ );
    new_row_button.type = ‘button';
    new_row_button.value = ‘ X ‘;
    var new_row_comment = document.createElement( ‘input’ );
    new_row_comment.type = ‘text';

    // References
    new_row.element = element;

    // Set row value
    new_row.innerHTML = ‘‘ + element.value + ‘ ‘;

    // Add button
    new_row.appendChild( new_row_button );

    // Add it to the list
    this.list_target.appendChild( new_row );
    // Set row value

    new_row_text.innerHTML = ‘ ‘ + html;
    new_row.appendChild(new_row_comment);

    Is that right? Now how do I access that on the back end?

  228. Andreas on October 5, 2006

    It’s the “onchange” that wont work with konqueror. Easy fix is a button with the same action. ;)

  229. kiran on October 10, 2006

    How do I get the list of files in the posted page. Using ASP.

  230. Rajarshi on October 16, 2006

    I need a way where the user will provide (type in) the path to a local folder, and submit the form, and all the files in that client machine’s folder has to be uploaded.

    Any ideas?

  231. Roger on October 27, 2006

    The javascript works, but when I attempt to submit, how do I access the input elements server side, or is it all client side?

  232. AJ on October 30, 2006

    OMG you are a life saver man. Great Work!

    I’m a newbie at this kind of stuff.
    I need to know how the heck I can keep my server from timing out on the uplaod when the upload gets bigger because of it being multiple files.

    Anybody got a suggestion?

  233. Benny on November 10, 2006

    hey Stickman, great bit of code!!!!

    can i get your (or any one else’s) advice on how to get it working correctly? just using your code i set the Forms action to a php page. on this page i just want to go through the names of all the files and throw them onscreen.

    but when i do an echo $_FILES[0]['name'] nothing is printed? your script says to leave out the name of the file input tag whcih i did and it still doesnt work?!!

    can anyone please advise me as to what am i doing wrong?

    many thanks in advance for any help

  234. dave on November 14, 2006

    hi!
    i have the same problem as “Frank” “06/03/06 at 12:08 am.”
    I cant get a handle to the tbody. I use:

    If I check: document.getElementById(“files_list”), I get null. Anyone know why???

  235. muthu on November 14, 2006

    hi
    i have a problem in uploading a file
    i.e, whenever i entered some unknown characters like //,\\,oewioregreik……..
    i have alerted the user about the unknown characters.
    but after removing the unknown character, i uploaded a valid file with correct path
    i am getting an error.
    like this page cannot be displayed i.e, after i tampered the file in the browse button textbox i am getting the error. if i didnt tampered the file i am able to upload

    can u please give sugession .

    thank u

  236. muthu on November 14, 2006

    hi
    can u please tell about how to remove the uploaded file dynamically in the browse button textbox if the user enters invalid characters. i am using asp.

  237. Kevinin on November 15, 2006

    This is the cooles thing!

  238. syri on November 15, 2006

    how ca i save the files after submit the form??!!

  239. SF on November 17, 2006

    In IE7 I can browse and select my images as expected. But when I submit the form only the first file is uploaded, regardless of how many images I actually selected. It works like a charm in Firefox. Has anyone seen or resolved this bug for IE7? Seems like a problem assigning array elements.

    TIA!

  240. Al on November 17, 2006

    I am SSSOOOooooo new to this it isn’t even funny. But can you tell me where to put in the path that the files will upload to? thanks

  241. Chris R. on November 24, 2006

    I added a text input for file descriptions because I save my files in a SQl database, and also used those file descriptions to display in the div tags, instead of the file name.

  242. Azhar on December 4, 2006

    Hi

    Sir, I cannot find the code to submit the query. Plz tell me where it is. How to submit the query and how it works to upload the file.

    Waiting for ur reply.
    Bye

  243. pbd22 on December 7, 2006

    hi.

    is there anyway to grab the content length of the file being uploaded before the submit query
    button is hit? i am trying to go post the bytes of the file along with the delete button and the
    file name in the innerHTML.

    i am guessing this wont be possible until the file reaches the server but i thought i would ask.

    thanks.

  244. zjyunhuan on December 8, 2006

    :)

  245. pbd22 on December 9, 2006

    hi.

    how do you handle the hidden input fileds? my application requires that i dont limit the amout of uploads,
    but allow the user to upload each file one-by-one in consecutive order. i am considering that a user may spend a good deal of time adding and deleting files. as a result, the below is likely to happen:

    while this may be “hidden” it also creates a very large space above the first file path. the more add/deletes, the more space is created.

    how do i gracefully handle the hidden input fields?

    thanks again for a great script!

  246. Simon Goellner on December 10, 2006

    Man, this is awesome, you are amazing :P

  247. Jason David on December 11, 2006

    Thanks for the script man!!

  248. midi on December 12, 2006

    plzz …somebady help me…. how can i get size from that upload file

  249. pbd22 on December 13, 2006

    midi –

    although i am myself having problems accessing the httpfilecollection on the server
    (i am always getting a length of zero), i am pretty sure you cant get the size of the
    file from the client. you have to do it on the server. try the ContentLength attribute
    of HTTPPostedFile and send that information back via an xmlhttprequest object.

  250. JFB on December 14, 2006

    Hi All,
    Someone made it work for coldfusion?
    My front end it’s working, but not the back end. How can I pass the multiple file names on the submit?
    Tks
    JFB

  251. hoshang on December 14, 2006

    it this possible with file comments?

  252. pbd22 on December 15, 2006

    i am still having problems accessing my httpfilecollection on the back-end using vb.net.
    i always get a length=0 for the collection. why is this happening? i would really apprecaite
    it if somebody could help me with this here – or email me. i am using the below code:

    Dim myfiles As System.Web.HttpFileCollection = System.Web.HttpContext.Current.Request.Files

    Dim iFile As Integer

    For iFile = 0 To myfiles.Count – 1
    ‘ get the posted file
    Dim postedFile As System.Web.HttpPostedFile = myfiles(iFile)
    Dim fileSize As Integer = postedFile.ContentLength

    ‘make sure it is not blank
    If Not postedFile.FileName.Equals(“”) Then

    ‘Save File to the proper directory
    ‘postedFile.SaveAs(Request.MapPath(“folder/”) + System.IO.Path.GetFileName(postedFile.FileName))

    End If

    Next iFile

  253. Scarface on December 15, 2006

    Hi. I have a script that sends an email to a certain address. I would like to add the option of attaching multiple files. Is this script what I am looking for? If so, could someone help me incorporate it into the page I have?
    Thanks

  254. Vlad on December 15, 2006

    Asp.net programmers! Plz, help.
    How can I get files to upload in server side? If I use Request.Files collection – it’s always has 0 elements. What’s problem ?

  255. Vlad on December 15, 2006

    response to my previous question:
    Form must has attribute enctype=”multipart/form-data”.

  256. pbd22 on December 15, 2006

    that doesnt seem to work for me tho. i am going through a hidden iframe and i am wondering if that is causing problems with reading the file colleciton on the server… would really apprecaite advice here… tnks.

  257. Oscar Cala on December 16, 2006

    hey, good code, very proffessional, it is true javascript, congratulations…

  258. hoshang on December 17, 2006

    Suddenly it doesn’t work anymore :S

  259. Venakata Sarma on December 18, 2006

    Hi
    how to get this from server side. ok I am uploading some files..then how do I get them in the action class.I am using struts frame work.I want to upload any number of files.plz help me yar.. Its really urgent.

  260. ashishnaik1 on December 23, 2006

    Cool! Thankyou

  261. Jcart on December 27, 2006

    Just to let you know I’ve decided to implement this on one of my sites, although I did notice after some debugging considering the actual element used to input the files is left blank this creates an extra file element. For those of us that actually validate our content, this creates a small problem because we must take extra precaution to avoid this empty field or delete it. You should consider removing this input upon submission.

    Thanks for the useful snipplet.

  262. Greg K on December 27, 2006

    Hi! Thanks for taking the time to provide this sweet and fast script. I am wondering if it is possible to have a check box or other form element load up beside the delete button in the list of chosen files and pass this info onto the upload script…

    Having trouble wrapping my head around it… admittedly I’m a newbie!

    Cheers,

    Greg.

  263. Òðåáóåòñÿ ïðîâåñòè êàíàëèçàöèþ â êîòåäæíîì ïîñåëêå.
    Èùåì ÷òî-òî âðîäå [url=http://arsi.com.ru]âîò òàêèõ[/url] òîëüêî â Ìîñêâå.

  264. EDH on December 31, 2006

    Hi,

    Is there another approach than the input type=file approach that forces users to browse to/through directories to select the file(s) they want to upload ?

    I would like to do the following. Present a user with a list of files that are located in a particular directory on his pc. Then offer that user the ability to select one or more files from this list for upload.

    Is this possible using plain javascript and html, or do I need (Java world) an applet ?

    Any help would be appreciated.

    Thanks,
    EDH

  265. Chris on January 1, 2007

    Hmm! Where did my comment go I don’t see it anymore

  266. Chris Mc on January 1, 2007

    I shall try to re-iterate what I said. This is an awesome script by the way!! I have an image gallery program that I have created and have implemented this script into it. The problem that I am having is when a user uploads an image who’s file name has a single quote in it. when using the form POST method, and PHP I call this print $_FILES['file_0']['name'] to recall the name of the uploaded file; If I have a file named chris’s_pic.jpg when file gets uploaded it’s name gets truncated to s_pic.jpg. So my question is, is there any way to escape or use some sort of wrapper to protect file name integrity?

    Thanks again for this wonderful script.

  267. pbd22 on January 3, 2007

    would really apprecaite an explaination of .NET server processing. tons of questions about this. I have tried Jesse H’s response above but i keep getting a httpfilecollection count of “0”. I am trying to pass the URL string through an IFrame. The below tag always fails:

    if i remove the callToServer method, the server-side file count is correct once i post the form but i want the “fake ajax” feel of the hidden iframe.

    please help. why can’t i get this to work with a hidden iframe?

  268. John on January 5, 2007

    Yeah, an example of asp server side file that handles the files to upload would be really great. I also get a Request.Files count of 0. Looks like some people have already figured out the solution. Can you please share?

    Thanks

  269. pbd22 on January 8, 2007

    john –

    i have been able to execute this code successfully without passing it via hidden iframe.
    if you are getting a server-side count of zero, make sure that your form tag is correct.
    are you using the enctype=multipart/form-data and submit=(your server file) attributes
    in your form tag? also, if you are using asp.net with master pages, make sure that you
    are not enlosing your form tags inside of master page form tags. that could (will) muck
    things up.

    my problem has to do with the processing of the iframe code. i would REALLY APPRECIATE
    IT if somebody could show me SUCCESSFUL iframe javascript code for file upload. I have
    been using the code provided on the Apple Computer site, and it keeps failing but i havent
    been able to figure out the problem (i am losing hair here). here is the link:

    http://developer.apple.com/internet/webcontent/iframe.html

    if somebody out there has been able to use stickman’s file upload code with iframes, would
    you mind sharing? please?

    thanks.
    peter (pbd22)

  270. Ivik on January 9, 2007

    Nice program, but I had a really hard time to make it work correctly, it always just sent the first file I added and not the other files. Then I found out that the problem was that I had inserted a text field in the same form as the file input was located.

    How can this be fixed, how can I be able to have more fields in the same form and still use this nice script?

  271. riko on January 12, 2007

    how can i combine it with php, i never working with js before.

  272. Rajesh on January 23, 2007

    Multiple file upload using struts

    I have tried this ,and I got result.

    ****************In jsp*********************

    Photo 1

    Photo 2

    *************** in struts-config.xml*************

    ***************in FileUploadForm.java***************

    public class FileUploadForm extends ActionForm {

    private List formFiles = new ArrayList();

    public List getUploads() { return this.formFiles; }

    public void setUploads(int iIndex, FormFile formFile){
    this.formFiles.add(formFile);
    }

    }

    ***************In execute method of FileUploadAction.java***************

    FileUploadForm uploadForm=(FileUploadForm)form;
    List myFiles =(List) uploadForm.getUploads();
    for(int i=0;i

  273. wekkaw on January 26, 2007

    Hi there thanks so much for a this great script.

    I’ve modified it a bit to restrict the type of files selected. Just in case anyone wants to do the same thing, here is the change:

    if( element.tagName == ‘INPUT’ && element.type == ‘file’ ){

    // Element name — what number am I?
    element.name = ‘file_’ + this.id++;

    // Add reference to this object
    element.multi_selector = this;

    // What to do when a file is selected
    element.onchange = function(){

    var validFileType = checkFileType(element);

    if(validFileType){

    // New file input
    var new_element = document.createElement( ‘input’ );
    new_element.type = ‘file';

    // Add new element
    this.parentNode.insertBefore( new_element, this );

    // Apply ‘update’ to element
    this.multi_selector.addElement( new_element );

    // Update list
    this.multi_selector.addListRow( this );

    // Hide this: we can’t use display:none because Safari doesn’t like it
    this.style.position = ‘absolute';
    this.style.left = ‘-1000px';
    }
    };

    Here is the Function

    function checkFileType(inputField)
    {
    var allowd = /\.png|\.jpg|\.gif/i;
    var filename = inputField.value;

    if (filename.search(allowed) == -1)
    {
    alert(“The type of file you selected is not supported.”);
    inputField.form.reset();
    return false;
    }
    return true;
    }

  274. Simple use of this script (works on Firefox) on January 29, 2007

    Change in the first line of form:

    action=”post.php” method = “post”

    then create post.php code:

    “;
    }
    else
    {
    echo “Possible file upload attack!”;
    }
    echo ‘Here is some more debugging info: ‘;
    print_r($file);
    }
    ?>

  275. pbd22 on January 29, 2007

    hi,

    have been working on fixing some errors in my upload code using this script.
    i am noticing that, when i use this script *and* send the files via a hidden
    iframe the httpfilecollection count is zero. after further inspection, i am finding
    that the server page isn’t recognizing the multipart/form-data enctype on page_load.
    but, i have that attribute clearly defined in my form tag on the client page. so,
    i am wondering if anybody has had a similar problem? i would really apprecaite
    suggestions. thanks.

  276. Nil on February 2, 2007

    can any body tell me how can i implement this code with struts .and how i will get i mean differentiate three different files.because they are coming with same id.

  277. Nate on February 6, 2007

    Can you display only the filename and not the path? If so, please show me what line to edit in the code to do that.

  278. Nate on February 6, 2007

    I’d love to see the code to add captions next to each image.

  279. Nate on February 6, 2007

    The following was posted above, but this does not work when tested it in Firefox 2

    I have made a little mod in order to display only the filename i/o full path+filename :
    element_work = element.value;
    element_tab = element_work.split(”\\”);
    nbr_elements = element_tab.length;
    new_row.innerHTML = element_tab[nbr_elements-1];

    instead of :
    new_row.innerHTML = element.value;

    cheers ;)

    Again, I’d love to see some code to only show the filename and not the full path.

  280. Nate on February 8, 2007

    I’d really love to see the code to add a caption / description next to the filename of each uploaded file. Can someone please post some code to do that?

  281. Corey on February 11, 2007

    This multiple file uploader is awesome!

    I’m using Shawn Parkers script to upload the files
    http://www.top-frog.com/files/scripts/upload_sample.phps

    The thing that confuses me is that I am trying to make it image only not movies pdf’s etc… I commented out the part with all of the other extensions but it is still allowing the file to upload. I’m pretty much a noob at more advanced programing so any suggestions will be welcome!

  282. phreaki on February 12, 2007

    great script, took care of what I needed, works great.

  283. RamaKrishna on February 12, 2007

    Dear sir,
    I’ve a small doubt regarding the script file. Is it possible to add a text box with each file at choosing the file and can process those text boxes like as file in the normal scenario.

    waiting for your reply,

    thanks & regards,
    RamaKrishna.P

  284. Nibinaear on February 12, 2007

    Great tutorial. I am now going to use this on our awards website to let users upload multiple files as supporting evidence in their submissions. Cheers.

  285. Ramakrishna on February 13, 2007

    sir,
    thanks for developing such a wonderful script file and is very useful for many needs in multiple file uploads, but i’ve a small problem regarding the text file apart from the files i.e i need to attach a note to every file i choose and that note should be inserted into database but i;m unable to locate the text type along with files while uploading. Please help me in this area as is very important for me.

    Ramakrishna.P
    Software Engineer,
    Karishma Software Ltd,
    Secunderabad.
    India.

  286. JarsofClay on February 13, 2007

    Hi people,
    i wanted to add move up and move down functionalities to the list. I should be able to select the files and sort them. Can anyone please help me on this…

    Thanks in advance :)

  287. TC on February 19, 2007

    There are 300 some comments saying what a great script this is. Here’s one more. Thanks!

  288. Nibinaear on February 19, 2007

    This code tends to add an extra empty file element for every file you upload. For example, if I try and upload one file I will get back file_0 and file_1, file_1 being empty. I have to use the unset function WHEN using PHP to destroy these empty array positions. Adding 3 files where the maximum is 3 produces 3 files as expected.

    Also, using Opera means that uploading multiple files means you only get the first one back in some instances. I tried the example and it worked with Opera (9.10) but when placed in quite a large template it didn’t work and I only got 1 file back.

    Thirdly, it might be a good idea to tell everyone to add a MAX_FILE_SIZE HTML attribute to all forms when files are uploaded. If you don’t you can get back partially uploaded files back when checking using $_FILES['file_0']['error'] in PHP.

  289. fanfan on February 25, 2007

    Very very useful!
    Many thx!!


    F

  290. handyflatrates on February 25, 2007

    This is a really useful script and i searched for such a long time. But i would really appreciate, if you would show how to go on with the data. I tried to use the PHP-File from the comment you posted but it’s generatin gerrors.

    Thanks for your JS!

  291. lifeguru on February 27, 2007

    Thank you. This script made my life soo much easier :)

  292. Rene on February 28, 2007

    Nate: The code posted earlier DOES work in FireFox when you change the quotes to normal quotes
    so ” to “.

    The following code only shows the filename:

    element_work = element.value;
    element_tab = element_work.split(“\\”);
    nbr_elements = element_tab.length;
    new_row.innerHTML = element_tab[nbr_elements-1];

    instead of :
    new_row.innerHTML = element.value;

    I do also have a question, asked many times before above but unanswered:
    Why does it only send the first selected file in FireFox (2.0)?

    print_r($_POST); alwyas shows only 1 file!

    I.E works fine, but i can’t use it if it does not work in Firefox. Anyone same problem / solutions?

  293. Winnie on February 28, 2007

    I’d like to upload multiple files as a Zip like ZipDeploy does. Is it possible?

  294. Arawee on March 3, 2007

    WaaaaW!
    thanx a lot (Stickman and also Luis Torrefranca) and all,
    :”)

  295. Nayana on March 5, 2007

    hi,
    this helps a lot…. nice code..

  296. Bonn Party on March 6, 2007

    Thanks a lot, i searched for it a long time, since i saw it on http://www.sevenload.com . We’ll propably use it, too in the next weeks. Really useful, thx!

  297. Pomp on March 7, 2007

    We are trying the above code.
    Once the files are added we could find the added files using Request.Files at the server.
    Can any one help with this.

  298. Rob Daniel on March 13, 2007

    Your code has greatly advanced the file uploader that I had on my site. I credited StickBlog for making the code and I put a link back to this very page. Thanks again and I will look to yall for any future coding help I need.

    Rob

  299. Mark on March 14, 2007

    Hi, nice site!

  300. Suresh on March 30, 2007

    i want to know how to nicer the tag without using tag

  301. Sureshkumar N on March 30, 2007

    Thanks for the scirpt it worth a lot!!!!. please notify me if any thing interesting is going on

  302. yan on April 3, 2007

    how i can do for multi list in one form ?

  303. Diego on April 12, 2007

    I released a similar plugin for jQuery a few days ago and it may be of interest to people reading this page.
    http://www.fyneworks.com/jquery/multiple-file-upload/

  304. Johan Schmidt on April 16, 2007

    I was hoping to find some info about ZipDeploy

  305. Matt on April 18, 2007

    Wow. This is great but i suppose you don’t need me to tell you that. I am working on a project that needs to use photosharing and this is perfect! Saved me a lot of work ;) Thanks.

  306. Nick Kilian on April 19, 2007

    This script worked fine ‘as is’ in IE7, but would only upload 1 file in FF1.5 and OP9.2.

    Chris Coleman at CXCV posted the fix, but there was a slight mistake. This is the correct code to get the input appended correctly to the form.

    Change :

    // Hide this: we can’t use display:none because Safari doesn’t like it
    this.style.position = ‘absolute';
    this.style.left = ‘-1000px';

    To :

    // Append the input to the form for use in FF1.5 and OP9.2
    document.getElementById(‘upload’).appendChild(this);
    // Hide this: we can’t use display:none because Safari doesn’t like it
    this.style.position = ‘absolute';
    this.style.left = ‘-1000px';

    You also need to add an id=”upload” to the original form variable.

  307. Nick Kilian on April 19, 2007

    Steve Owen in CIX posts a nice layout change for the div element. There’s just one mistake, a missing – in the count decrementer. Below is the new code with the added – at the end.

    // Decrement counter
    this.parentNode.element.multi_selector.count–;

    Regarding my post above, it seems copy/pasting from these comments affects single quotation marks, so I’ve had to find/replace them all to get the code working correctly.

  308. Pablo on April 23, 2007

    So, how to fix the script for Safari??
    Please, anybody can paste full script here.

  309. Joe Parsons on April 25, 2007

    Anybody have any luck using this on an iBook under Firefox. I keep getting:
    Please enter a valid path on your local computer system.

    Works fine under Windows, (IE, Netscape, Firefox, etc.)

  310. me on April 26, 2007

    must just say brilliant script, bt can we use any upload script or must there be sumthign specila bout it cos mine only uploads the last file out of the selscetion

  311. myself on April 26, 2007

    must just say brilliant script, bt can we use any upload script or must there be sumthign specila bout it cos mine only uploads the last file out of the selection

  312. ahussam on May 21, 2007

    hi all, great code thanks,

    I edited the code a bit to be able to align the delete button to the right, but now I have a problem when deleting i get a javascript error.

    here is my edited code part:

    this.addListRow = function( element ){
    // Container Row div
    var out_row = document.createElement( ‘div’ );
    out_row.style.width = ‘100%';
    out_row.style.background = ‘#EEEEEE';
    out_row.style.position = ‘relative';

    // Text Row div
    var new_row = document.createElement( ‘div’ );
    new_row.style.width = ‘600px';
    new_row.style.position = ‘relative';
    new_row.style.top = ‘3px';
    new_row.style.styleFloat = ‘left';
    new_row.style.cssFloat = ‘left';

    // Delete button
    var new_row_button = document.createElement( ‘input’ );
    new_row_button.style.styleFloat = ‘right';
    new_row_button.style.cssFloat = ‘right';
    new_row_button.type = ‘button';
    new_row_button.value = ‘Delete';
    new_row_button.style.position = ‘relative';

    // References
    new_row.element = element;

    // Delete function
    new_row_button.onclick= function(){

    //node.parentNode.removeChild(node);
    // Remove element from form
    this.parentNode.element.parentNode.removeChild( this.parentNode.element );

    // Remove this row from the list
    this.parentNode.parentNode.removeChild( this.parentNode );

    // Decrement counter
    this.parentNode.element.multi_selector.count–;

    // Re-enable input element (if it’s disabled)
    this.parentNode.element.multi_selector.current_element.disabled = false;

    // Appease Safari
    // without it Safari wants to reload the browser window
    // which nixes your already queued uploads
    return false;
    };

    // Set row value
    new_row.innerHTML = element.value;

    // Add button
    out_row.appendChild( new_row_button );

    // Add text
    out_row.appendChild( new_row );

    // Add it to the list
    this.list_target.appendChild( out_row );

    javascript error is “this.parentNode.element.parentNode is null or not an object” on IE7, any idea how to fix this ?

  313. Mike S on May 22, 2007

    Though this code seems to work fine when used w/ the example .html file, if i use within my own email form, var_dump($_FILES) always returns just one file.

    I have seen this mentioned in previous comments above. Has anyone figured out what this issue is?

    Thanks in advance for any help.

  314. stevie on May 28, 2007

    Good post

  315. dj on May 30, 2007

    im planning to use this control snippet in the project that im currently working on.. So ive converted this from html to aspx, however there seemed to have an error on this line “this.parentNode.parentNode.element.multi_selector.count–;”.. can someone please help me.. i could provide a link to my complete source code

  316. OpenIDrzm on May 31, 2007

    I’m using the script in a rails application:

    changed in multifile.js:
    element.name = ‘file_’ + this.id++;
    to:
    element.name = ‘album[picture' + this.id++ + ']‘;

    In rails I’m using this snippet in the controller:
    params[:album].each{|key,asset|
    @asset=@album.assets.create
    @asset.uploaded_data=key
    @asset.save
    }

    Does anyone have a more elegant solution for the rails part?

  317. Cyril on June 5, 2007

    It seems it does not work when the form is in a pop-up and the div in the parent window.

  318. Ganesh on June 7, 2007

    Hello all,

    what about displaying actual images instead of the path of the images and delete button?

    Thnaks,

  319. it2051229 on June 9, 2007

    well yeah thanks for the script.. but uhhmm i wanted to style my button.. how can i style my button with CSS if the “id” and “class” property is occupied??

  320. Chris on July 6, 2007

    Please tell me how you styled your “Browse” button above! I have looked at all the overlaying options, but they suck. I need a CSS solution!

  321. Mahes on July 10, 2007

    how do i actually pass the value over to my asp page?

  322. sidnei dasilva on July 16, 2007

    Thanks so much for sharing the script :D

    Great work! Congratulations!

    -Sidnei

  323. stoney on August 4, 2007

    how can we up load a file without browsing it?. ie, we know the path of the file and we want to upload it without clicking on the browse button…

  324. Max on August 4, 2007

    Great work, I must thank you, even if there are so many comments, that means the same as mine :)
    ..sorry for my english

  325. Chris on August 13, 2007

    Please don’t use for loops to pick up the files…

    Here’s a better example:

    foreach($_FILES as $file) {
    if($file['error']==0) {// keeps blank files out
    //your upload code here
    } // end if statement
    } // end foreach

  326. chris on August 14, 2007

    Here’s my edited file
    Changes include:
    File name is not absolute path (so ‘file.doc’ instead of ‘/home/foo/Desktop/file.doc’) credit Steve Owen
    Remove button is to the left of the file – credit Steve Owen
    ‘Remove’ is now a link instead of a button

    function MultiSelector( list_target, max ){
    this.list_target = list_target;
    this.count = 0;
    this.id = 0;
    if( max ){
    this.max = max;
    } else {
    this.max = -1;
    };
    this.addElement = function( element ){
    if( element.tagName == ‘INPUT’ && element.type == ‘file’ ){
    element.name = ‘file_’ + this.id++;
    element.multi_selector = this;
    element.onchange = function(){
    var new_element = document.createElement( ‘input’ );
    new_element.type = ‘file';
    this.parentNode.insertBefore( new_element, this );
    this.multi_selector.addElement( new_element );
    this.multi_selector.addListRow( this );
    this.style.position = ‘absolute';
    this.style.left = ‘-1000px';
    };
    if( this.max != -1 && this.count >= this.max ){
    element.disabled = true;
    };
    this.count++;
    this.current_element = element;
    } else {
    alert( ‘Error: not a file input element’ );
    };
    };
    this.addListRow = function( element ){
    var new_row = document.createElement( ‘div’ );
    new_row.innerHTML = ‘[';
    var new_row_button = document.createElement( 'a' );
    new_row_button.setAttribute("href", "#");
    new_row_button.appendChild(document.createTextNode("remove"));
    new_row.element = element;
    new_row_button.onclick= function(){
    this.parentNode.element.parentNode.removeChild( this.parentNode.element );
    this.parentNode.parentNode.removeChild( this.parentNode );
    this.parentNode.element.multi_selector.count--;
    this.parentNode.element.multi_selector.current_element.disabled = false;
    return false;
    };
    var c = element.value.lastIndexOf('\/');
    if (c != -1)
    html = element.value.substring(c+1);
    else {
    var c = element.value.lastIndexOf('\\');
    if (c != -1)
    html = element.value.substring(c+1);
    else
    html = element.value;
    }
    new_row.appendChild( new_row_button );
    var new_row_text = document.createElement( 'span' );
    new_row.appendChild(new_row_text);
    new_row_text.innerHTML = '] ‘ + html;
    this.list_target.appendChild( new_row );
    };
    };

    and the php file it posts to:

    if($_FILES) {

    foreach($_FILES as $file) {
    if($file['error']==0 ) {

    $uploadDir = ‘upload/';
    $uploadFile = $uploadDir . $file['name'];
    move_uploaded_file($file['tmp_name'], $uploadFile);

    } //error is 0
    } // foreach
    } // if files

    I do error checking and more processing of the uploaded files, but they were very specific to my function so I left them out to be as generic as possible. Hope it helps.

  327. ???? on August 29, 2007

    ???????????

  328. Balendu Sharma Dadhich on September 7, 2007

    Very innovative way to upload multiple files, which is otherwise a very tedious task.

  329. Sathish on September 19, 2007

    Nice work friends.

    Code is working superbly..

    But i need to upload only image files.

    Is there any script to validate before uploading.

    If so please send me the code across chumsat@gmail.com

    Thanks in advance

  330. zn0ppy on September 20, 2007

    very nice script. found the trick behind this multifile uploads i was search for days :-)

  331. Dave on September 21, 2007

    This is really beautiful. I’m definitely looking for this solution and one other component. Do you know if it is possible to filter out the files shown by say file extension or filenames? If I could do that, this would really work well for me as I have an instance where I have to allow the user to select about 100 files and it would help avoid mistakes if I showed only the file file1_1.jpg, file1_2.jpg… so that they put the right file into the right slot when the files are properly named (they won’t always be, so I also need to allow them to turn the filter off).
    THanks,
    dave

  332. Blake on September 24, 2007

    I have gone through every comment on this thread (not necessarily perfectly, mind you) and added in all the fixes that seem pertinent, but I still cannot get this script to successfully send the file data to the server in Firefox 2.0.0.7. It works just fine in MSIE, but Firefox (on the php backend) sees empty file data. Is it just me? Any ideas??

  333. Terrence Brannon on September 24, 2007

    Hi, it seems that two file parameters are passed when only one file is uploaded.

  334. OpenIDhttp://mylid.net/bratkid on September 25, 2007

    good job.

  335. Dejan on September 25, 2007

    I saw some people asking this in this in here but I’m not shure if somebody posted this before me.

    It’s about styling the Browse button and the text box next to it so we get a nice looking Browse button with or without the nice looking text box.

    I joined this fantastic solution with another great one from Michael McGrady to achieve formating of the Browse button and the text box. To one of our clients the text box looked kinda disfunctional to end-users, since the selected files are constantly disappearing and I quite understand them in some way (nobody uses command-line style inputs theese days).

    So anyone interested in a nice looking Browse button with no text box, just contact me(djefim@gmail.com)! I would post it here but it’s still looking nasty and I’m way behind schedule :)

  336. Jenny on September 27, 2007

    I’m no guru in Ajax/DHTML so I wasted a couple hours trying to find the AJAX in that neat solution.

  337. Stickman on September 27, 2007

    Jenny: I don’t know where you got the idea that this has anything to do with Ajax — certainly not from the article, or anything in the code.

    What exactly were you looking for?

  338. babacan on October 14, 2007

    Thanks. very good article

  339. Greg Mallon on October 15, 2007

    Stickman,
    Before I forget. Thanks. This looks to be an elegant, clean and simple approach to handling this problem. I appreciate the time you’ve taken to do this. I come from a Java background mostly and have done this before by allowing user to upload multiple docs, one at a time, with meta-data associated with each. New to .NET and just needed a simple, clean implementation since time is short. Thanks again.
    Greg

  340. Abhijit k Jadhav on October 16, 2007

    hi Great job
    I want some modification in code.
    I want to have a space of near about 60px or more between filepath and delete button.
    Please help.
    Thanks
    bye

  341. Tom Webdesign on October 17, 2007

    nice post but i’m looking for a file uploader where I can select multiple files at once.
    When you need to upload 100 files you have to select them one by one.

  342. Suhaib Malik on October 18, 2007

    thanks a million for this wounderfull script. keep rocking

  343. Silpa on October 22, 2007

    can you please provide me the code to open the attached file.with the same code as above i need to have this feature also to oprn the file.

    Thanks in advance

  344. ctraos on October 24, 2007

    muchas gracias, muy buen post :DD

  345. Eric Mitchell on November 3, 2007

    Doubt anyone will make it down this far but…

    Wouldn’t it make the Delete button’s “onclick” event handler a little less wordy if the file input element was added to the button itself, rather than the row?

    For example:
    new_row_button.element = element;
    instead of:
    new_row.element = element;

    allows:
    this.element.parentNode.removeChild( this.parentNode.element );
    and:
    this.element.multi_selector.current_element.disabled = false;

    instead of:
    this.parentNode.element.parentNode.removeChild( this.parentNode.element );
    and:
    this.parentNode.element.multi_selector.current_element.disabled = false;

    I hate having to keep track of the document hierarchy as I’m reading code. This is a little more straightforward.

    Thanks for the solution! And your code formatting is great, BTW (i.e. similar to mine).

    P.S. I see I have to give my e-mail address (good for 30 days). Having read your interviewing comments about putting a web site on your resume I’ll ask, should you end up on mine, to keep in mind that it’s aimed at 85-year-old users who use WebTV – even frames are too exotic.

  346. Juan on November 9, 2007

    excelente !!! facil de integrar !

  347. surya on November 10, 2007

    i want to check at the time of uploading the input fiie is opened or not

  348. Nguyen Duc Manh on November 12, 2007

    why you don’t upload your php file ???

  349. OpenIDJokMontoya on November 23, 2007

    I had a problem when form didn’t sent the top number of files, the FILES array had an extra empty field. I tried to resolve it deleting the empty input type file at submit.
    I added this funtion to the script:

    …[CODE]

    this.CheckEmpty = function ()
    {
    //alert (“TAG: “+this.current_element.tagName+”TIPO: “+this.current_element.type+”VALOR: “+this.current_element.value+”LONG: “+this.current_element.value.length);
    if(this.current_element.value.length==0)
    {
    if (this.current_element.parentNode.removeChild(this.current_element)) return true;
    }
    };

    [/CODE] …

    just before the last };

    Then is needed to add an eventhandler to the FORM tag: onsubmit=”multi_selector.CheckEmpty();”

    in this way:

  350. OpenIDJokMontoya on November 23, 2007

    And thanks for this script.

  351. Sean on November 28, 2007

    Hi, Can anyone help me. I’m using the multifile.js version without any changes and it’s not working on Firefox. Not sure what’s causing that. Also I everytime I add a file I also capture the contents of a textbox. However, I only want to add the file if the textbox is not blank. How do I do this?

  352. hobrob on November 29, 2007

    It’s not asynchronous, and there’s no XML. THIS IS NOT AJAX. Unless you put the contents of a file into a get / post variable of an XMLHttpRequest and send it to a script that creates a file on the server with the contents of your variable, there is no such thing as an AJAX file transfer. Why do people find it so hard to distinguish between Ajax and standard Javascript DOM manipulation?

    Stickman says: I’ve said it before several times but apparently I need to say it again: I know it’s not Ajax, and I never claimed that it was. Read the article again and see if you can see any mention of Ajax…well? Nope, that’s because it’s not there. And it never was.

    In fact, I think I’m going to edit the article right now to point this out more clearly, to avoid any more such high-handed comments.

  353. SUDHI GANGAL on November 30, 2007

    Thanks the code u have given for browse.

    THROUGH CODE FILES ARE STORED IN .SO NW I HAVE I QUESTION THAT AS IT CONTAIN IN DIV HOW TO ACESS THE FILES AND UPLOAD TO THE SERVER .
    BECAUSE DURING THE UPLOAD IT ONLY KNOWS THE TAG NOT THE DIV

    PLEASE HELP ME .IF ANYONE TRIED.

  354. Craig on January 9, 2008

    Easiest way to strp the filename:

    Replace:

    new_row.innerHTML = element.value;

    with:

    var m = element.value.match(/(.*)[\/\\]([^\/\\]+\.\w+)$/);
    new_row.innerHTML = m[2];

    Cheers, Craig

  355. soulz on January 21, 2008

    Alright I’m a bit new with the CSS concept and XHTML.. understand java enough to get by.. and am fairly good with php and ajax.. So, I found this script the concept is fantastic.. love it very much so.. but for once I am stumped on coding… maybe its cause i am beyond sleep or just burnt out from other projects I dunno.. but I guess my questions would be to this..

    I want to change the look to like what you have well.. similar but more conforming to the look of the site I am using it on. grant it its a backend script on the site that i plan to use it for an noone will see it but me and I could leave it the way it is, but I am to say the least anal about looks.. so that said.. how can I change the div layout from plain to pretty? just a simple sample will sufice ill figure out the rest from there hopefully..

    and one other thing. how would i integrate this in with Shawns upload script?
    email is soulzllc@gmail.com to any that can help..

  356. Mister B on January 25, 2008

    Awesome work – works really well – thankyou very much! I had to extend it so that i could add a description text box for each file to upload. It was reasonably simple to do. What I should have done though (NB for next time, or for anyone that needs to do the same), is create a generic container object to hold the input file and the input text control in, and then that could be manipulated in the same way that you are currently manipulating just the file input control. If this is done, then you would be able to group all sorts of different html controls with a single file upload with the same code base. oh well… for next time!

  357. Shaun on February 1, 2008

    can someone email me the updated script with the RESET code

  358. Kristy on February 5, 2008

    Love the script. Easy, Neat & User Friendly… my thanks to Jpep for his tip on getting started with the upload script:
    $file_count = sizeof($_FILES);
    for ($i=0;$i

  359. Roland Hentschel on February 6, 2008

    Great Script,
    yet I’m confused about what kind of script I should write
    for the “your_script_here.script” …

    Would be really kind of you to help me out ?!?

    ( -: roland :- )

  360. Kyle on February 13, 2008

    I’m trying to allow for a description/caption to be added for each doc…if anyone can help me out, point me in the right direction or share their hack…it would be appreciated

  361. ChrisLang on February 16, 2008

    Hi Stickman and Hisham Al-Beik,
    regarding the delete all. i cannot find any file here on how to delete all. but here is the code:
    example.html
    var TabPlane = document.getElementById(‘files_list’);
    var newPlane = TabPlane.cloneNode(false); // no child nodes;
    TabPlane.parentNode.replaceChild(newPlane,TabPlane);

    But i tried so many times and ways to removeChild (insertbefore), would you please help.
    Thanks

  362. smeerkahoven on February 22, 2008

    hi… im trying to upload files using php.. but i wanna kwno if there are a way to upload them without html tag…just using an url: /home/me/file.txt ….in a hidden tag or something…but validating with POST or GET to get the file url to upload…plz …

  363. Justin Cunningham on February 25, 2008

    I made a flexible flash multiple file upload applet. It’s called Multi Bit Shift, and is licensed under the LGPL. It has real time upload status monitoring and queuing, and is extensively documented both internally and externally. In addition, screencasts are available and any of the text or color schemes can be customized. I hope it can be of some help, check it out at http://mutlibitshift.com.

    JC

  364. Randy on February 25, 2008

    Thanks for the great code!

  365. palwinder on February 28, 2008

    Thanx for,

    Really, it was very helpful for me, i just got it that i wanted.

    Thankx once again dear.

  366. LinuxDeveloper6666 on March 6, 2008

    Thanks for the nice script. It took me two days to get this working.

    However my boss has a requirement. Does any one know some upload script like the following?

    http://ajaxuploader.com/Demo/multiple-files-upload.aspx

    The above script is built in .NET. I think it’s possible to achieve the same result using PHP.

    Thanks

  367. mayaka on March 6, 2008

    Hi
    thks for this script, but i still have a problem with
    when i try to print the content of $_FILES
    print_r ($_FILES);

    i have an empty entry in the table (i try to upload just 2 file )
    please help me


    FILES:Array
    (
    [file_2] => Array
    (
    [name] =>
    [type] =>
    [tmp_name] =>
    [error] => 4
    [size] => 0
    )

    [file_1] => Array
    (
    [name] => ovh-logo-gauche.gif
    [type] => image/gif
    [tmp_name] => w:/var/tmp\php39C.tmp
    [error] => 0
    [size] => 1854
    )

    [file_0] => Array
    (
    [name] => webaffaires.jpg
    [type] => image/jpeg
    [tmp_name] => w:/var/tmp\php39D.tmp
    [error] => 0
    [size] => 11575
    )

    )

  368. Shelon Padmore on March 8, 2008

    Is there a way for this control to select a folder also???

    – Shelon Padmore

  369. Stickman Games on March 12, 2008

    Crazy coding

  370. Kyle on March 13, 2008

    I’m trying to allow for a description/caption to be added for each doc…if anyone can help me out, point me in the right direction or share their hack…it would be appreciated

  371. Philip on March 14, 2008

    @mayaka:

    It looks like you have not changed the max parameter from the default of three to your desired number of uploads. When calling the MultiSelector() function, specify 2 as the second parameter.

    I could be wrong, however.

    @Stickman – Thank you very much for this… It is much more elegant than the solution that I was using, which was to use AJAX (ugh) to create additional file input elements or using the fileReference class in flash (double ugh) to create upload forms.

  372. Sanket Sirotiya on April 1, 2008

    Thanks Dude!!!

  373. Misha on April 1, 2008

    Thank you a lot for the script.
    I am going to use it with php to upload files and to put them to MySQL DB.
    <?
    for ($i = 0; $i < 3; $i++)
    {
    print $_FILES['file_'.$i]['name'].”;
    }
    ?>

  374. pervaiz akhtar on April 2, 2008

    good work

    but i feel problem when i used javascript in content page. what is solution of it

  375. Luiz Lopes on April 4, 2008

    This is great, a really awesome script. It definitely makes things a lot easier to work with. Good Job!

  376. ram on April 4, 2008

    Nice work.. Just wanted to know if any one is aware of mulitple selection of files while uploading.

  377. dylan on April 9, 2008

    For those of you who are still trying to CSS-ify the delete button (and other elements).. I set the “id” tag with,

    new_row_button.setAttribute( ‘id’, ‘multifile-butn’ );

    I think you can set the “class” tag similarly, though I haven’t tried.

  378. Rhaka on April 15, 2008

    Man i’m still float with

    element.name = ‘userfile[]';

    b’cos in my PHP

    $file = $_FILES['userfile'];
    $k = count($file['name']);

    for($i=0 ; $i < $k ; $i++)
    {
    if(isset($save_path_thumb) && $save_path_thumb!=””)
    {
    $name = split(‘/’,$file['name'][$i]);

    move_uploaded_file($file['tmp_name'][$i], $save_path_thumb.$name[count($name)-1]);
    }

    }

    it’s still can’t work…i can upload several even only for 1 image.please reply imediately..thanks

  379. Rhaka on April 15, 2008

    it’s still can’t work…i can’t upload several even only for 1 image.please reply imediately..thanks

  380. jake on April 26, 2008

    Ok i need a tiny bit of help, i need the element name and id to be the same because of how my form script works. How do i do this? I can get the id to come up but the numbering does not stay the same with the id and name.
    please help

  381. Cromatino on May 4, 2008

    Hi. Thanks for the script, that’s what I need for a my simple struts project…but…I have a question: in the action you put ‘action=”your_script_here.script”‘. Can I pass the files to a Struts Action? If yes, how can I read the files? I’m trying to read them like File (and like FormFile too) but it doesn’t work. Which type I have to use to get this files?

    Thanks, Bye.

  382. woss on May 5, 2008

    can anyone explain me is it possible to select multiple files at once and then upload them with the resto of the form??

  383. Niz on May 6, 2008

    Hi Stickman et al

    Very, very helpful script.

    Is it easy to add a piece of code that shows a progress bar for uploads? If so can someone point me in the right direction?

    Regds
    Niz

  384. drvajra on May 7, 2008

    ear Mr. Stickman and friends:

    Greetings.
    I am a teacher, and planning to set up a website for my students.

    In my website,I would like:
    1) Each student to be able to upload 15 to 20 files, at one time.
    2. I will assign a Student# and password. This should be ‘required’ for uploading, to prevent unauthorized uploading.
    2. Restrict upload File Types (for example *.exe).
    3. I would like the files uploaded by each student to be stored on my website separately for each student.
    4. I would like to be able to download from my website to my computer, my student uploaded files, for editing.
    4. The ability to delete used files from server.
    5. Ability to disable student#, so the same person cannot upload without new approval.

    I will greatly appreciate if you could help me with implementing this in my website. I am familiar with HTML.

    Thank you so much!

    Dr. Vajra Sharma

  385. PHP Developer on May 20, 2008

    Hi, I am trying to upload multiple files in my server ( Web Host, not local).. But I want to test them before upload and also I want to show a progress bar about this upload..

    How to do it?

  386. Matt on June 13, 2008

    This script is amazing.

    If I already know the path of the files to upload, can these be listed in the before someone browses for a file?

    Can I use php to do this?

  387. Peter on June 25, 2008

    Here’s a version I have modified to use the Prototype JS API and take an additional “options” parameter for increased versatility. Here is example usage followed by the code:

    // Create an instance of the multiSelector class, pass it the output target and the max number of files and any desired custom options
    var multi_selector = new MultiSelector( $( ‘files_list’ ), 50,{
    name_prefix: ‘filename’,
    use_array: true // name the elements with “[]” so PHP picks up the files as an array
    });
    // Pass in the file element
    multi_selector.addElement( $( ‘my_file_element’ ) );

    The modified code:

    /**
    * Convert a single file-input element into a ‘multiple’ input list
    *
    * Usage:
    *
    * 1. Create a file input element (no name)
    * eg.
    *
    * 2. Create a DIV for the output to be written to
    * eg.
    *
    * 3. Instantiate a MultiSelector object, passing in the DIV and an (optional) maximum number of files
    * eg. var multi_selector = new MultiSelector( document.getElementById( ‘files_list’ ), 3 );
    *
    * 4. Add the first element
    * eg. multi_selector.addElement( document.getElementById( ‘first_file_element’ ) );
    *
    * 5. That’s it.
    *
    * You might (will) want to play around with the addListRow() method to make the output prettier.
    *
    * You might also want to change the line
    * element.name = ‘file_’ + this.count;
    * …to a naming convention that makes more sense to you.
    *
    * Licence:
    * Use this however/wherever you like, just don’t blame me if it breaks anything.
    *
    * Credit:
    * If you’re nice, you’ll leave this bit:
    *
    * Class by Stickman — http://www.the-stickman.com
    * with thanks to:
    * [for Safari fixes]
    * Luis Torrefranca — http://www.law.pitt.edu
    * and
    * Shawn Parker & John Pennypacker — http://www.fuzzycoconut.com
    * [for duplicate name bug]
    * ‘neal’
    */
    function MultiSelector( list_target, max, options ){

    if (options === undefined) {
    // make an empty object so we don’t get errors checking properties
    var options = {}
    }
    // Where to write the list
    this.list_target = list_target;
    // How many elements?
    this.count = 0;
    // How many elements?
    this.id = 0;
    // Is there a maximum?
    if( max ){
    this.max = max;
    } else {
    this.max = -1;
    };
    // What to prefix the upload field names with
    if (options.name_prefix === undefined) {
    this.name_prefix = ‘file_';
    }
    else {
    this.name_prefix = options.name_prefix;
    }
    // Whether or not the fields should be submitted as an array for the processing script. If set to true “[]” will be appended to the field name, otherwise it will be appended with a number
    if (options.use_array === undefined) {
    this.use_array = false;
    }
    else {
    this.use_array = options.use_array;
    }
    // What CSS style to use for hiding the form elements
    if (options.hidden_style === undefined) {
    this.hidden_style = {
    ‘position': ‘absolute’,
    ‘left': ‘-1000px’
    }
    }
    else {
    this.hidden_style = options.hidden_style;
    }
    // A CSS classname to use for hiding the form elements. This will take precedence over the style to ensure the default style is not used when a classname is provided.
    if (options.hidden_classname === undefined) {
    this.hidden_classname = null;
    }
    else {
    this.hidden_classname = options.hidden_classname;
    }
    /**
    * Add a new file input element
    */
    this.addElement = function( element ){
    // Make sure it’s a file input element
    if( element.tagName == ‘INPUT’ && element.type == ‘file’ ){
    // Element name
    if (this.use_array === true) {
    element.name = this.name_prefix + ‘[]';
    }
    else {
    element.name = this.name_prefix + this.id++;
    }
    // Add reference to this object
    element.multi_selector = this;
    // What to do when a file is selected
    element.observe(‘change’,function() {
    // New file input
    var new_element = document.createElement( ‘input’ );
    new_element.type = ‘file';
    // Add new element
    this.insert({‘before': new_element})
    // Apply ‘update’ to element
    this.multi_selector.addElement( new_element );
    // Update list
    this.multi_selector.addListRow( this );
    // Hide this
    if (this.multi_selector.hidden_classname !== null) {
    this.className = this.multi_selector.hidden_classname;
    }
    else {
    this.setStyle(this.multi_selector.hidden_style);
    }
    });
    // If we’ve reached maximum number, disable input element
    if ( this.max != -1 && this.count >= this.max ) {
    element.disabled = true;
    };
    // File element counter
    this.count++;
    // Most recent element
    this.current_element = element;
    } else {
    // This can only be applied to file input elements!
    alert( ‘Error: not a file input element’ );
    };
    };

    /**
    * Add a new row to the list of files
    */
    this.addListRow = function( element ){
    // Row div
    var new_row = document.createElement( ‘div’ );
    // Delete button
    var new_row_button = document.createElement( ‘input’ );
    new_row_button.type = ‘button';
    new_row_button.value = ‘Delete';
    // References
    new_row.element = element;
    // Delete function
    new_row_button.observe(‘click’,function() {
    // Remove item from list
    this.up().remove();
    // Remove element from form
    this.up().element.remove();
    // Decrement counter
    this.up().element.multi_selector.count–;
    // Re-enable input element (if it’s disabled)
    this.up().element.multi_selector.current_element.disabled = false;
    // Appease Safari
    // without it Safari wants to reload the browser window
    // which nixes your already queued uploads
    return false;
    });
    // Set row value
    new_row.update(element.value);
    // Add button
    new_row.insert( new_row_button );
    // Add it to the list
    this.list_target.insert( new_row );

    };
    };

  388. Sandeep Mucherla on June 25, 2008

    hi this is greate script and am using this. This works fine with IE7 adding multiple files. But this does not work in Firefox 2.0.0.14 i can only select one file at a time to upload..

    Can any one help me in this issue.

  389. michaelest on June 27, 2008

    My initial experience with this code lead me to want something that was plain ‘ole javascript with consistency across multiple browsers. After stumbling across another similar implementation, I came up with…

    http://www.estigoy.net/multifile

    It functions in a manner very similar to this code.

    All source files (HTML, javascript and PHP files – heavily commented) are available from link at the demo url (above).

    I’m just venturing into advanced javascript, so please be gentle with your comments/feedback.

    thanks,

    Michael

  390. Jack on July 1, 2008

    Hallo!

    Cool Script but how can i add a description text input field and files in the file_field from startup??

  391. Traveller on July 10, 2008

    Very cool…

    But, in my opinion, will be better with a button to start the download.

    Regards!

  392. Abhilasha Sharma on July 16, 2008

    Hey,

    Made a minor modificationto your code so that the extension would be checked for the files to be uploaded

    // Multiple file selector by Stickman — http://www.the-stickman.com
    // with thanks to: [for Safari fixes] Luis Torrefranca — http://www.law.pitt.edu and Shawn Parker & John Pennypacker — http://www.fuzzycoconut.com [for duplicate name bug] ‘neal’
    function MultiSelector( list_target, max )
    {
    this.list_target = list_target;
    this.count = 0;
    this.id = 0;
    if( max )
    {this.max = max;}
    else
    {this.max = -1;};

    this.addElement = function( element )
    {
    if( element.tagName == ‘INPUT’ && element.type == ‘file’)
    {
    element.name = ‘file_’ + this.id++;
    element.multi_selector = this;
    element.onchange = function()
    {
    if(checkExtension(element.value)==1)
    {
    var new_element = document.createElement( ‘input’ );
    new_element.type = ‘file';
    this.parentNode.insertBefore( new_element, this );
    this.multi_selector.addElement( new_element );
    this.multi_selector.addListRow( this );
    this.style.position = ‘absolute';
    this.style.left = ‘-1000px';
    }
    else
    {alert(“Error : You can upload either microsoft word document or a pdf file only. Please check the extension of the file you are trying to upload”);}
    };
    if( this.max != -1 && this.count >= this.max )
    {
    element.disabled = true;};
    this.count++;
    //alert(this.count);
    this.current_element = element;

    }
    else
    {alert( ‘Error: Please choose a valid file’ );};};

    this.addListRow = function( element )
    {
    var new_row = document.createElement( ‘div’ );
    var new_row_button = document.createElement( ‘input’ );
    new_row_button.type = ‘button';
    new_row_button.value = ‘Delete';
    new_row.element = element;

    new_row_button.onclick= function()
    {
    this.parentNode.element.parentNode.removeChild( this.parentNode.element );
    this.parentNode.parentNode.removeChild( this.parentNode );
    this.parentNode.element.multi_selector.count–;
    this.parentNode.element.multi_selector.current_element.disabled = false;return false;};
    new_row.innerHTML = element.value;
    new_row.appendChild( new_row_button );
    this.list_target.appendChild( new_row );
    };
    };

    function checkExtension(fileName)
    {

    // // for mac/linux, else assume windows
    if (navigator.appVersion.indexOf(‘Mac’) != -1 || navigator.appVersion.indexOf(‘Linux’) != -1)
    var fileSplit = ‘/';
    else
    var fileSplit = ‘\\';

    var fileTypes = new Array(‘.doc’, ‘.pdf’ , ‘.docx’); // valid filetypes
    var extension = fileName.substr(fileName.lastIndexOf(‘.’), fileName.length);
    var valid = 0;

    for(var i in fileTypes)
    {

    if(fileTypes[i] == extension)
    {

    valid = 1;
    break;

    }

    }

    return valid;

    }

  393. Watters on July 19, 2008

    This script is great, But I’ve got a problem at the moment.
    I’m using the basic script, and I don’t think it’s any php coding errors; if you choose the files, that’s fine, but if you delete files then the script does not work correctly and only uploads some files or none at all.

    I would appreciate some help to see if it is actually a bug, or just an error in my code!

  394. Watters on July 19, 2008

    I worked out what was happening.
    When you delete an item and add a new one, the new item takes on the next id, rather than the id of the deleted file. This caused problems with my php!

  395. jf2008 on August 12, 2008

    Try a multiple file upload applet in java:
    http://www.jfileupload.com/products/jfileupload/index.html

    It works with PHP script on server-side.

  396. john on September 11, 2008

    But its not AJAX!

  397. devore2008 on September 24, 2008

    Try a multiple file upload control in .NET:

    http://ajaxuploader.com/Demo/select-multiple-files-upload.aspx

    It looks so nice. However it’s only available in .NET version.

    Can someone achieve this in PHP?

    Tks.

  398. Jagan on October 10, 2008

    Hello stickman,

    Thanks for the nice work.
    Your code got limitation, when you set the max. number for file input elements, unless the user reaches that max number the form wont be submitted.
    I am getting file not found exception from my servlet. as the file name coming as null.

    my case my users dont know how many files they are uploading, so i need the form to submitted even with one file.

    Thanks in advance.

  399. Vikas on November 6, 2008

    Good work

  400. Mipi on November 14, 2008

    Hello,

    This is for devore2008. There are a lot of upload scripts like the one you’ve mentioned also for php. Take a look here for example:
    http://www.alfafiles.com/index.php?page=inst_upload

    You can find it by google for swfupload as I remember.
    Reg.

  401. heilender on November 14, 2008

    action=”your_script_here.script” i don’t understand and
    i want to know destination file .when i want to save file

  402. Ajax multiupload on November 26, 2008

    Hello,
    I invite you to test my non intrusive multiuploader in Ajax / flash on my site http://www.nasuploader.com

    cheers ;)

  403. mathieu on November 29, 2008

    srr pasted wrong code here it is;

    if(count($_FILES["file"]['name'])>0)
    {

    for($j=0; $j set_var(“UPLOADMSG”,”Project geupload”);
    }
    }
    }

  404. Vance on December 10, 2008

    Thanks guys! The script works great. Just to mention for those that are new to javascript… The form submits a array. Thanks again

  405. Anonymous on December 14, 2008

    Really cool!

  406. Michiel on December 16, 2008

    Another alternative is the Silverlight Multi File Uploader, is also works with PHP. It allowes you to select multiple files from one select box.

    Source code is available here:
    http://www.codeplex.com/SLFileUpload

  407. Zeshan on January 3, 2009

    Very thanks for providing a nice app for uploading
    v.nice

  408. Dena Ferrera on January 7, 2009

    Hello, I am using the multifile.js and am not real familar with JS. I also need to be able to check file size just like the check file types (jpg, xls etc). Any help would be greatly appreciated. I want it to check before I submit files for upload.

    Thank you

  409. Michael on January 11, 2009

    Great file upload script! Compact, simple, and fairly easy to modify … However, I am having a small problem with one part:

    [code]
    this.addListRow = function( element ){

    // Row div
    var new_row = document.createElement( 'div' );

    // Delete button
    var new_row_button = document.createElement( 'input' );
    new_row_button.type = 'button';
    new_row_button.value = 'Delete';

    // References
    new_row.element = element;
    [/code]

    For each file when the script produces a “delete” it’s one of the normal horrid looking buttons … what I want to produce is this:

    [code]

    Save

    [/code]

    Can you help with out with how I might implement this?

    Thanks,

    Michael

  410. Michael on January 13, 2009

    I ended up making the following changes to implement better looking buttons, per this particletree post:

    http://particletree.com/features/rediscovering-the-button-element/

    The only problem I am having ATM is that the button drops down to the next line. If anyone can point out what i am missing I would be appreciative.

    [code]
    this.addListRow = function( element ){
    var new_row = document.createElement( 'div' );
    Element.extend(new_row);
    new_row.addClassName( 'buttons' );

    var new_row_button = document.createElement( 'button' );
    Element.extend(new_row_button);
    new_row_button.addClassName( 'positive' );

    new_row_button.update('Delete ');

    new_row.element = element;
    [/code]

    Thanks,

    Michael

  411. Michael on January 13, 2009

    Oops, html does not work correctly.

    This line:

    new_row_button.update(’Delete ’);

    should be:

    new_row_button.update(‘|img src=”/dotcms/assets/images/accept.png” alt=””/|Delete|span id=”button_span” style=”color:#C00; font-size:80%”| |/span|’);

    Replace | with .

    Michael

  412. clhmedia on January 16, 2009

    I’ve been trying to come with different form of multiple file uploads on my site. i think i will have to try this out in my image gallery section for anonymous users

    great post
    http://www.clhmedia.com

  413. Dan on February 5, 2009

    This is a fantastic control and so has worked beautifully in most browsers I tried. Thanks for the great job!

    However, I just upgraded to IE8 and found that I am getting duplicate upload controls and filename in the listing when I click the Browse button after adding the first file.

    Anybody encountered this and/or has a suggested fix?

  414. Milos on February 12, 2009

    I was working on a solution similar to this, using ASP .NET. I got as far as creating the input controls dynamically, but every time I posted back, I found that ASP could not find the files that I had added (via the Request.Files collection). I went online to look for help and found this page. I saw that some people had a similar problem using the scripts provided here, but no one had actually posted a solution. I ended up finding the cause of my problem, by comparing my code to the one here.

    The reason ASP could not find the uploaded files was because I had not given the dynamically generated input tags a name attribute. Once I did this, the files came up just fine. I presume that this is because ASP (and most other HTTP processors) use the name attribute in the HTTP request to assign to server variables. The code provided here does add a name attribute when creating a new tag, so it may not help people using this script, but this might help anyone else out there running into similar problems.

  415. aaa on February 13, 2009

    your_script_here.script what that supposed to mean, is this some kind of fuckin joke…

  416. Stickman on February 13, 2009

    your_script_here.script what that supposed to mean, is this some kind of fuckin joke…

    This file has been downloaded many, many thousands of times by people who have had no problem understanding that it is necessary for YOU to provide the code for handling the upload once it reaches the server. If you’re having trouble grasping that, then I suggest that this code is not for you and you should look elsewhere.

  417. James on February 16, 2009

    Hi there,

    I don`t know what happened.. the first time i tried your example on this very page, it seemed to work, however after i refreshed the page, i wasnt able to do it again.

    So i donwloaded your your code, and tried the example, however this neither gives me the thing i want.

    My browser is: mozilla version 3.0.6

    Could you tell me what`s wrong? Or is it my browser?

    With kind regards, James

  418. Sara on February 20, 2009

    Oh my goodness. I think I love you! You just saved me a TON of time. Thank you, thank you and thank you. And to that person that left that other comment about this being a joke…the only joke is that you don’t know what to do with the code. Get a clue and stop biting the hand that is feeding you knowledge.

  419. Dash on March 4, 2009

    Love the script, really clever idea, a real improvement on the usual x amount of file inputs. Just one thing, I’ve noticed a few people mentioning this, I’d like the ability to add a caption with each image. I’ve also noticed a couple of comments saying they’ve achieved this, but they haven’t posted the code..? If I figure this out I’ll post it. Any help with this would be great!!

  420. Jessie on March 6, 2009

    Love the script but its not working correctly in IE8. Same problem that Dan mentioned above.

    Does anyone have any suggestions?

  421. Suresh PVS on March 6, 2009

    Validation of file type has one error, when ever file type is not accepting all the previous files are also not uploading.
    Please help me how to resolve this problem.

  422. ????? on March 14, 2009

    thank you very usfull

  423. Mira on March 20, 2009

    Hi, Can anyone help me. I’m using the multifile.js version without any changes and it’s not working on Firefox. Not sure what’s causing that. Also I everytime I add a file I also capture the contents of a textbox. However, I only want to add the file if the textbox is not blank. How do I do this?

  424. Marek on March 25, 2009

    Hi all,
    I’m having problem under IE8 with duplicate controls (like Jessie and Dan above). Is there a patch for it or any kind of solution? Anyway thank You for great job! :)

  425. Steve on May 6, 2009

    Hi,

    Great script! Ho would i make it so you get alerted if you choose the same file twice?

    Thanks

  426. Ryan Smith on May 12, 2009

    IE 8 sitll looks unstable to us. We have had many crashes when we tired our hands on IE 8.0. I will suggest to stay off, till microsoft comes with a more stable versions.

    Thanks,
    Ryan

  427. Moe on May 15, 2009

    Hi, this script is indeed very good, but is there a way of creating thumbs for every uploaded image?

    appreciate all comments

  428. David on June 17, 2009

    I apologize for being a newbie and I’m not sure if anyone else has had this trouble but I thought I’d ask.

    I downloaded the .zip file and installed code and script into my site and everything seems to work just fine. But when you click on the “Browse” button and select the file to upload, instead of listing the actual path of the file to upload (C:Documents and Settings\New Folder\My File) it displays C:\fakepath\My File.

    It also lists it like this for me when I use the sample on this page.

    Any ideas how I screwed this up?

    Any help is greatly appreciated.

    Dave

  429. Ramon on June 26, 2009

    Hi! I’m trying to implement your code inside a php website, connected with a bbdd.
    My code (inside Real Estate Joomla component) it’s this:

    <input class="button" type="button" value="” onclick=”if (checkForm()) this.form.submit()” />

    secondaries_images as $image) : ?>

    <img src="” alt=”” title=”” />
    <a href="”>

    **************************

    I want to can select more than one image, and with your code is it possible!!! :) But I don’t know how apply it inside the php code. :( Can you help me??? Pleaseee!!! Thank You!!! A lot!!!

  430. filipe abreu on June 30, 2009

    thank you so much. I see that you are using the File API, as recommended by W3 (http://dev.w3.org/2006/webapi/FileUpload/publish/FileAPI.xhtml).

    Have you discovered how to open a dialog box for choosing the file with javascript? The FileDialog interface is not working for me. I am doing something wrong or else it really doesn’t work?

  431. powercords on July 1, 2009

    Quote:
    Hi all,
    I’m having problem under IE8 with duplicate controls (like Jessie and Dan above). Is there a patch for it or any kind of solution? Anyway thank You for great job!

  432. Ivan Thompson on July 7, 2009

    Great code check my project using this idea!

  433. Elteg on July 18, 2009

    Thank you for this, I use this for my website

  434. RM on July 22, 2009

    I love you man! I have been wanting to make something like this happen on my site for ages now, but haven’t had the time to puzzle it out yet. Thanks!

  435. James on August 7, 2009

    Thanks very much for posting this. I had a use case with these exact requirements and you just saved me a tonne of work.

  436. Online Texter Marc on August 9, 2009

    Hi, i have the same problem like powercords. Is a patch available?

  437. Tobbe on August 15, 2009

    Hello,

    I was just wondering if anyone could help me how the script to upload the files should look? The PHP script, the actionscript I think it’s called.

    I have tried alot to build one but haven’t been able to.

    Would really appreciate the help.

  438. Bear62 on August 18, 2009

    Great script, thanks so much. I had an issue with the form element in Firefox 3.0.13 completely trashing my page layout. Worked fine in IE8. On a whim I removed the comment that was within the form tag () and then it worked fine. Go figure.

  439. Nikolaj Nørup Sostack on August 26, 2009

    Hi,

    Have anyone tried in a asp.net solution?
    I am trying that but the Request.Files is always empty .

    Any ideas?

  440. Angie on August 26, 2009

    I am trying to use this script in PL/SQL (Oracle) web development and I would like to pass the files as an array to another procedure/page — which will do the parsing and the actual submit. How would I pass the result as an array via your code? Please assist!

  441. MarkT on September 17, 2009

    Hi,

    I’m embarrassingly new to all things web dev. We have an internal helpdesk system written using coldfusion. I’ve been slowly debugging and improving things.

    I’m now wanting to add attachment to emails. No probs with a single file. But to dynamically add many files when you don’t know how many will be required is a bit too much of a challenge for a beginner
    your multifile tool looks just what I need but – my template doesn’t pick it up and I don’t know why. the next challenge will be to find a way to store the upload filename and filepath in an array to pass to the mail sending template.

    Header below

    windows.addEvent(‘domready’, function(){new MultiUpload( $(‘tkaddentry’).tk_multi_attach,0,”,true,false);});

    Body below

  442. Mike on October 15, 2009

    Thanks for the code dude, really helpfull

  443. Bozhidar on October 20, 2009

    Hi,
    First I would like to say thanks for the great job!
    The script is working fine… but I have a small(big) problem with it when I’m trying to implement it with Adobe Spry Framework 1.6.1. In particular with HTMLPanel Widget.
    I have the JS link, HTML part and the initiation script in self contained html(PHP) document and if I load this in any good browser it’s working fine.
    But when I try to load this file in to Spry HTMLPanel, even with globally and locally TRUE value for “evalScript” (allowed to execute content inside the HTML fragment you’re loading in to the container) it won’t initiate the “multi_selector”…

    <div id="cont” class=”galleryBoxContaine”>

    CONTENT IS LOADED HERE !!!!!

    var container = new Spry.Widget.HTMLPanel(“cont”, { evalScripts: true });

    I even try to place everything in between the container manually not loading it through Spry HTMLPanel and it is working …
    So the problem is not in the page design, CSS rules but in the Spry HTMLPanel! Please if anyone has an idea of what is wrong or how can I run around to make it work I will be very thankful!
    Thanks in advance!!!

  444. Bondo2a on October 25, 2009

    Hi
    this is a good example but i think it has one problem about the path when i upload a file it take a fakepath and this problem happened with me and i search about the solution

  445. Quan on November 5, 2009

    Nikolaj,

    You need to set the attribute runat=”server” to the file input tag to be able to retrieve uploaded file. Then in order for the client script to work correctly, you need to generate the ClientID of that server control to be used by multiSelector.addElement method.

    What I used is something like this:

    // Create an instance of the multiSelector class, pass it the output target and the max number of files
    var multiSelector = new MultiSelector( document.getElementById( ‘ListOfFiles’ ), 3 );
    // Pass in the file element
    multiSelector.addElement( document.getElementById(document.getElementById(‘idHolder’).innerHTML));

    The idea is to use a hidden div (idHolder) to hold the ClientID of the server file input control so that the JS script could know its client id.

    And then here is the server code to save the uploaded files:

    HttpFileCollection uploadedFiles = System.Web.HttpContext.Current.Request.Files;
    for (int i = 0; i 0)
    {
    string filePath = @”C:\” + Path.GetFileName(file.FileName);
    file.SaveAs(filePath);
    }
    }

    Hope this helps!

    Quan

  446. Quan on November 5, 2009

    form enctype=”multipart/form-data” runat=”server”>

    input id=”fileUploadElement” type=”file” name=”fileUploadElement” runat=”server” />

    input id=”uploadNow” name=”uploadNow” type=”submit” onclick=”return ExecuteUpload()” value=”Upload now” />

    /form>

    div style=”font-size:75%;margin-left: 10px” id=”ListOfFiles”

    div style=”display:none” id=”idHolder”>

    %=fileUploadElement.ClientID%>

    script type=”text/javascript”>
    // Create an instance of the multiSelector class, pass it the output target and the max number of files
    var multiSelector = new MultiSelector( document.getElementById( ‘ListOfFiles’ ), 3 );
    // Pass in the file element
    multiSelector.addElement( document.getElementById(document.getElementById(‘idHolder’).innerHTML));
    /script>

  447. kevin on November 16, 2009

    great script, btw, IE display the full path instead just the file name, so i have written a small script and put it under new_row_button.onclick, and replace the following line:

    new_row.innerHTML = element.value;

    to:

    if (/msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent)) {
    // Set row value
    var path = element.value.split(“\\”);
    new_row.innerHTML = path[path.length - 1];
    } else {
    // Set row value
    new_row.innerHTML = element.value;
    }

    and it works :)

  448. Ian on December 5, 2009

    This is brilliant, just what I needed, thanks for the great work.

    I made some changes to show thumbnails in multifile_compressed.js

    Line 65
    Change
    new_row.innerHTML = element.value;

    To
    new_row.innerHTML = ”;

    Brilliant :)

  449. Jason on December 7, 2009

  450. Steve on December 8, 2009

    Great script. I would like to limit the file size and discard if too large. How can this be done? Thanks!

  451. Mike on December 8, 2009

    Hi is it possible to store the file location to a database when a form is submitted

    so I have the multi upload on a form when the user submits the form I would like to be able to store the file location to dab

    thanks

    Mike

  452. Ed on December 13, 2009

    Good day

    When the upload image is found how do I have the image show and not the text file name.

    Thank you
    ED

  453. codingstep.com on December 16, 2009

    i got this error when using frame —> Notice: Undefined index: file_1 in C:\AppServ\www\….

    Could you help me ?

  454. TheOddMan on December 16, 2009

    This is absolutely brilliant. I replaced the names with an array-based name and it works a charm with scripts I’m already using!

  455. ganeshbabu on December 19, 2009

    hi guys,
    plz anyone help me.for how to upload muliple files,how to reading and how to find the string.plz any one help me.if know the code plz send to this mail kganeshbabu.it@gmail.com.i expect for ur replys.advance thanks.by ganeshbabu.

  456. jfileupload on January 3, 2010

    You can also try JFileUpload available at: http://www.jfileupload.com/
    It allows to upload over HTTP.

  457. Jon on January 13, 2010

    Hi, I have spent alot of time on this today, I have the actual multiple browsing part work. My problem arises when it comes to uploading the files. Firstly I thought that in multiple upload cases the name of the input had to be an array, e.g. name=”example[]” but this stops the javascript from working and means you cant upload several elements. I’c tried some methods I found on these comments and have tried a few of my own, but i’m getting no where. If anyone could advice that would be great
    thanks
    Jon

  458. Shyam on January 14, 2010

    how can i post the elements and get its values of the input type in other page. a bit help will be appreciated.

  459. edga on January 23, 2010

    I’ve got the script on my page, testing it and I don’t know why first file isn’t getting added to the list. Just when I choose another file – everything seems to work.File input is named file_1 so what’s the problem ?

  460. carbon on February 8, 2010

    Yeah, how do you upload with this? Where are the file locations being stored? It stores it in a java array ? How can i make php upload all the files?

  461. Zilus on February 18, 2010

    Great, I just use it and it works perfectly.

    A noob tip: The file count on the uploader side, starts with 0, i.e. $_FILES[file_0][name] == my first uploaded file.

    Thanks!!

  462. Alex Cohn on February 23, 2010

    Firefox 3.6, now official, supports “multiple” flag in file chooser: <input type=”file” mutiple=”” /> Opera has a slightly different format: <input type=”file” min=”1″ max=”9999″ />

  463. Tommy on February 24, 2010

    Hello,

    my English is not very good. I have a question about this script. Is there a way to replace space of images after uploading it? It can also be happy before you upload them to be after you select.

    Thank you very much.

  464. Justin Wiswell on March 4, 2010

    Thank you for the great script, it was very easy to implement with an existing progress bar script.

    I’ve been toying with trying to add a clear all or delete /remove all function for the last day, and I have finally found a solution. Hope this helps someone else.

    In the example index file, put your upload form tags inside a wrapper div.(eg form..)

    after you have created an instance of the multiSelector class add this script on the same page.

    [code]

    //button
    Clear

    //function

    function clearFileInputField(files_list) {
    document.getElementById(files_list).innerHTML =
    document.getElementById(files_list).innerHTML;
    $('files_list').innerHTML='';

    }

    [/code]

  465. Justin Wiswell on March 4, 2010

    sorry my last post go cut off. Before the function in html code within the Div tags named uploadFile_div use this to trigger the clear all.

    // a onclick=”clearFileInputField(‘uploadFile_div’)”href=”javascript:noAction();”>Clear</a

  466. banana on March 6, 2010

    Hi,
    This is a great solution. I’ve been thinking to get rid of those many upload fields on my site. I tested it and for some reason when i post it like one file, there is an empty array also. like file_0, file_1 but the file_1 is empty only [error]=>4. hWhy is that? is it possible to get rid of that empty array?
    Thanks

  467. George on March 19, 2010

    An excellent article for its time, but technology has come a long way since it was first written!

    If you want to upload multiple files and/or images with the possibility of compression, hashing for security, image thumbnail generation/watermarking, and much more, you can’t go past UploadEase.

    From a single page component you can navigate through your files and select files for uploading via a standard HTTP multipart/form-data POST request (the same as the file input element described in this article). You can even drag and drop them from external file explorers!

    Don’t force your users to select files one at a time with file input elements when you can give them smart tools like UploadEase. Join the likes of Facebook, MySpace, and other sites that give their users a superior user experience.

    Visit http://UploadEase.com/ today and give your users the best possible experience they can have using your website.

    // Editor’s note: I’m happy for you to post this here, but I should point out that UploadEase is a commercial product (i.e. you need to purchase a licence to use it). Also…wow, people really still make Java applets these days?

  468. kezhia on March 25, 2010

    hi newbie here..good to hop on this site.
    but it doesnt appear on the list those filenames uploaded.
    Can u help me out to set things?im using html-freemarker,,thanks..
    mail here please..kezhia04@yc

  469. Ted on March 27, 2010

    Hi, i looked through the comments for what to write in the “your script here.sript” thing, and all i see is them being rude, and you telling them to search google. can you give an example of what might go there instead? there really isnt anything to search google with… “your script here” wont turn up anything useful. Thanks!

  470. gokul on April 1, 2010

    Hi i have completed file uploaded to particular c drive location.so,how to get from c drive file to jsp page in ui(fileattachement).using jsp,servlet and extjs.

  471. meghna on April 28, 2010

    Once I upload 3 files by using this tool, where would I find them practically uploaded on the server?? How would I store it in DB?

  472. IraQlife on May 13, 2010

    Hi
    this is a good example but i think it has one problem about the path when i upload a file it take a fakepath and this problem happened with me and i search about the solution

  473. Brad on June 3, 2010

    I tried putting it on my site, but it didn’t work. Could someone help me.

  474. Brad on June 3, 2010

    sorry, you can email me @ webmaster@troop93.in

  475. Brad on June 5, 2010

    I fixed the other problems, but how do I increase the max (I was hoping to have up to 15), I don’t know the first thing about JS so please help me.

  476. Meenakshi on July 1, 2010

    I need code for multiple file creation dynamically.I saw code in this website.I need dynamically that means value in multi selector will be dynamic

  477. Steve on July 14, 2010

    Oustanding thanks for sharing the code!!

  478. Ramon on July 27, 2010

    Another Free Fast Multi Site File Uploader: http://www.multisiteupload.com
    You can upload music, video, photos, images, files, pdf, zip… to multiple Hots with only one click in seconds.
    You can upload to Megaupload, DepositFiles, FileFactory, NetLoad, UploadedTo, SendSpace, Badongo, Easy Share, Loadto, MegaShare, 2Shared and HotFile.
    Works well. Recommended.

  479. Sam on August 1, 2010

    for some strange reason I can not see any download link to the source code….am I blind or something is really happening here? :)

  480. shahida on August 18, 2010

    when we used the upload file at that time we may select any one picture from the list it will displayed in the web page itself. how i do this work.

  481. eric on August 28, 2010

    Hello,
    You can upload multiple files to multiple file hosting sites (into your account) in EmbedUpload.com .
    Just try it.

  482. Frank on September 16, 2010

    Hi, with multiple=”true” flag the selected files are not all uploaded. It is retrieved only one file of the entire list selected. Is it hard to modify this beautiful script for accept multiple file selection and then upload them all toghether?

  483. amit naik on September 20, 2010

    save as html file and see the result.

    Untitled Document

    function addFile(){
    var root=document.getElementById(‘mytab’).getElementsByTagName(‘tr’)[0].parentNode;
    var oR = cE(‘tr’);var oC = cE(‘td’);var oI = cE(‘input’); var oS=cE(‘span’)
    cA(oI,’type’,’file’);cA(oI,’name’,’file[]’);
    oS.style.cursor=’pointer';
    oS.onclick=function(){
    this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)
    }
    oS.appendChild(document.createTextNode(‘ Remove’));
    oC.appendChild(oI);oC.appendChild(oS);oR.appendChild(oC);root.appendChild(oR);
    }
    function cE(el){
    this.obj =document.createElement(el);
    return this.obj
    }
    function cA(obj,att,val){
    obj.setAttribute(att,val);
    return
    }

    Add

  484. düzce haber on October 9, 2010

    This is absolutely brilliant. I replaced the names with an array-based name and it works a charm with scripts I’m already using!

  485. SPJ on October 20, 2010

    This is great however I’ve got a problem in Firefox where it blocks access to the full file path. I would like to display the full file path next to the delete button and then pass that in to the code.

  486. jim on November 8, 2010

    doenst work in ff 3.5 on ubuntu 10

  487. Ephestione on November 14, 2010

    I imagine this is not supported anymore since there is the mootools version out. I’m against mootools because I like slender scripts without the big toolbox’s baggage… anyway I just realized this doesn’t appear to be working with Chrome :-?

  488. Ephestione on November 14, 2010

    Neverming, it does work under chrome, two minutes ago for some reason it didn’t… I can only see the “choose file” button and not the text field dialogue, but doesn’t matter.

  489. Brad on December 1, 2010

    Hi, wonderful script, how do I refresh the control without doing a post back and reloading the control entirely?

  490. ac power cord on December 5, 2010

    Well, I thought I would, but it doesn’t work in safari!

  491. DinTek on March 4, 2011

    How can one modify the code so that it allows the user to SELECT multiple files in the browse area on their local drives. I need for the user to be able to select 30 images or so at a time.

  492. Ac power cord on March 29, 2011

    how can I post the elements and get its values of the input type in other page. very thanks for your helping

  493. mersin emlak on May 10, 2011

    It seems it does not work when the form is in a pop-up and the div in the parent window…

  494. jojo on May 18, 2011

    how can i limit the allowed file size?

  495. Nour on May 26, 2011

    Thanx, this is really helpful, but is this supported by all web browsers?

  496. centos on July 8, 2011

    Great job for the multiple file selector but can you help me with the multiple file fields in the same page with multiple file selector for each.

  497. powerpoint45 on July 13, 2011

    does anyone know how to make it so the file sends to an Email

  498. Toko Bunga Alam on July 30, 2011

    wow… great.
    but i prefer the real multiple file uploader, not 3 times click. :)

  499. Vishwajeet on August 2, 2011

    Unfortunately, the code is not working when tested in IE8 with java servlet as server side entity. I tried this with jakarta commons file uploader package to access the uploaded files in the servlet.
    I get the following log info at server side-
    >Field Name = file_1, File Name = , Content type = >application/octet-stream, File Size = 0

    Even if I try and upload, say, 5 files at server side it just receives the last uploaded file name, in this case fifth, as ‘Field Name’ without any uploaded file.
    I hope I make my point clear here. The same code just works fine if I comment out the JavaScript code in the provided example.html and just upload a single file(which is a default behaviour).
    I hope this problem has nothing to do with choice of Java servlet as server side component or the jakarta file uploader package.

Sorry, comments for this entry are closed at this time.