Loading Javascript and files does not work properly with a click ()

Question

I create a download control in javascript and then using element.click() to open 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 Browser dialog box is suitable for its purpose, but after I select submit in my form, all the files entered in the control will disappear.

If I click "browse", I get a dialog with the file browser, but the file loads correctly.

How to add a file upload control to your form and display a file browser dialog box and still work as intended.

Answer 1

Firefox is the only browser that allows this. Chrome, safari and opera do not allow this in the first place, while IE just tricks you into what it can, but doesn’t actually send the file selected in this way.

I would wrap it up by deleting .click() altogether and adding a new input file to the change event of the previous input, thus, 2 clicks are not needed for each new file (adding input + then a dialog box will open). Example http://jsfiddle.net/APstw/1/

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

Answer 2

The input type "file" 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 in this scenario based on your question, it looks like you are trying to load 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 about your code if you are using jQuery, but if you are trying to use a hidden input form and use clone () to create another as needed?

Answer 3

As stated in Ann.L, you can expect strange behavior when you try to dynamically add a loading control to a page.

I remember that IE, in particular, will fail and will not publish your data (you will see the file name sent in the request, but not the corresponding "byte array").

Why don't you switch the visibility of the download field, and not create it from scratch? Thus, the page "owns" the control, and the likelihood that your function will work. It remains only to update your container with a new downloaded file.