problem in file upload

Question

I have the following markup:

  <select multiple="multiple" id="targetFilesList"  style="width:200px;height:110px;">
   </select>
   <input type="button" value="Get" id="btnGet" />

and following javascript:

    $(function()
    {
        $('#btnGet').click(function()
        {
            var fileupload = $("<input type='file' name='filetoupload' style='visibility:hidden;'/>");
            $('body').append(fileupload);

            fileupload[0].onchange = function()
            {
                $('#targetFilesList').append('<option >' + fileupload.val() + '</option>');
                return false;
            }
            fileupload.click();
        });
    });

Scenario is that i have to upload multiple files and once user has chosen the file to be uploaded i have to show the file name to user.Then,on submitting the form i will upload all the files.For this,on clicking the get button i am adding a fileupload control dynamically and initialise onchange event of the fileupload control just added. The problem in chrome 12 on clicking get button fileupload control does not get opened but in firefox4 and ie8 it is working. Any idea why?

Not able to reproduce.. working on Chrome 12 for me. JSfiddle link: jsfiddle.net/gfosco/JKK4w — Fosco
– Fosco, Commented Jun 9, 2011 at 16:57
sorry Fosco.I forgot to mention that if i place alert then is is working and if i remove it then it is not. — facebook
– facebook, Commented Jun 9, 2011 at 17:00
possible duplicate of Javascript: Simulate a click in <input type="file"> — epascarello
– epascarello, Commented Jun 9, 2011 at 17:02

Niklas · Accepted Answer · 2011-06-14 13:19:04Z

17

+50

To get it working on Chrome 12, you can just add it into a window timeout of 0, like this:

window.setTimeout(function(){
   fileupload.click();   
},0);

Why exactly it behaves like this, I am not sure. The first time I encountered the problem I tried it with a longer interval, reducing it all the time to see how low you could get it, until I noticed it doesn't even need a delay. The obvious answer would be that it isn't actually ready in DOM by the time you trigger the click (element is there, but is the appropriate events for it?).

example: http://jsfiddle.net/HgEga/

answered Jun 14, 2011 at 13:19

Niklas

30k5 gold badges54 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Martin Jespersen Over a year ago

The reason for this behaviour is due to the way chrome optimizes page re-rendering according to the js runtime. Since the whole thing is single threaded, and a setTimeout forces a callstack-break, you effectvly tell chrome "now it is time to re-render the page" when you do the settimeout. You can fuind this problem in all major browsers in various situations when you append new elements to the DOM while running js code around the append.

yves amsellem · Accepted Answer · 2011-06-20 17:02:43Z

0

Doing this kind of code yourself can be a pain. Maybe taking a look to an existing multiple file upload jQuery plugin will help.

answered Jun 20, 2011 at 17:02

yves amsellem

7,2547 gold badges46 silver badges70 bronze badges

Collectives™ on Stack Overflow

problem in file upload

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related