Add onClick to an input being built by JavaScript

Question

I have a file type input button that I am needing to clear completely if the user chooses to and the only safe solution I have found is to completely destroy the input and rebuild it. What I have right now works but it is a "Harp Gun" solution in that it only works once.

Basically, the user has a file input like so:

<input type="file" name="filesToUpload" id="filesToUpload" onChange="makeFileList();" />
<ul id="fileList"><li>No Files Selected</li></ul>

And when they select a file, they may need to clear that completely.

So I have this being built up via appending it on to the filelist:

 function makeFileList() {
    var input = document.getElementById("filesToUpload");
    var ul = document.getElementById("fileList");
    while (ul.hasChildNodes()) {
        ul.removeChild(ul.firstChild);
    }
    for (var i = 0; i < input.files.length; i++) {
        var li = document.createElement("li");
        var fileSize = input.files[i].size;
        li.innerHTML = input.files[i].name +"&nbsp;"+ "<span id=\"lblSize\"></span><input onclick=\"clearFileInput()\" type=\"button\" value=\"Clear\" \/>";
        ul.appendChild(li);
    }
    if(!ul.hasChildNodes()) {
        var li = document.createElement("li");
        li.innerHTML = 'No Files Selected';
        ul.appendChild(li);
    }
};

And to completely destroy the file, the function rebuilds the input like so:

 function clearFileInput(){
    var oldInput = document.getElementById("filesToUpload");
    var newInput = document.createElement("input");
    newInput.type = "file";
    newInput.id = oldInput.id;
    newInput.name = oldInput.name;
    newInput.className = oldInput.className;
    newInput.style.cssText = oldInput.style.cssText;
    // copy any other relevant attributes
    oldInput.parentNode.replaceChild(newInput, oldInput);
};

So I can create the element, add the file type, and use the old input ID, class and name. But I need it to have the same onChange="makeFileList(); behavior as well.

Here is a FIDDLE. Any help is appreciated.

Take a look here: http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery — STT, Oct 09 '14 at 13:18

Sébastien · Accepted Answer · 2014-10-09T13:17:11.900

2

Simply add the attribute.

function clearFileInput(){
    var oldInput = document.getElementById("filesToUpload");
    var newInput = document.createElement("input");
    newInput.type = "file";
    newInput.id = oldInput.id;
    newInput.name = oldInput.name;
    newInput.className = oldInput.className;
    newInput.style.cssText = oldInput.style.cssText;
    newInput.setAttribute("onclick", "makeFileList()");     
    // copy any other relevant attributes
    oldInput.parentNode.replaceChild(newInput, oldInput);
};

edited Oct 09 '14 at 13:17

answered Oct 09 '14 at 13:07

Sébastien

1,749
1
15
19

I think you've attached a wrong listener here, this is for the file picker input so it should be "makeFileList()" in the "onclick" event. – STT Oct 09 '14 at 13:12
You're right STT, thanks for pointing that out. Answer corrected. – Sébastien Oct 09 '14 at 13:17
1

It's cool... it works and is what I needed. Thanks Sébastien! – isaac weathers Oct 09 '14 at 13:19

score 1 · Answer 2 · answered Oct 09 '14 at 13:12

How about this:

function clearFileInput(){
    var oldInput = document.getElementById("filesToUpload"),
        newInput = document.createElement("input"),
        eventHandler = oldInput.onchange;
    newInput.type = "file";
    newInput.id = oldInput.id;
    newInput.name = oldInput.name;
    newInput.className = oldInput.className;
    newInput.style.cssText = oldInput.style.cssText;
    // copy any other relevant attributes
    oldInput.parentNode.replaceChild(newInput, oldInput);
    newInput.onclick = eventHandler ;
};

score 0 · Answer 3 · answered Oct 09 '14 at 13:05

0

Since you've tagged it jquery, you can use event-delegation.

$(document).on('change', '[name="filesToUpload"]', makeFileList);

answered Oct 09 '14 at 13:05

Amit Joki

58,320
7
77
95

This is an overkill, better attach the listeners directly. Also he does not use any jquery in his example. – Alexander Kludt Oct 09 '14 at 13:07
1

@AlexanderKludt he has tagged it jQuery – Amit Joki Oct 09 '14 at 13:08
jQuery is available. Thank you. Let me try that. – isaac weathers Oct 09 '14 at 13:10
@AlexanderKludt see the above comment ^^^^ – Amit Joki Oct 09 '14 at 13:10
@isaacweathers great! – Amit Joki Oct 09 '14 at 13:11
ok, sorry - did not see that. Anyways he should attach the delegated event listener to the container of the items to improve performance. Need to wait until I can change my vote. – Alexander Kludt Oct 10 '14 at 10:28

Add onClick to an input being built by JavaScript

3 Answers3