Cannot get file type input to clear

Question

So i've looked at the other questions and I am too far along in my page to try something else. I have an input type of file and I am trying to clear it when the user decides that they do not want to use it. I have some other functionality that is set to show the file name, size, etc... based on the FILE API but for some reason I cannot get the input to clear. I am trying a few different ways to clear it but still nothing. Anyone see what I am doing wrong. I have a jQuery check to check the value of the input and it never clears. The only thing I can think of is that I am using the standard hide the input and using a link so I can actually style the file input button.

Here is the FIDDLE: JS FIDDLE

Here is the HTML:

<div>
<label id="huf1-label">fileGroup 1</label>
<input type="file" id="fileElem" accept="image/*" style="display:none"
       onchange="handleFiles(this.files)" name="file">
<a href="#" id="fileSelect" class="c1-button right gray" tabindex="0">Select
    File to
    Upload<span class="icon-checkmark"></span> </a>
</div>
<div>
<label id="huf1Btn-label">
    <div class="fileInfoContainer">
        <ul>
            <li>
                <div id="fileList" class="fileInfoContainer">
                </div>
            </li>
        </ul>
    </div>
</label>
<button id="removeFile1" class="c1-button red left-icon"
        aria-controls="huf1">
    <span class="icon-remove"></span><b> Cancel</b>
    <span class="hidden">fileGroup 1</span>
</button>
<div class="filename"></div>

Here is the script:

window.URL = window.URL || window.webkitURL;
//BEGIN - fileSelect1 and handleFile
var fileSelect = document.getElementById("fileSelect"),
        fileElem = document.getElementById("fileElem"),
        fileList = document.getElementById("fileList");

fileSelect.addEventListener("click", function (e) {
    if (fileElem) {
        fileElem.click();
    }
    e.preventDefault(); // prevent navigation to "#"
}, false);
function handleFiles(files) {
    if (!files.length) {
        fileList.innerHTML = "<p></p>";
    } else {
        $('#fileList').empty().append();
        var list = document.createElement("ul");
        for (var i = 0; i < files.length; i++) {
            var li = document.createElement("li");
            list.appendChild(li);
            var info = document.createElement("span");
            info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
            li.appendChild(info);
        }
        fileList.appendChild(list);
        $("#removeFile1").click(function (event) {
            event.preventDefault();
            $("#fileList").empty();
            $("#removeFile1").find('b').html('Cancel');
            $('#fileElem').each(function() {
                $(this).val();
            });
            document.getElementById("fileElem").value = "";
            document.getElementById("fileSelect").value = "";

            console.log('#fileList' + 'was deleted');
            console.log('#fileElem' + 'was deleted I hope');
            //  console.log($(this)+'#fileList'.val());
        });

    }
};
 $("#fileElem").change(function(){
    if (this.val == "" ) {
        $("#removeFile1").find('b').html('Cancel');
    }  else {
        $("#removeFile1").find('b').html('Remove this file');
        }
});


 $(function() {
 $("input:file").change(function (){
     var fileName = $(this).val();
     $(".filename").html(fileName);
 });
 });

you can't change the value of file input element, you can call reset in the form to reset all input fields in it — Arun P Johny, Sep 19 '14 at 05:46
Take a look at [this question](http://stackoverflow.com/questions/20549241/how-to-reset-input-type-file). — Regent, Sep 19 '14 at 05:47
Hi Arun, that's what I was afraid of. Unfortunately I have five of these inputs so resetting one would reset them all. I even tried emptying and appending a clone and still nothing. Think I will have to destroy it completely on the click and rebuild a brand new one with separate ID but still not sure if that will wipe it out of the dom and still try to send it with the form. — isaac weathers, Sep 19 '14 at 05:59
Regent I tried that method and still not working for me. Maybe I am trying it wrong?? I'll try in the fiddle I posted in the question and see. — isaac weathers, Sep 19 '14 at 06:01
this is the error you are getting in the fiddle `Uncaught ReferenceError: handleFiles is not defined` — Ganesh Gaxy, Sep 19 '14 at 06:03
@GaneshGaxy it is because of incorrect fiddle, not because of incorrect code. Take a look at [corrected fiddle](http://jsfiddle.net/L935abrL/5/). — Regent, Sep 19 '14 at 06:06
Ah. ok so that gets the file API functionality to work... But the file input is still showing as populated based on the output from the function: $(function() { $("input:file").change(function (){ var fileName = $(this).val(); $(".filename").html(fileName); }); }); — isaac weathers, Sep 19 '14 at 06:06
@isaacweathers take a look at [rewritten fiddle](http://jsfiddle.net/L935abrL/33/). — Regent, Sep 19 '14 at 07:08

score 1 · Answer 1 · answered Sep 19 '14 at 06:10

I Corrected It this is the answer Try this....

The problem you are facing is this error...

Uncaught ReferenceError: handleFiles is not defined

So I canged it like this...

HTML

<div>
<label id="huf1-label">fileGroup 1</label>
<input type="file" id="fileElem" accept="image/*" style="display:none"
        name="file">
<a href="#" id="fileSelect" class="c1-button right gray" tabindex="0">Select
    File to
    Upload<span class="icon-checkmark"></span> </a>
</div>
<div>
    <label id="huf1Btn-label">
        <div class="fileInfoContainer">
            <ul>
                <li>
                    <div id="fileList" class="fileInfoContainer">
                    </div>
                </li>
            </ul>
        </div>
    </label>
    <button id="removeFile1" class="c1-button red left-icon" 
            aria-controls="huf1">
        <span class="icon-remove"></span><b> Cancel</b>
        <span class="hidden">fileGroup 1</span>
    </button>
    <div class="filename"></div>
</div>

SCRIPT

    window.URL = window.URL || window.webkitURL;
    //BEGIN - fileSelect1 and handleFile
    var fileSelect = document.getElementById("fileSelect"),
            fileElem = document.getElementById("fileElem"),
            fileList = document.getElementById("fileList");

    fileSelect.addEventListener("click", function (e) {
        if (fileElem) {
            fileElem.click();
        }
        e.preventDefault(); // prevent navigation to "#"
    }, false);
    $("#fileElem").change(function() {
        var files=this.files;
        if (!files.length) {
            fileList.innerHTML = "<p></p>";
        } else {
            $('#fileList').empty().append();
            var list = document.createElement("ul");
            for (var i = 0; i < files.length; i++) {
                var li = document.createElement("li");
                list.appendChild(li);
                var info = document.createElement("span");
                info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
                li.appendChild(info);
            }
            fileList.appendChild(list);
            $("#removeFile1").click(function (event) {
                event.preventDefault();
                $("#fileList").empty();
                $("#removeFile1").find('b').html('Cancel');
                $('#fileElem').each(function() {
                    $(this).val();
                });
                document.getElementById("fileElem").value = "";
                document.getElementById("fileSelect").value = "";

                console.log('#fileList' + 'was deleted');
                console.log('#fileElem' + 'was deleted I hope');
                //  console.log($(this)+'#fileList'.val());
            });

        }
    });
 $("#fileElem").change(function(){
        if (this.val == "" ) {
            $("#removeFile1").find('b').html('Cancel');
        }  else {
            $("#removeFile1").find('b').html('Remove this file');
            }
    });


 $(function() {
     $("input:file").change(function (){
         var fileName = $(this).val();
         $(".filename").html(fileName);
     });
 });

JSFIDDLE LINK HERE

This is the Link for updated JSFIDDLE...

Hi Ganesh. That fixes the FILE API functionality to show the file info, but the file input is still showing as having a value. — isaac weathers, Sep 19 '14 at 06:12
@isaacweathers do you test all your code in fiddle, or your fiddle is just an example of your code? Because if your fiddle is just an example of your code, then this answer is just a fixing of incorrect fiddle (I have already mentioned it in question comments) and it is incorrect answer. — Regent, Sep 19 '14 at 06:13
It's a chunk. But it has all of the main parts for this particular problem. — isaac weathers, Sep 19 '14 at 06:14
Since the file type input is set to display:hidden, you have to either show it with jQuery like what I am doing here: $(function() { $("input:file").change(function (){ var fileName = $(this).val(); $(".filename").html(fileName); }); }); Or you have to use the FILE API to get the file details. I am getting the file details as your updated fiddle shows (mine shows on my local think it is because of how I am using a ready handler). But... the real issue is that the value of the file can't seem to get reset to empty. — isaac weathers, Sep 19 '14 at 13:17

Cannot get file type input to clear

1 Answers1