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
How to Get the Pure Text Without HTML Element Using JavaScript
Resize Image With JavaScript Canvas (Smoothly)
How to Impose Maxlength on Textarea in HTML Using JavaScript
Difference Between Relative Path and Absolute Path in JavaScript
Submitting a Form on 'Enter' With Jquery
Adjust Width of Input Field to Its Input
Why Does This Simple Jsfiddle Not Work
Export HTML Table Data to Excel Using JavaScript/Jquery Is Not Working Properly in Chrome Browser
Insert Ellipsis (...) into HTML Tag If Content Too Wide
Why Is the Value of My Input Always Empty If I Store It in a Variable
How to Loop Through Selected Elements With Document.Queryselectorall
Passing Variable Through JavaScript from One HTML Page to Another Page
In What Situations Would Ajax Long/Short Polling Be Preferred Over Html5 Websockets