How to clear a file input

Question

If you look at this code carefully, it appends a file input for each appended row. Now with every file input there is a "Clear File" button where it is suppose to remove whatever is in the file input. The problem is that it is not clearing anything in the file input. Why is this and how can it be fixed?

JavaScript:

var sourceImageForm; 

function insertQuestion(form) {   
    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
    var $image = $("<td class='image'></td>"); 

    var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='startImageUpload(this);' class='imageuploadform' >" + 
        "<p class='imagef1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /><br/></p><p class='imagef1_upload_form' align='center'><br/><label>" + 
        "Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><label class='imagelbl'>" + 
        "(jpg, jpeg, pjpeg, gif, png, tif)</label><br/><br/><label>" + 
        "<input type='submit' name='submitBtn' class='sbtn' value='Upload' /></label>" + 
        "<label><input type='button' name='imageClear' class='imageClear' value='Clear File'/></label>" +
        "</p> <iframe class='upload_target' name='upload_target' src='#' style='wclassth:0;height:0;border:0px;solclass #fff;'></iframe></form>");      

    $image.append($fileImage);
    $tr.append($image);  
    $tbody.append($tr); 

    $(".imageClear").click(function(event){
        event.preventDefault();
        $(this).parent().find(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");
    });

}

function startImageUpload(imageuploadform){
    $(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');
    $(imageuploadform).find('.imagef1_upload_form').css('visibility','hidden');
    sourceImageForm = imageuploadform;
    return true;
}

function stopImageUpload(success){
    var result = '';
    if (success == 1) {
        result = '<span class="msg">The file was uploaded successfully!<\/span><br/><br/>';
    } else {
        result = '<span class="emsg">There was an error during file upload!<\/span><br/><br/>';
    }
    $(sourceImageForm).find('.imagef1_upload_process').css('visibility','hidden');
    $(sourceImageForm).find('.imagef1_upload_form').html(result + '<label>Image File: <input name="fileImage" type="file"/></label><br/><label>(jpg, jpeg, pjpeg, gif, png, tif)</label><br/><br/><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /></label><label><input type="button" name="imageClear" class="imageClear" value="Clear File"/></label>');
    $(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');     
    return true;   
}

"there is a "Clear File" button where it removes whatever is in the file input. The problem is that it is not clearing anything in the file iput." I don't understand the difference between these statements. Does it or does it not remove things from the file input? — Waleed Khan, Apr 10 '12 at 00:05
possible duplicate of [Clearing using jQuery](http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery) — epascarello, Apr 10 '12 at 00:13
it doesn't remove anything in the file input, that is the problem — user1304328, Apr 10 '12 at 00:16

score 0 · Answer 1 · answered Apr 10 '12 at 00:31

Your general strategy seems sound—to "clear" an input of type file by replacing it with another input element. I have no idea why it doesn't work, here is a simple POJS version that does work:

<form>
  <input type="file" name="fileName">
  <input type="button" onclick="clearFileName(this);" value="Clear file input">
</form>

<script type="text/javascript">

function clearFileName(el) {
  var input = el.form.fileName;
  input.parentNode.replaceChild(input.cloneNode(false), input);
}

</script>

score 0 · Answer 2 · answered Jul 07 '14 at 11:07

I wrote a function to clear file input. It works well for all browsers.

demo: http://jsbin.com/muhipoye/1/

function clearInputFile(f){
    if(f.value){
        try{
            f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
        }catch(err){
        }
        if(f.value){ //for IE5 ~ IE10
            var form = document.createElement('form'), ref = f.nextSibling;
            form.appendChild(f);
            form.reset();
            ref.parentNode.insertBefore(f,ref);
        }
    }
}

for your code, you should modify as following:

    function clearInputFile(f){
        if(f.value){
            try{
                f.value = '';
            }catch(err){
            }
            if(f.value){
                var form = document.createElement('form'), ref = f.nextSibling;
                form.appendChild(f);
                form.reset();
                ref.parentNode.insertBefore(f,ref);
            }
        }
    }
    $(".imageClear").click(function(){
        clearInputFile($(this).closest('form').find('input[type="file"]')[0]);
    });

How to clear a file input

2 Answers2