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.

Answer 1

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?

Answer 2

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?