I want to clear the file input in my form.
I know about setting the sources to the same method... But that method wont erase the selected file path.
Note: I would like to avoid having to reload the page, reset the form or perform an AJAX call.
Is this possible?
This question is related to
javascript
html
tl;dr: For modern browsers, just use
input.value = '';
How about:
input.type = "text";
input.type = "file";
I still have to understand why this does not work with webkit.
Anyway, this works with IE9>, Firefox and Opera.
The situation with webkit is that I seem to be unable to change it back to file.
With IE8, the situation is that it throws a security exception.
Edit: For webkit, Opera and firefox this works, though:
input.value = '';
(check the above answer with this proposal)
I'll see if I can find a nice cleaner way of doing this cross-browser without the need of the GC.
Edit2:
try{
inputs[i].value = '';
if(inputs[i].value){
inputs[i].type = "text";
inputs[i].type = "file";
}
}catch(e){}
Works with most browsers. Does not work with IE < 9, that's all.
Tested on firefox 20, chrome 24, opera 12, IE7, IE8, IE9, and IE10.
I was having same problem and i came up with this.
var file = document.querySelector('input');_x000D_
var emptyFile = document.createElement('input');_x000D_
emptyFile.type = 'file';_x000D_
_x000D_
document.querySelector('button').onclick = function(){_x000D_
file.files = emptyFile.files;_x000D_
}
_x000D_
<input type='file'>_x000D_
<button>clear</button>
_x000D_
Unfortunately none of the above answers appear to cover all the bases - at least not with my testing with vanilla javascript.
.value = null
appears to work on FireFox, Chome, Opera and IE11 (but not IE8/9/10)
.cloneNode
(and .clone()
in jQuery) on FireFox appears to copy the .value
over, therefore making the clone pointless.
So here is the vanilla javascript function I have written that works on FireFox (27 and 28), Chrome (33), IE (8, 9, 10, 11), Opera (17)... these are the only browsers currently available to me to test with.
function clearFileInput(ctrl) {
try {
ctrl.value = null;
} catch(ex) { }
if (ctrl.value) {
ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
}
}
The ctrl
parameter is the file input itself, so the function would be called as...
clearFileInput(document.getElementById("myFileInput"));
Try this easy and it works
let input = elem.querySelector('input[type="file"]');
input.outerHTML=input.outerHTML;
this will reset the input
This worked for me. const clear = (event) =>{event.target.value = [ ];} clear("input_id");
The above answers offer somewhat clumsy solutions for the following reasons:
I don't like having to wrap
the input
first and then getting the html, it is very involved and dirty.
Cross browser JS is handy and it seems that in this case there are too many unknowns to reliably use type
switching (which, again, is a bit dirty) and setting value
to ''
So I offer you my jQuery based solution:
$('#myinput').replaceWith($('#myinput').clone())
It does what it says, it replaces the input with a clone of itself. The clone won't have the file selected.
Advantages:
Result: Happy programmer
What helped me is, I tried to fetch and upload the last selected file using a loop, instead of clearing out the queue, and it worked. Here is the code.
for (int i = 0; i <= Request.Files.Count-1; i++)
{
HttpPostedFileBase uploadfile = files[i];
Stream fs = uploadfile.InputStream;
BinaryReader br = new BinaryReader(fs);
Byte[] imageBytes = br.ReadBytes((Int32)fs.Length);
}
Hope this might help some.
U need replace it with new file input. Here is how it can be done with jQuery:
var inputFile = $('input[type=field]');
inputFile.wrap('<div />');
and use this line when you need to clear input field (on some event for example):
inputFile.parent().html( inputFile.parent().html() );
There's 3 ways to clear file input with javascript:
set value property to empty or null.
Works for IE11+ and other modern browsers.
Create an new file input element and replace the old one.
The disadvantage is you will lose event listeners and expando properties.
Reset the owner form via form.reset() method.
To avoid affecting other input elements in the same owner form, we can create an new empty form and append the file input element to this new form and reset it. This way works for all browsers.
I wrote a javascript function. 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'),
parentNode = f.parentNode, ref = f.nextSibling;
form.appendChild(f);
form.reset();
parentNode.insertBefore(f,ref);
}
}
}
I have been looking for simple and clean way to clear HTML file input, the above answers are great, but none of them really answers what i'm looking for, until i came across on the web with simple an elegant way to do it :
var $input = $("#control");
$input.replaceWith($input.val('').clone(true));
all the credit goes to Chris Coyier.
// Referneces_x000D_
var control = $("#control"),_x000D_
clearBn = $("#clear");_x000D_
_x000D_
// Setup the clear functionality_x000D_
clearBn.on("click", function(){_x000D_
control.replaceWith( control.val('').clone( true ) );_x000D_
});_x000D_
_x000D_
// Some bound handlers to preserve when cloning_x000D_
control.on({_x000D_
change: function(){ console.log( "Changed" ) },_x000D_
focus: function(){ console.log( "Focus" ) }_x000D_
});
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<input type="file" id="control">_x000D_
<br><br>_x000D_
<a href="#" id="clear">Clear</a>
_x000D_
I tried most of solutions but did not seem anyone to work. However I found a walk around for it below.
The structure of the form is: form
=> label
, input
and submit button
. After we choose a file, the filename will be shown by the label by doing so manually in JavaScript.
So my strategy is: initially the submit button
is disabled, after a file is chosen, the submit button disabled
attribute will be removed such that I can submit file. After I submit, I clear the label
which makes it look like I clear the file input
but actually not. Then I will disable the submit button again to prevent from submitting the form.
By setting the submit button
disable
or not, I stop the file from submitted many times unless I choose another file.
I changed to type text and back to type to file using setAttribute
'<input file-model="thefilePic" style="width:95%;" type="file" name="file" id="filepicture" accept="image/jpeg" />'
'var input=document.querySelector('#filepicture');'
if(input != null)
{
input.setAttribute("type", "text");
input.setAttribute("type", "file");
}
That's actually quite easy.
document.querySelector('#input-field').value = '';
Setting the value to ''
does not work in all browsers.
Instead try setting the value to null
like so:
document.getElementById('your_input_id').value= null;
EDIT:
I get the very valid security reasons for not allowing JS to set the file input, however it does seem reasonable to provide a simple mechanism for clearing already selecting output. I tried using an empty string but it did not work in all browsers, NULL
worked in all the browsers I tried (Opera, Chrome, FF, IE11+ and Safari).
EDIT:
Please note that setting to NULL
works on all browsers while setting to an empty string did not.
The following code worked for me with jQuery. It works in every browser and allows to preserve events and custom properties.
var $el = $('#your-input-id');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();
See this jsFiddle for code and demonstration.
Here are my two cents, the input files are stored as array so here is how to null it
document.getElementById('selector').value = []
this return an empty array and works on all browsers
An - in my world easy an clean solution - is, to set the file inputs files to a clear FileList
.
Since we can not create a FileList
directly - I user DataTransfer
as "hack"
@$input[0].files=new DataTransfer().files
or
file_input_node.files=new DataTransfer().files
the input.value = null
is a working method, however it will only trigger input's change
event if called from an onclick
event.
Solution to that would be calling that onchange
handler manually whenever you need to reset the input.
function reset_input(input) {
$(input)[0].value = null;
input_change_handler();
}
function input_change_handler() {
// this happens when there's been a change in file selection
if ($(input)[0].files.length) {
// file(s) selected
} else {
// nothing is selected
}
}
$(input).on('change', input_change_handler);
document.getElementById('your_input_id').value=''
Edit:
This one doesn't work in IE and opera, but seems to work for firefox, safari and chrome.
Source: Stackoverflow.com