File inputs reset on adding new fields.

[Bennett 🚀]

Okay so, pImg, my image host, has a multi-upload javascript function. So, it will always have one file input as the input that's value doesn't get reset. But, when you add other fields, and may choose files for an input field other than the first, those fields are reset. Try it for yourself: pimg.in/

Click the "Add 1", select files for both of those, and then click "Add 1" again. The Second field should disappear.

How can I fix this? I'm using jQuery to get the new fields, because just innerHTML+= did the same thing.. and I just tried jQuery to see if it would help. :X

Thanks in advance.

[Jordan]

Here's my guess: Since you're using innerHTML, it's having to reparse the division element you are storing the additional upload fields in. Instead, dynamically create a new input field and append it to the division element.

var input = document.createElement("input");
input.type = "file";
// other properties here

document.getElementById("others").appendChild(input);

After looking at your source, this seems to be the case since your input fields are added into the "other" element, but the initial upload field is not inside of it therefore it never gets parsed more than once.

Select a File: <input type="file" name="upload[]" /><br />
<div id="others"></div>

[Bennett 🚀]

I had tried appendChild, but it didn't work for me somehow.. and now it does work! Thanks Jordan! Saved me a headache!

[Jordan]

It wasn't working for you at first because you were doing something like:

document.getElementById('others').appendChild(text+select);

But that doesn't make sense for the appendChild function because it takes a reference to a node as a parameter, not a string of text and a reference (fyi, a reference is basically a pointer/memory address to the object stored in memory, which allows us to not have to copy the object we are passing in which could be slow).

That's why you had to call appendChild multiple times, and store your text inside a node which you could then refer to.

document.getElementById('others').appendChild(text);
document.getElementById('others').appendChild(input);
document.getElementById('others').appendChild(br);

And just so you know, if you don't want to create a font element to store text in (since the tag is deprecated), you can just append a new text node.

document.getElementById('others').appendChild(document.createTextNode("Text"));

The text will inherit the css styles that have been given to the parent element.

[Bennett 🚀]

Okay, thanks again.
So now, here's a kicker. If i am to do something like:
document.getElementById('others').removeChild(somevar);
I get some unhandled error.

How could I get a div to surround each input? or keep track of them so I can have a remove function?

[Jordan]

The "somevar" variable may not exist within the "others" division node which is why you are getting an error.

If you are wanting to add and remove, you'd need something like this.

function theAddFunction() {
        var input = document.createElement("input");
                input.type="file";
                input.name="upload[]";

        var div = document.createElement("div");
                div.appendChild(document.createTextNode("Select a File:"));
                div.appendChild(input);

        document.getElementById("others").appendChild(div);
}

function theRemoveFunction(indexOfTheDiv) {
        document.getElementById("others").removeChild(
                document.getElementById("others").getElementsByTagName("div")[indexOfTheDiv]
        );
}

[Bennett 🚀]

Well, that's a handy little function.. thanks again! Now I just have to wrap the Text and input fields? Or
var div = document.createElement("div");
div.appendChild(document.createTextNode("Select a File:"));
div.appendChild(input);
already does that?

[Jordan]

Yeah, the text and input field are getting wrapped inside the division element.

[Bennett 🚀]

Okay, cool. I think I'll substitue my addMore function with this:

function theAddFunction(a) {
for(x=0;x<a;x++){
       var input = document.createElement("input");
               input.type="file";
               input.name="upload[]";

       var div = document.createElement("div");
               div.appendChild(document.createTextNode("Select a File:"));
               div.appendChild(input);

       document.getElementById("others").appendChild(div);
}
}

And then just add your remove function. Thanks again.

[Jordan]

Glad to help, let me know if you need any more help.

[Bennett 🚀]

Woo! It works! Thanks so much!

[Jordan]

You're welcome.

Actually there's a problem I didn't think about.

If you delete a few fields the remove function won't work since it has the wrong index. Instead of passing in an integer, you'll need to pass in a reference to the div that contains the text, input field, and anchor tag.

function theRemoveFunction(referenceToParentDiv) {
        referenceToParentDiv.parentNode.removeChild(referenceToParentDiv);
}
function addMore(a) {
for(x=0;x<a;x++){
var input = document.createElement("input");
input.type="file";
input.name="upload[]";
var link = document.createElement("a");
link.href="javascript: theRemoveFunction(this.parentNode);";

[Bennett 🚀]

Ohp. Okay then. I'll change that quick.

EDIT: Doesn't work :X

[Jordan]

link.href="javascript: theRemoveFunction(this.parentNode);";

Try changing that to:

link.href = "javascript: void(0);";
link.onclick = function() {
    theRemoveFunction(this.parentNode);
}

[Bennett 🚀]

There we go.. thanks again Jordan.