Multiple file uploader: Mootools version
Published July 2nd, 2007UPDATE 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.
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?
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 !
Rob: The PHP timeout is not counted when uploading files to a script - it is called after upload is complete.
Manon on August 9, 2007
It’s really a great script for uploading files, Cool~~
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
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.
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
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
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!
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
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.
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
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?
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
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.
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.
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.
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.
kermit on March 3, 2008
Still doesn’t work with firefox :/
It makes this script useless, even it looks great in IE.
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:
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:
“
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
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
betty on July 9, 2008
is there an easy way to add another text input field to add a description for the file?
kakimoto on July 16, 2008
hi there
Can you please confirm that this mootools version is also free in terms of licensing?
thanks
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.
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?
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!
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
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.