Javascript and file upload not working as expected with click()

Question

I am creating a upload control in javascript and then using element.click() to bring up the file browser dialog.

    function add(type) {            
        var element = document.createElement("input");
        element.setAttribute("type", type);
        element.setAttribute("value", type);
        element.setAttribute("name", type);            
        element.setAttribute("id", "element-" + i);
        var removebutton = document.createElement('a');
        var removeimage = document.createElement('img');
        removeimage.setAttribute("width", 15);
        removeimage.setAttribute("height", 15);
        removeimage.setAttribute("class", "removebutton");                                                
        removeimage.src = "/Content/Images/redx.png";            
        removebutton.appendChild(removeimage);
        removebutton.setAttribute("id", "remove-" + i);
        removebutton.setAttribute("onclick", "remove(" + i + "); return 0;");
        var newfile = document.getElementById("uploadhere");
        //newfile.appendChild(removebutton);
        newfile.appendChild(element);
        newfile.appendChild(removebutton);
        element.click();
        i++;                     
    }

The file broswer dialog comes up as intended but after I select the submit on my form any files entered into the control dissapear.

If I click the "browse" I get the file broswer dialog but the file uploads correctly.

How can I add a file upload control to my form and have it display the file broswer dialog and still work as intended.

Where is your variable "i" defined? Here's a rough jsFiddle with "i" defined. The other issue I see is that you haven't shown us the remove() function either. — j08691
– j08691, Commented Jan 13, 2012 at 20:00
I always understood that you couldn't script the upload element because if you can do that you can potentially do a lot of privacy-violating tricks. But perhaps that has changed in the years since I looked into it? — Ann L.
– Ann L., Commented Jan 16, 2012 at 19:25
I did not include the remove because it works as intended. I think Ann has it correct. — samack
– samack, Commented Jan 17, 2012 at 4:11
Just as a side note, you are creating and appending DOM elements one at a time, this will cause the browser to reflow many times. Look into creating a document fragment using document.createDocumentFragment and then adding your new elements into the fragment, finally adding the fragment itself into the correct position in the DOM itself. This will only trigger one reflow and is more efficient. — James Shuttler
– James Shuttler, Commented Jan 20, 2012 at 14:16

Community · Accepted Answer · 2017-05-23 12:34:48Z

4

The "file" input type must include the attribute:

enctype="multipart/form-data"

when the post method is specified. See this: http://www.w3.org/TR/html4/interact/forms.html#edef-FORM

There may be other limitations also in this scenario, based on your question it sounds like you might be trying to do the upload in an AJAX call. Take a look at the answers here: https://stackoverflow.com/questions/3686917/post-to-php-with-enctype-multipart-form-data

Not sure from your code if you're using jQuery but if you are have you tried having an input form hidden and using clone() to create another one as needed?

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Jan 14, 2012 at 7:11

jjclarkson

5,9647 gold badges42 silver badges63 bronze badges

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

2 Comments

samack Over a year ago

this is specificied in my form

samack Over a year ago

I did not post all of my code... while I appreciate people upvoting this comment because it is something to check this is not the solution.

Community · Accepted Answer · 2017-05-23 10:24:23Z

1

+50

Firefox is the only browser that allows this. Chrome, safari and opera do not allow it in the first place while IE is just fooling you that it can but won't actually submit the file selected this way.

I'd work around it by removing the .click() altogether and adding a new file input on the change event of previous input, this way it doesn't require 2 clicks for each new file (adding the input + then opening dialog). Example http://jsfiddle.net/APstw/1/

Also see jQuery : simulating a click on a <input type="file" /> doesn't work in Firefox?

edited May 23, 2017 at 10:24

CommunityBot

11 silver badge

answered Jan 20, 2012 at 7:49

Esailija

140k24 gold badges280 silver badges328 bronze badges

Comments

Guillaume Raymond · Accepted Answer · 2012-01-19 14:30:19Z

0

As pointed out by Ann.L, you can expect weird behavior when trying to dynamically add an upload control to a page.

I remember that IE in particular will silently fail and won't post your data (you will see the filename posted in the request but no actual "byte array" corresponding to it).

Why don't you toggle the visibility of the upload field instead of creating it from scratch? This way, the page "owns" the control and chances are that your function will work. The only thing left to do is to refresh your container with the newly uploaded file.

answered Jan 19, 2012 at 14:30

Guillaume Raymond

586 bronze badges

1 Comment

samack Over a year ago

because I am allowing whomever is using the form to add another file to be uploaded as needed. I could in theory make a bunch of upload options and hide them all but that seems like a very bad plan.

Collectives™ on Stack Overflow

Javascript and file upload not working as expected with click()

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related