CODEWITHSUNDEEP
javascripthtml
Surender Thakran
Surender Thakran

Reputation: 4054

Why can't I select same file again immediately after selecting it once from a file selection dialog box?

Consider the following HTML:

<input id="file" name="file" type="file"></input>
<div id="filenames"></div>

and the associated javascript:

window.onload = function() {
    var el = document.getElementById("file");
    el.addEventListener("change", fileSelected, false);
}
function fileSelected() {
    var gcUploadFile = document.getElementById("file").files[0];
    var filename = gcUploadFile.name || gcUploadFile.fileName;

    var fn = document.getElementById("filenames");
    var newP = document.createElement("p");
    newP.innerHTML = filename;
    fn.appendChild(newP);
}

Also, find the fiddle here.

Now my trouble is I can't seem to select the same file again immediately after selecting it once. However if I select some other file in between I can select my earlier file again.

Why is this happening and how can I prevent this?

Thnx in advance!!

Upvotes: 1

Views: 101

Answers (1)

dsgriffin
dsgriffin

Reputation: 68596

One way you could do this is to set the value of the <input> to null on the click event, before the change actually occurs, for example:

window.onload = function() {
    var el = document.getElementById("file");       
    el.onclick = function(){
        this.value = null;
    }        
    el.onchange = function(){
        var gcUploadFile = this.files[0];
        var filename = gcUploadFile.name || gcUploadFile.fileName;
        var fn = document.getElementById("filenames");
        var newP = document.createElement("p");
        newP.innerHTML = filename;
        fn.appendChild(newP);
    }
}

jsFiddle here.

Upvotes: 1

Related Questions