Javascript .innerHTML resets my <input type="file">

Question

I have a problem concerning multiple file uploads in javascript. I am trying to create my own multiple file upload by dynamically adding inputs. This is all easy as pie, but the problem is that whenever I add a new , my previous input-fields of the type "file" get reset.

If I remove the last lines of code where I alter the innerHTML of my parent div, the values of my do not get reset. Does anyone know how this problem can be solved? The javascript code can be found below. Thanks in advance.

if(document.getElementById("upload_queue").innerHTML.indexOf(_item) == -1)
{
    var _row = "<tr id='queue_row_" + items_in_queue + "'>";
    _row += "<td>";
    _row += "<div class='remove_uploaded_image' onclick='remove_from_queue(" + items_in_queue + ")'></div>";
    _row += "</td>";
    _row += "<td>";
    _row += _item;
    _row += "</td>";
    _row += "</tr>";

    document.getElementById("upload_queue").innerHTML += _row;
    document.getElementById("upload_image_" + items_in_queue).style.display = "none";

    items_in_queue++;

    document.getElementById("uploader_holder").innerHTML += 
        '<input id="upload_image_' + items_in_queue + 
        '" name="upload_image_' + items_in_queue + '" accept="image/jpeg" type="file"' + 
        'onchange="add_to_upload_queue()" style="display: inline;" />';
}

It gets reset because you are effectively removing all elements from the parent and creating new ones. — Felix Kling
– Felix Kling, Commented Jul 26, 2011 at 13:39
I was unaware that the += operand removes everything before adding the new element. I thought javascript just appended the line of code at the back of the div, as you would expect when using += — Michiel Standaert
– Michiel Standaert, Commented Jul 26, 2011 at 13:45
innerHTML is doing much more than just appending HTML as string. It takes the new value, parses it as DOM elements and appends (sets) them to the parent. += is basically the same as foo.innerHTML = foo.innerHTML + '....'. I.e. the content of foo is "serialized", the new content is appended and then everything is assigned to innerHTML (which as already mentioned removes all children and parses the passed value). — Felix Kling
– Felix Kling, Commented Jul 26, 2011 at 13:51
I didn't know that. Learned something new today ^^ Thanks for this explanation. — Michiel Standaert
– Michiel Standaert, Commented Jul 26, 2011 at 13:54

Brian · Accepted Answer · 2011-07-26 13:37:49Z

7

Yeah... you're going to want to use appendChild instead of modifying the inner HTML:

var myInput = document.createElement("INPUT");
// do stuff to my input

var myContainer = document.getElementById("uploader_holder");
myContainer.appendChild(myInput);

That's the general gist of what you have to do - let me know if you need somethign more specific, but it looks like you've got a good hold on JS already... You're going to want to do that in almost all cases rather than setting inner HTML... So, building your TR as well... you'll have to append the TD to the TR, you'll have to append the TD with your input, you'll have to append your targeted table with the TR, etc.

answered Jul 26, 2011 at 13:37

Brian

2,78116 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

Javascript .innerHTML resets my <input type="file">

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related