Clearing ≪Input Type='File' /≫ Using Jquery

How to clear File Input

This should work:

$imageClear.on('click', function() { 
    $imageFile.val(''); 
});

How to clear files from input type='file' / using jQuery or JavaScript

Using JavaScript you can do that as follows.

document.getElementById("#control").value = "";

Reset selected file input in JQuery

This code works, please ignore the changes I made to the html, that is for generating the HTML in the editor.

Explanation: If you add an event handler to all the a tags in the form with classes field fieldTEXT the function will get called, the event will provide us a this which is basically the clicked element. Then using the jquery function prev(), I access the element before the a tag, which is the input element, then we clear the field using val('')

$('.field.fieldTEXT a').on('click', function(){     $(this).prev().val('');});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="field fieldTEXT">            <form:label path="file2" cssClass="fieldLabel">                Attach 2            </form:label>            <input path="file2" type="file" cssClass="fileInput"/> <a href="#"> Remove</a>
        </div>        <div class="field fieldTEXT">            <form:label path="file3" cssClass="fieldLabel">                Attach Additional Information:            </form:label>            <input path="file3" type="file" cssClass="fileInput" accept="application/pdf"/> <a href="#"> Remove</a>            </div>        <div class="field fieldTEXT">            <form:label path="file4" cssClass="fieldLabel">                Attach Additional Information (If Needed):            </form:label>                <input path="file4" type="file" cssClass="fileInput" accept="application/pdf" /> <a href="#" > Remove</a>
        </div>

how to clear an input file field in jquery?

Why are you trying to do a clone?

Just doing this should clear the field:

input.val('');

Here is a fiddle to demonstrate:

http://jsfiddle.net/kcbc701c/

Edit:

Yeah, there may be issues with the above in older browsers, it'd be worth testing, but for me that works in modern browsers, whereas the other option you stated doesn't work in firefox...

here's a fiddle with both so you can test: http://jsfiddle.net/frrc7bLy/

Bootstrap 4 / jQuery - Clear filename in input field input type='file' / bs-custom-file-input

There is no value to clear, the plugin generate a label for the custom-file what you see is not the input but the label, if you use your browser inspection you can see it, replace this :

// Clear the value
$('#customFile').val('');

by this :

// Clear the value, replace it by whatever text you want
$('#customFile').next('label').html('Select a file');

Clearing an HTML file upload field via JavaScript

You can't set the input value in most browsers, but what you can do is create a new element, copy the attributes from the old element, and swap the two.

Given a form like:

<form> 
    <input id="fileInput" name="fileInput" type="file" /> 
</form>

The straight DOM way:

function clearFileInput(id) 
{ 
    var oldInput = document.getElementById(id); 

    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; 
    // TODO: copy any other relevant attributes 

    oldInput.parentNode.replaceChild(newInput, oldInput); 
}

clearFileInput("fileInput");

Simple DOM way. This may not work in older browsers that don't like file inputs:

oldInput.parentNode.replaceChild(oldInput.cloneNode(), oldInput);

The jQuery way:

$("#fileInput").replaceWith($("#fileInput").val('').clone(true));

// .val('') required for FF compatibility as per @nmit026

Resetting the whole form via jQuery: https://stackoverflow.com/a/13351234/1091947

How to check if input file is empty in jQuery

Just check the length of files property, which is a FileList object contained on the input element

if( document.getElementById("videoUploadFile").files.length == 0 ){
    console.log("no files selected");
}