Using Javascript to dynamically generate file upload boxes

Question

I'm trying to write an html/javascript set (to be interpreted in PHP) that allows the user to select a file from a , and then as soon as that file is selected it displays another .

function displayFileInput() {
var counter = document.getElementById("counter").value;
var n = (parseInt(counter)+1).toString();
var element = document.getElementById("container");
var string = "<br /><input type = \"file\" name = \"file"+n+"\" onchange =\"javascript:displayFileInput()\"  />Default:<input type = \"radio\" name = \"main_picture\" value = \""+n+"\"  />";
element.innerHTML = element.innerHTML + string;
document.getElementById("counter").value=n;
return false;}

The HTML code I'm using is this:

<form enctype=\"multipart/form-data\" method = \"post\" action=\"newPost.php\" id = \"rental_form\">
<input type = \"text\" name = \"rent_name\" size = \"30\" value = \"Insert your post title here\"/><br />
<textarea rows= \"20\" cols = \"100\" name = \"rent_posttext\">
Insert your post text here!
</textarea><br />
<div id = \"container\">
<input type = \"file\" name = \"file1\" onchange = \"javascript:displayFileInput()\" />
Default:<input type = \"radio\" name = \"main_picture\" value = \"1\"  />
</div>
<input type = \"submit\" />
<input type = \"text\" id = \"counter\" value = \"1\" style = \"display:noe;\">

Everything seems to work at first, but the problem is this: as soon as I select a file, it correctly displays another file box, but gets rid of the information in the previous file. For instance, in Google Chrome, next to the "choose file" input button it will say "No file chosen."

When I submit the form to my PHP script, it recognizes the files, but registers a "4" error for each one which means that no file was uploaded. Somehow, it's getting rid of all the file information when it dynamically generates a new file input. Help!

aroth · Accepted Answer · 2011-07-18 02:06:26Z

4

Your issue is being caused by the part that goes like:

element.innerHTML = element.innerHTML + string;

This is completely replacing the content of your element, and wiping out any previous user selection(s) in the process. You will get a better result if you use appendChild instead of innerHTML = ...;, but that will require re-working your code a bit.

Something like this should work:

function displayFileInput() {
    var counter = document.getElementById("counter").value;
    var n = (parseInt(counter)+1).toString();
    var element = document.getElementById("container");
    var newInput = document.createElement("div");
    var string = "<input type = \"file\" name = \"file"+n+"\" onchange =\"javascript:displayFileInput()\"  />Default:<input type = \"radio\" name = \"main_picture\" value = \""+n+"\"  />";
    newInput.innerHTML = string;
    element.appendChild(newInput);
    document.getElementById("counter").value=n;
    return false;
}

Example: http://jsfiddle.net/dsKFr/

Also, you don't need to escape all the quotes in your HTML markup. Just the JavaScript version (and even there you could get around it by alternating single quotes with your double quotes).

edited Jul 18, 2011 at 2:06

answered Jul 18, 2011 at 2:00

aroth

54.9k22 gold badges142 silver badges178 bronze badges

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

1 Comment

James Over a year ago

Thanks so much for your reply! It works! This has been bugging me for days!

Collectives™ on Stack Overflow

Using Javascript to dynamically generate file upload boxes

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related