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

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?