How to Clear an HTML File Input With JavaScript

HTML + JS: Clear File Input on button click

There are a few errors. The way you were trying to extract the ID is wrong. A much easier approach is to just use .replace

      var inputFieldID = v.id.replace("-delete", "");

Second - you can't set the value to an non-empty string. To reset it just set it to an empty one:

          ipt.value = "";

Working example:

https://jsfiddle.net/5yqohjzv/

how to reset (clear) file input

If fileInputElement is on its own in the form fileInputForm, you can do:

window.fileInputForm.reset();

Otherwise for IE you'll have to replace the element with a clone:

fileInputElement.parentNode.replaceChild(
fileInputElement.cloneNode(true),
fileInputElement
);

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 reset ReactJS file input

I think you can just clear the input value like this :

e.target.value = null;

File input cannot be controlled, there is no React specific way to do that.


Edit For old browsers (<IE11), you can use one of the following techniques.

See http://jsbin.com/zurudemuma/1/edit?js,output (tested on IE10 & 9)

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

Using JavaScript you can do that as follows.

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

How can I remove 'All Files' option from HTML file input

Limiting accepted file types
I believe you're referring to a user's file input popup and you want to limit it over there. For example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as JPEG or PNG.

Acceptable file types can be specified with the accept attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples:

accept="image/png" or accept=".png" — Accepts PNG files.
accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg" — Accept PNG or JPEG files.
accept="image/*" — Accept any file with an image/* MIME type. (Many mobile devices also let the user take a picture with the camera when this is used.)
accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" — accept anything that smells like an MS Word document.
Here's a sample code for you from Mozilla Dev Docs.

<form method="post" enctype="multipart/form-data">
<div>
<label for="profile_pic">Choose file to upload</label>
<input type="file" id="profile_pic" name="profile_pic"
accept=".jpg, .jpeg, .png">
</div>
<div>
<button>Submit</button>
</div>
</form>

Please Note You can't disable All files from the popup you can only allow certain file types to be accepted.



Related Topics



Leave a reply



Submit