Multiple file uploader: Mootools version

Published July 2nd, 2007

UPDATE 21/07/08: now compatible with MooTools 1.2!

It’s about 18 months since I released my simple script for creating a prettier way to include multiple file elements on a page. In that time it has remained by far the most popular page on this site, in spite of the fact that I haven’t updated it since and have long since given up trying to keep up with the comments it still generates.

Anyway as a way of getting to know Mootools, I decided to rewrite it to take advantage of the framework. I took the opportunity to clean up the code a bit and make it easier to style the output.

You can find a zip file for MooTools version 1.2 here (included is another zip file with the old, MooTools v1.1 compatible code) with the full annotated source code, also a compressed version (it weighs in at just 2.5K), some simple CSS, an example HTML file and a readme (which is basically identical to the extended comments at the top of the source code).

There’s a simple example page here. As ever, comments and bug reports welcome.

Get a Trackback link

29 Trackbacks/Pingbacks

  1. Pingback: Upload multiple files with a single file element » StickBlog on July 2, 2007
  2. Pingback: Updated: Upload multiple files with a single file element » StickBlog on July 2, 2007
  3. Pingback: Nobox Media » Blog Archive » It’s time to look at the way you upload files on November 7, 2007
  4. Pingback: It’s time to look at the way you upload files | Nobox Media on November 12, 2007
  5. Pingback: Multiple file upload with: Rails, File_Column plugin and MooTools — SilverTab’s Corner on December 19, 2007
  6. Pingback: Webmaster 38 » Blog Archive » Multiple file upload - Moo tools at ajax scripts compound on January 4, 2008
  7. Pingback: gauda.de » Blog Archive » Multiple File Upload with Ruby on Rails and file_column on January 21, 2008
  8. Pingback: Portofolio Michal Havlí?ek » Archiv » 10 mootools nástroj?, které jste možná neznali (?ást I.) on June 1, 2008
  9. Pingback: Multiple file uploader: Mootools 1.2 version | Stickblog on July 21, 2008
  10. Pingback: Moki Systems Blog » Ajax multi file upload with php, iframe, & javascript on July 22, 2008
  11. Pingback: Multiple file upload - Mootools 1.2, in webtoolkit4.me on September 4, 2008
  12. Pingback: Multiple file uploader | keyongtech on January 18, 2009
  13. Pingback: 70 New, Useful AJAX And JavaScript Techniques | Developer's Toolbox | Smashing Magazine on March 8, 2009
  14. Pingback: 3 New AJAX and JavaScript File Upload Examples | PaulSpoerry.com on March 9, 2009
  15. Pingback: 70 New, Useful AJAX And JavaScript Techniques | ClickLogin Web Design on March 9, 2009
  16. Pingback: » 15 Must See MooTools Techniques WebAir Blog on March 26, 2009
  17. Trackback: http://www.scriptremix.com/ on April 6, 2009
  18. Pingback: Multiple file upload - Moo tools on May 8, 2009
  19. Pingback: Hello world! « Trungquy’s Blog on June 20, 2009
  20. Pingback: 70 New, Useful AJAX And JavaScript Techniques « Ramesh on July 9, 2009
  21. Pingback: 70 New, Useful AJAX And JavaScript Techniques | Rystereology on July 21, 2009
  22. Pingback: Mehrere Dateien flexibel hochladen | /home/antu on July 22, 2009
  23. Pingback: Useful Plugins and Resources For MooTools | mavrick on July 29, 2009
  24. Pingback: 100 Ajax And JavaScript Techniques on October 26, 2009
  25. Trackback: pligg.com on January 7, 2010
  26. Pingback: 70 New, Useful AJAX And JavaScript Techniques | The Web Design Source on January 22, 2010
  27. Pingback: 150 JavaScript Techniques on January 25, 2010
  28. Pingback: Geek is a Lift-Style. »Archive » 70 New, Useful AJAX And JavaScript Techniques on June 17, 2010
  29. Pingback: Upload forms – enhanced | cssgallery.info on March 4, 2011

50 Comments

  1. Rob on July 28, 2007

    I love and still use your previous version of the multiple file upload! I can’t wait to try your new mootools version. I have a question though. I intend on using this for a client of mine and he posed a question. I want to upload 300 files (straight from my digital camera) at a time. If I’m reading his request correctly he basically wants to upload about 600 MB worth of images in one shot. I of course reduce them to a web friendly version after they’re uploaded. My major concern here is that the script will time out long before the upload process gets anywhere near the finish line. What would you sare are the key elements for the php.ini file that will ensure the success of this upload and not a script timeout error?

  2. ariel on July 31, 2007

    worth to try this :) i’ve been looking for this kind of script, i used to have multiple upload script but using Javascript insertAdjacentElement, i think it would be perfect if progress bar added .. but overall great job !

  3. OpenIDMarko on July 31, 2007

    Rob: The PHP timeout is not counted when uploading files to a script – it is called after upload is complete.

  4. Manon on August 9, 2007

    It’s really a great script for uploading files, Cool~~

  5. Sean on August 25, 2007

    Hi, Yes I too love the previous version, not tried the new one yet. Is it easy to modify the previous one so that each time a file is added it stores the value of a couple of text fields? I have a form that enables the user to supply a title for the file and a description. I want to store those for each file that is added. Thanks, Sean

  6. Shawn Parker on August 29, 2007

    Mootools… Hm. I was hoping for Prototype/Scriptaculous for a framework update. : gives the stickman the evil eyeball : very nice work, though.

    Rob: you probably want to go another route for that large a transfer. Even with tweaked PHP settings its not the best path to take. Depending upon how much you know you might look for a PERL or JAVA package to run on the server to handle large uploads.

  7. martin on August 31, 2007

    Hi,

    This looks like a lovely script except I dont have php5 on my server so i cant use Shawns php to accompany this. Can someone provide me with a simple bit of php4 that will work with this script.

    Regards,
    Martin

  8. hole on September 3, 2007

    i have a question… i don’t know how to get images from form to php…

    here is my code:

    window.addEvent(‘domready’, function(){
    new MultiUpload( $( ‘main_form’ ).slika, , ‘[{id}]‘, true, true );
    });

    div style = “width: 340;”>
    form id=”main_form” method=”POST” enctype=”multipart/form-data” action=”galery//confirm_up/1″>
    input type=”file” name=”slika” id=”slika[]”>input type = “submit”>
    /form>
    /div>

    and than php:
    for($i; $i

  9. Michael on October 10, 2007

    Awesome script for uploading files. I’ve just implemented it in my self written cms and it works perfectly. Thanks!

  10. Bart on October 17, 2007

    Great tool. I’m actually (still) using the last version, because I already did some css-tweaking and other code-integration etc.
    One problem I can’t seem to solve is to enable the Browse-button with some own javascript, after it has been disabled because the maximum was reached. I probably get the obj-reference all wrong and I’m having the same problem when I try with getElementById(‘nameoffields+currentID’)

    What would be the right syntax? [I hope this is a bit clear]
    TIA

    Bart

  11. Dee on October 28, 2007

    I am trying to integrate this lovely js with this perl cript here:

    http://www.muquit.com/muquit/software/upload_pl/upload_pl.html

    It seems easy enough, but I keep getting error and more error as I made modification to the above script. I am learning this the hard way. It doesn’t help the situation when I am clueless too.

    Please help.

  12. gdufloux on November 7, 2007

    Hi,
    First,thanks for your script :)

    Then, I found a small bug: as clients might be on unix systems, i focused on your substring in addRow function.
    When ‘Extract file name’ option is unabled, it does nothing if you’re on linux/mac:
    if( name.contains( ‘//’ ) ){ name = name.substring( name.lastIndexOf( ‘//’ ) + 1 ); }
    Special character ‘/’ should be escaped with ‘\/’. So I replaced it by:
    if( name.contains( ‘\/’ ) ){ name = name.substring( name.lastIndexOf( ‘\/’ ) + 1 ); }

    Last thing: mootools version has some restriction for some of us, as we already use other librairies (like Prototype, with Rails).
    So, I use your initial standalone version where i (try to) backport (some) enhancements from mootools version.
    I really think such a tool should stay standalone, to be compatible with any lib.

    Anyway, your work is great, and thanks again.
    Regards, Guillaume

  13. mr.shintla on December 26, 2007

    hi.

    the old and this one do not work in current firefox (2.0.0.11)!

    in the old version i get only the first file in print_r($GLOBALS["HTTP_POST_FILES"]); and with this one i do not get any file at all! but both work perfect in IE.

    I think it could be that FF does not upload from file-tags that were generated?
    Does anyone have a fix or knowledge what is actually the reason?

  14. mr.shintla on December 26, 2007

    hi.

    the old and this one do not work in current firefox (2.0.0.11)!

    in the old version i get only the first file in print_r($GLOBALS["HTTP_POST_FILES"]); and with this one i do not get any file at all! but both work perfect in IE.

    I think it could be that FF does not upload from file-tags that were generated?
    Does anyone have a fix or knowledge what is actually the reason?

    greetings.ivo

  15. mr.shintla on December 30, 2007

    it looks like firefox closed a security-hole (upload files triggered by a malicious js). more here:
    http://www.heise-security.co.uk/news/85924

    so we might find a different solution than creating file-fields by js. maybe the fields should be already existing in html and the js just moves them around… not that elegant, but maybe working.

  16. Anon on January 29, 2008

    Hi. I’ve used the Default example ( http://the-stickman.com/files/mootools/multiupload/ ) and then I have a Submit button to take me to a confirmation page: how do I retrieve the filenames entered, on the second page? Thanks.

  17. Justin Cunningham on February 24, 2008

    I made a Flex multiple file upload applet called Multi Bit Shift. It has a rails plugin that makes it really easy to use, and is extensively documented in the source and externally. It is licensed under the LGPL, and is really easy to use, fast, and supports large number of files with real time status updates and queuing. In addition, I have a bunch of usage screencasts available. Check it out at http://multibitshift.com.

  18. Chris on February 25, 2008

    A great little script, even if it’s tied to yet another framework.

    A note to any ASP.NET developers that are looking to use it: If a Script Manager is present on the page (or masterpage) then the multi-file uploader doesn’t seem to work. I have no idea why, but that seems to be the way it is. The older version that doesn’t use the MooTools framework seems to be OK if a script manager is on the page.

  19. kermit on March 3, 2008

    Still doesn’t work with firefox :/
    It makes this script useless, even it looks great in IE.

  20. Anthony Larkins on June 17, 2008

    Example for Cold Fusion Developers.

    <

    Multiple file upload (Mootools version)

    window.addEvent(‘domready’, function(){
    // Use defaults: no limit, use default element name suffix, don’t remove path from file name
    //function( input_element, max, name_suffix_template, show_filename_only, remove_empty_element )
    new MultiUpload( $( ‘main_form’ ).defaults);
    // Max 3 files, use ‘[{id}]‘ as element name suffix, remove path from file name, remove extra elemen
    //new MultiUpload( $( ‘main_form’ ).use_settings, 3, ‘[{id}]‘, true, true );
    });

    —- #Loopcounter# —-

    <!— check to see whats in the CFFile Scope —>

    fileInfo = structnew();
    fileInfo.file_ext = CFFILE.ClientFileExt;
    fileInfo.file_name = CFFILE.ClientFileName;
    fileInfo.file_sub_type = CFFILE.ContentSubType;
    fileInfo.file_type = CFFILE.ContentType;
    fileInfo.file_size = “55”;
    //fileInfo.N_ATTACHMENT_ID = “245”;
    fileInfo.task_order_id = “281”;
    fileInfo.attachment_title = “AL Testing”;
    //fileInfo.file_name = “AL Testing”;
    //fileInfo.D_REC_VERSION = “09-JAN-2008″;
    //fileInfo.name = #file_blob#;

    The File Has been Uploaded!

    File Name:

  21. Anthony Larkins on June 17, 2008

    How do you post the Code so other can see it?
    Example for Cold Fusion Developers.
    ColdFusion Solution.

    "
    <

    Multiple file upload (Mootools version)

    window.addEvent('domready', function(){
    // Use defaults: no limit, use default element name suffix, don't remove path from file name
    //function( input_element, max, name_suffix_template, show_filename_only, remove_empty_element )
    new MultiUpload( $( 'main_form' ).defaults);
    // Max 3 files, use '[{id}]' as element name suffix, remove path from file name, remove extra elemen
    //new MultiUpload( $( 'main_form' ).use_settings, 3, '[{id}]', true, true );
    });

    ---- #Loopcounter# ----

    <!--- check to see whats in the CFFile Scope --->

    fileInfo = structnew();
    fileInfo.file_ext = CFFILE.ClientFileExt;
    fileInfo.file_name = CFFILE.ClientFileName;
    fileInfo.file_sub_type = CFFILE.ContentSubType;
    fileInfo.file_type = CFFILE.ContentType;
    fileInfo.file_size = "55";
    //fileInfo.N_ATTACHMENT_ID = "245";
    fileInfo.task_order_id = "281";
    fileInfo.attachment_title = "AL Testing";
    //fileInfo.file_name = "AL Testing";
    //fileInfo.D_REC_VERSION = "09-JAN-2008";
    //fileInfo.name = #file_blob#;

    The File Has been Uploaded!

    File Name:

    "

  22. Jens Fudge on June 24, 2008

    Hi.
    I did try to download and implement the http://the-stickman.com/files/mootools/multiupload/

    I am new in asp.net(and in web-programming all together), and I cannot figure out how to refer to the files on the “submit” button click.
    Once I can refer to File_xx I suspect I can save the file to the filesystem or database on the server…
    Any help is appreciated.
    Thanks in advance
    Jens Fudge

  23. Parker on June 25, 2008

    i have a problem using this script to upload an array of up to 3 image files to the database using php.
    can someone help me out here….would be glad

  24. betty on July 9, 2008

    is there an easy way to add another text input field to add a description for the file?

  25. kakimoto on July 16, 2008

    hi there
    Can you please confirm that this mootools version is also free in terms of licensing?

    thanks

  26. Stickman on July 16, 2008

    kakimoto: as explained in the code’s comments, the readme that comes with the code and on this page, you may use the code as you wish without limitation.

  27. Bob on July 20, 2008

    I’m having troubles getting the file uploader to work with Mootools 1.2. Is it me or is there an issue with version 1.2?

  28. Jens on July 20, 2008

    Hello!

    I have a problem with the MooTools 1.2. When I download it with all components generated with the core builder the example doesn’t work.

    When I use your used mootools version with

    it works without problems….

    Can I download your mootools.js version or can you send it by mail please?

    Thanks!

  29. Jens on July 20, 2008

    …missing part of my question:

    When I reference to your MooTools.js in my example file it works without problems….

    Jens ;-)

  30. Stickman on July 21, 2008

    The script was written for MooTools version 1.1 so is not guaranteed to work with 1.2. I will try to find time to take a look at it over the next few days and see what needs changing to get it to work with the new version.

  31. Karel on August 29, 2008

    Hello,

    I want replace input file by a simple link, which shows a window for searching a file (like gmail).

    So I set style of input file visibility:hidden and a link calls click() action of the input file. The window for searching a file appears.

    But when I repeated it a number of time, in the list of attachments I see only red crosses without names of files.

    Do you some solution of this problem?

    Thanks

  32. ?? on October 10, 2008

    thanks so much for sharing this script!

  33. oneroux on October 15, 2008

    hi,

    i want to upload only images, how can i validate it before submit.

    thanks

  34. Philippe on October 16, 2008

    Hi Stickman,

    first of all, I would like to thank you for this great script.
    I first had some troubles installing it, but after refering to your mootools.js file instead of the one I downloaded from mootools.net (v1.1 or v1.2), the problem was fixed.

    Is it possible to get your file of mootools.js? This way I don’t have to depend on your site.

    thx in advance

    Philippe

  35. Joel on November 10, 2008

    When I try to iterate through the $_FILES Array using
    foreach($_FILES as $file), $file['name'] contains an array, not a string. What am I doing wrong?

  36. ananya on December 2, 2008

    i want to retrieve width and height of the attached images so that could put a condition for minimum width and height required for an image. please help me .

  37. Olli on December 4, 2008

    Hi,

    I tried to try your uploader.
    But I’m getting a 404 error :-(

    Any help?

    Cherz Olli

  38. Stickman on December 5, 2008

    Sorry about that: fixed now.

  39. Dena on January 14, 2009

    Hello, any way to validate file size when selecting file to upload and not allow large files.
    Thank you :)

  40. James White on January 19, 2009

    This is really good. The only thing missing is a progress bar, any chance? :)

  41. Nem on February 2, 2009

  42. Diogo on April 13, 2009

    Hi Stickman,

    first of all, excuse me for my bad english.

    it´s really very nice the idea of multifile upload.

    I’m trying to understand how can i submit the selected files, but without success.

    Please, could you show me the code, or explain to me how can I get the paths (i need only the paths, not the documents selected), so let me explain why: I m making a system that takes the path of the file and save it into a D.B., so a need not the binary, but only the path of the selected document.

    thank you again,

    Diogo.

  43. Diogo on April 14, 2009

    Stickman,

    What I want is, anyway, to get the paths in the list of attached documents.
    please, reply me.

    difurlan@hotmail.com

    thank you.

  44. Diogo on April 20, 2009

    Hi Stickman,

    Please,
    Could you tell me how can I extract the full file names of the list? I need only the paths.
    it should be something thing like this:

    $i=0;
    $array[];
    while(list)
    {
    $array[$i]=list[$i]; // ???
    $i++;
    }

  45. Simen on February 4, 2010

    I’ve created a simple PHP script that uploads selected files to your server.
    Note: There are no security validation, so use carefully.

    $count = count($_FILES);
    $count = $count – 2;

    for ($i=0; $i<=$count; $i++) {

    $target = "upimg/";

    $target = $target . basename( $_FILES['defaults_'.$i]['name']);

    if(move_uploaded_file($_FILES['defaults_'.$i]['tmp_name'], $target)) {
    echo "The file ". basename( $_FILES['defaults_'.$i]['name']).
    " has been uploaded";
    } else{
    echo "error uploading file";
    }

    }

  46. xyz on June 14, 2010

    it seems that the remove_empty_element optional parameter is not TRUE by default as it is stated in your comments in the .js file.

    if( $defined( remove_empty_element ) ){
    this.remove_empty_element = remove_empty_element;
    } else {
    this.remove_empty_element = false;
    }

    thanks for the great script, I am using it,
    andreas

  47. Daniel on August 1, 2010

    Hello all, i see this tool very useful, but i don’t know how to get it working with PHP so i can upload the files, plz can someone tell me how? please i really need it.. my email is: daniel_gileta@hotmail.com

    Thanks in advance… (:

  48. Cesar on September 3, 2010

    The exmaple dont work with mootools version 1.2, only work with version 1.1

  49. Toure on May 16, 2011

    I have this code and I really don’t know how to apply yours to it.

    Product Name

    Product’s categories

    Description and Notes

    Product’s ID

    Photo principale

    Photo 2

    Photo 3

    Photo 4

    Photo 5

    Photo 6

    Photo 7

    Photo 8

    Photo 9

    Photo 10

    Additional Keywords (comma separated)

    Anyone who can help me figure it out?
    Thanks in advance.

  50. Tute on June 15, 2011

    I have some problems whit IE9 because this browser doesnt support HTML Elements creation from mootools 1.1
    In mootools 1.2.5 the problem is fixed, but this script only work whit mootools 1.1
    some help?

Leave a comment

Comment Policy: First time comments are moderated. Please be patient.

OpenID

Anonymous