Updated: Upload multiple files with a single file element

Published October 2nd, 2005

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

[ 10th October 2005: Updated again 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. ]


A bug in my upload multiple files with a single file element script was pointed out by ‘neal’ (it was possible for it to create more than one element with the same name). I’ve now fixed it, so if you downloaded it before 2nd October then please do so again — it’s here.

I’ve added an example HTML file too, so I hope it should now be a simple matter to get it working in your own pages.

Get a Trackback link

66 Comments

  1. steno on October 2, 2005

    can you post the php file for the back end as well?

  2. Eric Biesterveld on October 4, 2005

    Yeah, the php file would be helpful! Thanks.

  3. Bogdan Manolache on October 4, 2005

    Hi!

    I don’t know if this is already implemented but here you go:
    Is there a way for the maximum size to be setup when the user selects the file? By default it should be 2M (like PHP’s default). This way the users won’t exceed the upload limit.

    What do you think?

    PS: I haven’t found a way to contact you (the author) directly.

  4. monkeypup on October 7, 2005

    I too was looking for a way to contact you. I’d like to use this to set up a multiple upload function in a WordPress page. But I am a coding idiot. Any suggestions for doing this?
    Thanks! It looks cool as heck!

  5. Stickman on October 8, 2005

    Re: contacting me. There’s a contact form here. I really should bring it into style with the ‘new’ site.

    Re: the PHP file (catch.php). Posting it would help no-one, since all it consists of is a couple of lines to print out the $_FILES array so that I could check if the upload worked.

    Re: limiting maximum file size. A lot of people suggest you use a hidden form element that looks like this (must be before the input element(s)):


    <input type="hidden" name="MAX_FILE_SIZE" value="[a number in bytes]" />

    …but as far as I can tell it doesn’t actually seem to cause any difference in the behaviour of the browsers I tested (Firefox 1.0.7, IE6.xx and Opera 7.x) — so a too-big file will still be uploaded, but PHP spits an error (ie. it overrides PHP’s internal file size limit). So it doesn’t really seem to be of much use.

    For usage, please take a look at the example HTML file. There’s nothing special that needs to be done for WordPress, it should work as-is (it did for the demonstration in the original post).

  6. Shawn on October 8, 2005

    I altered my via PHP and with the hidden form input.
    So, in addition to what is written above you can add this to your .htaccess file:
    php_value post_max_size 10M
    php_value upload_max_filesize 10M
    (I needed to allow larger uploads)

    This will allow you to raise the limit on what PHP will allow to be uploaded, that is, if you’re allowed to override your php.ini settings. That’ll depend on your host.

  7. Shawn on October 8, 2005

    Figures – I just looked over at the original post and you mention this method.

  8. Nawaz on October 20, 2005

    This is the most impressive implimentation i have seen so far for multiple uploads, but can we use some interface like MSNPhotoUpload tool where you can actually see the images in thumbnail view and select them with checkboxes and then upload all those selected? any ideas:)

  9. Stickman on October 20, 2005

    Thanks:)

    It’s possible to do that in IE — basically, you just add an img element and use the name of the file as the src property. But (if I recall correctly) Firefox won’t allow it — you get an access violation error. I’m not sure about Safari.

  10. Colin on October 21, 2005

    Hi,
    This is a great file uploader but I would like some advice on extending it slightly. I am developing a page that allows people to upload pictures to a blog and would like to enable users to also submit some text that can be used as the alt text for the picture. What would be the best way to extend this code so that the lt text can be gathered with the picture in the same way?
    Thanks

    Colin

  11. Geir Tore on October 24, 2005

    Hi,
    I’m trying to make an onsubmit validation. This validation is supposed to check if it’s either .jpg or .gif, but I get only ‘file_1′ value. I have set max files to 3, and can’t get the two other values. Is these file names put in a sort of array or something?

  12. Chris on October 28, 2005

    i have a strange thing, when i post my form
    in ie :
    Array (
    [file_2] => Array ( [name] => [type] => [tmp_name] => [error] => 4 [size] => 0 )
    [file_1] => Array ( [name] => 2.jpg [type] => image/pjpeg [tmp_name] => M:/EasyPHP\tmp\php78.tmp [error] => 0 [size] => 55783 )
    [file_0] => Array ( [name] => 1.jpg [type] => image/pjpeg [tmp_name] => M:/EasyPHP\tmp\php79.tmp [error] => 0 [size] => 55783 )
    )

    in firefox for the same files :
    Array (
    [file_0] => Array ( [name] => 1.jpg [type] => image/jpeg [tmp_name] => M:/EasyPHP\tmp\php7A.tmp [error] => 0 [size] => 55783 )
    )

    as you see, there is 4 files (3 real + 1 blank) in IE and only 1 file for firefox.

    have you the same trouble ? any idea to solve this ??
    thx in advance
    Chris

  13. Sanjay on October 31, 2005

    Can I use this for ASP.NET?

  14. Chris on November 2, 2005

    ok i found my problem .. if i put my in my it’s fucked, if i put outsise the it work ….
    thx for the help..

  15. Chris on November 2, 2005

    ok i found my problem .. if i put my FORM balise in my TABLE balise it’s fucked, if i put outsise the TABLE it work ….
    thx for the help..

  16. a on December 13, 2005

    BUG: reverses order of files uploaded, pain in the ass

  17. Max on December 16, 2005

    Hello!
    Neat implementation, but it creates an unwanted (and empty) $_FILES array element, usually with error n. 4 (‘no file’). Is that undoable? How can I fix it?

    thank you very much and cheers!

  18. Raju on January 20, 2006

    Hi,
    Good work. But how do we know what is the maximum number of File input to iterate. For say have max of 5 now the users keep uploading and deleting then the File input can reach upto 15. But how do you capture that File_15 input. Please help.
    Raju

  19. 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

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

  21. Jon on March 4, 2006

    I am trying to capture the full path of uploaded files. This application displays the full path after you browse for a file, but then seems to post only the file name itself. Can you tell me how I could access the full path in the script which reads the form?

  22. Jussi on March 12, 2006

    This excellent script breaks with IE7 (beta2).

    After adding a file, every further click on “Remove” or “Browse…” creates another visible “Browse…” box and javascript errors.

  23. masoud on March 27, 2006

    How can I limit file size and extension?

  24. Fitz on April 15, 2006

    I am using Coldfusion MX 7 and trying to use the multi uploader. Does anyone know if this is possible and if so how would the submit page look? any help would be greatly appreciated

  25. 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

  26. matthijs on May 22, 2006

    is their a way for handling existing files? now it is possible to select a file many times.

  27. Weston on June 12, 2006

    Awsome Script Just what I was looking for, I just got it set up.

    I made some small adjustments…

    • Styled buttons
    • Just displays the file name not the whole path.

    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 i,len;
    var new_row = document.createElement( ‘div ‘ );
    var new_row_button = document.createElement( “” );
    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;
    }
    i=element.value.length;
    while(i>0 && element.value.charAt(i)!=’/’ && element.value.charAt(i)!=’\\’) –i;
    if(i)
    {
    ++i;
    new_row.innerHTML=element.value.substring(i,element.value.length);
    }
    else new_row.innerHTML=element.value;
    new_row.appendChild( new_row_button );
    this.list_target.appendChild( new_row );
    }
    }

  28. Carsten on June 15, 2006

    I am using this script in an image upload tool that I might post later here,
    it is very nice to give the user the option to upload more pictures at a time.

    To fix the problem with the extra file input field that is also submitted with the form,
    you can put the following code (PHP) code in your script to remove it:

    // Remove an element from the beginning of the array
    // Note: don’t do $_FILES = array_shift($_FILES);
    // You will get the extra input field returned that you wanted to get rid of anyway.
    array_shift($_FILES);

    // Reverse the fixed array to upload the files in the order the user selected them
    $_FILES = array_reverse($_FILES);

  29. Ciaran on July 20, 2006

    Hi I had the idea that you can show previews of the images in the list by just inserting an img with src pointing to the users hard drive but I can’t edit te code cause I don’t know enough javascript. Can anyone help me out? It would be a pretty cool feature

    Ciaran

  30. Blake on July 30, 2006

    I am having the extra “empty” input as well and I am using array upload… file_1[] as the element name. The array_shift should work for the normal implementation, anyone got a solution for array element?

  31. Blake on July 30, 2006

    hmmm… the only think I could think of now when element is an array… using PHP is this… thx Carsten for the solution on array_shift.

    $files = $_FILES['file_1'];

    array_shift($files['name']);
    array_shift($files['type']);
    array_shift($files['size']);
    array_shift($files['error']);
    array_shift($files['tmp_name']);

    kinda hacky. ^^

  32. paul on August 30, 2006

    Hi,

    Ive replaced my standard script with westons script but it produces errors “MultiSelector is Undefined”… any ideas?

  33. homer on September 5, 2006

    Hi

    i try to fetch the content of file_1[]

    and the result si empty …

    for ($i=0;$i

  34. Xavier on October 5, 2006

    I have multiple photo entry but it have different logic. I am entering multiple children data into tabs. When a child data entry is going on then I am putting the file object name as my child ID number and the renaming new file object to its original name “photo_link”. But when I saving I mean posting to server then I only get one file object in $_FILES array which one was the first object or first child photo. Even I can not determine the next file object through Javascript. Let me know why I am getting only one file object and not the other. Here is my fucntion:

    function MultiSelector( list_target, max ){

    // 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;
    };

    /**
    * 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 is file name?
    element.name=’photo_link';
    element.id=’photo_link';
    element.title=”Photo Link”;

    //alert(element.name);
    // Add reference to this object
    element.multi_selector = this;

    // What to do when a file is selected
    element.onchange = function(){
    if(document.getElementById(“childid”).value==”){
    alert(‘Please select child for a center’);
    return false;
    }

    // New file input
    var new_element = document.createElement( ‘input’ );
    new_element.type = ‘file';
    new_element.className=’crdisappear';
    new_element.size=’1′;
    //new_element.value=this.value;
    // Add new element
    this.parentNode.insertBefore( new_element, this );
    //parent.insertBefore(node, referenceNode.nextSibling);

    // 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.display = ‘none';
    this.style.left = ‘-1000px';

    };
    // 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 ){
    //if(element.value!=”) parse_photo_file(element);
    var jschildid = document.getElementById(“childid”).value;
    // Row div
    var new_row = document.createElement( ‘div’ );
    new_row.className=’crdatanoborderbold';
    // Delete button
    var new_row_button = document.createElement( ‘input’ );
    new_row_button.type = ‘button';
    new_row_button.value = ‘Delete';
    new_row_button.className=”crphotobuttonsmall”;
    // References
    new_row.element = element;
    if(element.id!=jschildid){
    element.id=jschildid;
    element.name=jschildid;
    }
    element.title=”Photo Link”;

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

    var cnt=this.parentNode.element.parentNode.childNodes.length;
    for(var i=0; i0 && element.value.charAt(i)!=’/’ && element.value.charAt(i)!=’\\’) –i;
    if(i){
    ++i;
    new_row.innerHTML=element.value.substring(i,element.value.length) + ” will be saved “;
    }
    else{
    // 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 );
    };

    };

  35. Xavier on October 5, 2006

    I was clearing the DIV contect when a child is added to tabs and because I like to show only one file element into that DIV. I was calling this command from other button: document.getElementById(‘files_list’).innerHTML=”;

    Thats the reason I lost the other file object. But why this is happening. How can I recover it ?

  36. Xavier on October 5, 2006

    Aftrer selecting a image file into file object I am losing the element as an file object. it becomes unknown object.

  37. Xavier on October 5, 2006

    I can find the object by: document.getElementById, but not as element:

    for(var i=0; i

  38. Xavier on October 5, 2006

    The above code is not fully finished: So I submit it again. I can find the object by: document.getElementById, but not as element:

    for(var i=0; i

  39. Xavier on October 5, 2006

    I submit it again. I can find the object by: document.getElementById, but not as element:

    for(var i=0; i form.elements.length; i++){
    if(form.elements[i].type==’file’) alert(form.elements[i].name);
    }

    I only get first file element in the above loop, but I have more that three file element in my form and I can not find those element through the above loop. What is the problem?

  40. Xavier on October 12, 2006

    OK, I got the solution of my problem. That was my form and table was not designed DOM structure, and thats why I was unable to create file object into proper parent element. Thanks for your code. Its a great help.

  41. Jamin Collins on November 13, 2006

    I’ve found your multi-file upload script to be very useful. Would it be possible to get a statement regarding the licensing of this script? I would like to include it in a web app that I’m working on but would need some indication of how you intend for it to be released/licensed before I could do so.

    Feel free to drop me an e-mail about this.

  42. Stickman on November 13, 2006

    As stated in the code: “Use this however/wherever you like, just don’t blame me if it breaks anything”. Meaning, there is no limitation on its use. However I would politely request that you leave the credit in the code (with the link to this site).

  43. Steve Lippert on November 14, 2006

    I would like to clean up the DIV area by using a simple table, but I have NO prior experiance with Javascript. I like EVERYTHING else about the script and it works great in my .Net 2.0 Project, but the File name and “Delete” button are way to close. Any help is appreciated!

  44. Sandeep Vincent on December 1, 2006

    Hi,
    Man u rock ,,, I need your help as i m under strict deadlines to achieve. I am using this code and the files selected though browse file input, are displayed in a table cell. Could u please help me with a code to upload file to the database, i don’t know how to pick those files from the table cell ,, please help i would be really thankful to you..

  45. Sandeep Vincent on December 1, 2006

    here’s my code:::

  46. Azhar on December 4, 2006

    How to implement it in ASP.Net. Actually my scenerion is as following:

    I have to create questions. There is no limit to create question. Its upto the user how many questions he wants to create. And some question require snap too. So for the questions I make hidden fields and I make the , separated string which I break based on comma on server side and save in database. Similarly I want to put binary string of image in hidden field. And at the end when I press Submitt button, through the loop I save those strings one by one. Now using the stickman code how can access the .postedfile property at server side? I am successful till selecting as many files as user wants but I am fail to access the selected posted files at server side to create Byte string. Plz help………….if any one know something about it.

    Thanx in advance

  47. Testing Testing on December 27, 2006

    If you want to display only the file (and not the full location from your harddisk)
    add this:

    // Split to the file only
    var myArray = element.value.split(‘\\’);

    // Set row value
    new_row.innerHTML = myArray.pop()+’ ‘;

    (the   is to make a _ between the filename and the delete button)

  48. Testing Testing on December 27, 2006

    so … ‘ ‘ = & n b s p ; cuz i cant post it without it screwing up

  49. Chris on December 31, 2006

    I am working on a gallery program to upload my images and I found this script which is awesome. but I found that when you upload an image file that has a ‘ (quote) such as ran’dom_pic.jpg when file gets uploaded the file name that gets returned is dom_pic.jpg. I am using the post form method and when I call this in php –> print $_FILES['file_0']['name']; this is what I get –> dom_pic.jpg. is there some way to escape this or use some sort of wrapper that would preserve file name so that it does not get truncated for some reason?

  50. Bob on January 19, 2007

    I think these scripts are going to work great! I was able to exchange the delete button with a trashcan icon, but I’d like to put the icon in front of the filename. I’ve been messing with the scripts for a couple hours now trying to figure out how to make it work, but no luck. Thought I’d see if anyone else knows?

    I’d also like to set the width of the input file element to 435px, but the only way I’ve been able to do that seems to using the style attribute within the tag itself. Trying to apply a class to the element, as described above, isn’t cutting it. Any ideas?

  51. Bob on January 19, 2007

    ok, I figured out how to set the width of the input box by adding

    new_element.style.width = ‘435px';

    immediately below

    new_element.type = ‘file';

  52. Sebastian Koch on January 24, 2007

    Hi,

    ich just found out this script and i am really thankful for it because i searched for something like this for a long time.

    i implemented it into a development state of the current site (fsphost) and it works but now i want to adjust the style like with an image button and stuff like this, the basic style things do work right now.

    here is my problem:

    i want to put the delete-button into a div layer to give hime the float: right attribute so i can position him on the really right side of every particular row.. when add this button to the div the javascript is not working anymore.

    i think i know why because the parentNode is not the same anyomore. i tried to fix this but after 3 hours of trying i am not able to get this work.

    i would love to get it like this

    deletebuttton>

    i think the script is searching fot the parentNode but does not find the text as the element to delete.

    here is my code how i got it right now… i am only posting the function for removing rows.

    this.addListRow = function( element ) {
    var new_row = document.createElement( ‘div’ );
    new_row.className = ‘fileuploader_list';
    //i am creating my new button-div-laver
    var new_row_divbtn = document.createElement( ‘div’ );
    // some formatting stuff (in this will be the float: right; attribute
    new_row_divbtn.className = ‘fileuploader_list';
    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() {
    // the parser says that the error is in this line (i was not able to figure out where to add the
    // “parentNode.element” statement, hopefully you guys can help / explain it to me
    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;
    //i am adding the div for the button
    new_row.appendChild( new_row_divbtn );
    //i am appending the button to the divbtn
    new_row_divbtn.appendChild( new_row_button );
    this.list_target.appendChild( new_row );
    };

    thanks in advance
    sebastian

  53. Sebastian Koch on January 24, 2007

    i posted something last night because i got troubles with the styling of the row element. where is my entry lol?

  54. Sebastian Koch on January 28, 2007

    Can anyone help me please?

    I just need a way to position the button on the really right side and the filename on the left, if it would be possible to put just the delete buttton into an element i would be able to assign a class and style it with css.

    please help me i dont know how to solve this issue!

  55. Mark on February 20, 2007

    Sebastian, try this (places div around button and gives it a class of ‘rowDelBtn’):

    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.onclick= function(){

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

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

    // 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;

    // Add button
    var span = document.createElement( ‘div’ );
    span.className=’rowDelBtn';
    span.appendChild( new_row_button );
    new_row.appendChild( span );

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

    };

  56. LTSpeed on March 27, 2007

    How can I pre-populate the list? This didn’t work…

    function MultiSelect(){
    var multi_selector = new MultiSelector(document.getElementById(‘files_list’),5);
    multi_selector.addElement(document.getElementById(‘file_element’));
    multi_selector.addListRow(‘test.jpg’);
    }

    …it creates the line, but the text is ‘undefined’, not ‘test.jpg’.

  57. LTSpeed on April 4, 2007

    I have a 99% working solution with greatly improved formatting/functionality with little effort, but this site won’t let me upload anything of any consequence. It’s a shame because I’d like to share it and could really use your help in debugging the one remaining issue: it won’t let me delete the ones I pre-populate.

    Any ideas why it’s so difficult for some people to post things here?

  58. Richard on April 6, 2007

    hiya, I tested the upload script with some foreign languages. Arabic and asian type fonts. But he changes the filename to something weird. Is there any way for me to fix this?

  59. Adam on May 27, 2007

    Is it possible to modify this script so it only shows the file name and not entire path?

    I tried westons code, as othe rpeople ahve, but something must have gotten broken through posting, even after changing all the quotes to normal quotes his script refuses to function at all. I’d really lvoe to use this script as it’s wicked and you’ve dona an amazing job, I’d just prefer to make the list al little less cluttered.

    cheers!

  60. Rob on June 27, 2007

    anyone tried to incorporate this into pl/sql development?
    I can’t figure out the input parameter type for the html handler page.
    I tried the owa.vc_arr but still doesn’t work.
    any help would be appreciated.

    Cheers

  61. Thomas B on August 21, 2007

    Just to let you know it has stopped working in safari 2 but works fine in safari 3.

  62. Dee on October 25, 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.

  63. JustSomeGuy on March 1, 2008

    We modified this script for our application where we need to create more than one file list on the same page.

    Call it like this:


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

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

    var multi_selector = new MultiSelector( document.getElementById( ‘files_list2′ ),’thesecondone’, 10 );

    multi_selector.addElement( document.getElementById( ‘my_file_element2′));

    /**
    * 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, output_filename, max ){

    var output_filename = output_filename;
    // 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;
    };

    /**
    * 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 = output_filename + ‘_’ + 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
    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';

    };
    // 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.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.innerHTML = element.value;

    // Add button
    new_row.appendChild( new_row_button );

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

    };

    };

  64. kat on July 18, 2008

    Hi,

    I’ve downloaded your script, downloaded mootools 1.2, tried implementing it and no go.
    I click Browse, select the file and nothing. Just goes back to having the filename in the input element.
    I ended up just using the example.html to see if some of my other code was conflicting and it still doesn’t work.
    I’m not very good with javascript so forgive me if I’m missing something plainly obvious.
    any help?

  65. Kobus Myburgh on July 24, 2008

    Hi,

    Did anyone every write a complete PHP back-end script for this wonderful utility? I am a JavaScript klutz, so I don’t even know how to link this with a PHP script…?

    Regards,

    Kobus

  66. Kobus Myburgh on July 24, 2008

    Hi kat,

    I had the same problem. I viewed example.html and saw that it includes the script file mootools.js, and after renaming my downloaded mootools script (which had a different name) my example worked fine.

    Now if someone would just pretty please share their PHP back-end script for this nifty tool, I’d be a very happy person :-)

    Regards,

    Kobus

Leave a comment

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

OpenID

Anonymous