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](http://jsfiddle.net/u8dcV/) with "i" defined. The other issue I see is that you haven't shown us the remove() function either. — j08691, Jan 13 '12 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., Jan 16 '12 at 19:25
I did not include the remove because it works as intended. I think Ann has it correct. — samack, Jan 17 '12 at 04: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](http://ejohn.org/blog/dom-documentfragments/) 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, Jan 20 '12 at 14:16
Does your form have an onSubmit or does your submit button have an onClick? Can you show us that code? — Devon_C_Miller, Jan 20 '12 at 19:21

score 4 · Answer 1 · edited May 23 '17 at 12:34

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 '17 at 12:34

Community

1
1

answered Jan 14 '12 at 07:11

jjclarkson

5,890
6
40
62

this is specificied in my form – samack Jan 17 '12 at 04:11
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. – samack Jan 20 '12 at 17:35

score 1 · Accepted Answer · edited May 23 '17 at 10:24

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?

score 0 · Answer 3 · answered Jan 19 '12 at 14:30

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.

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. — samack, Jan 20 '12 at 00:18

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

3 Answers3