Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to reset (clear) file input

how can I reset file input in IE, I used the following and it worked in chrome and FF but not IE

fileInputElement.value=""

what's the alternative in IE ?

like image 596
Sami Al-Subhi Avatar asked Jan 25 '12 22:01

Sami Al-Subhi


People also ask

How do you delete selected files on file upload control after a successful upload?

bind('focus', function() { // Clear any files currently selected in #upload-file $('#upload-file'). val(''); }) ; // Choose uploading new one - this works ok $('#upload-file'). bind('focus', function() { // Clear any files currently selected in #select-file $('#select-file').

What is input type reset in HTML?

The <input type="reset"> defines a reset button which resets all form values to its initial values. Tip: Avoid reset buttons in your forms! It is frustrating for users if they click them by mistake.

How do I delete a FileList?

One way to remove a file from a JavaScript FileList is to use the spread operator to convert the FileList to an array. Then we can call splice to remove the file we want. We add multiple to let select multiple files. We get the file input element with getElementById .


4 Answers

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
);
like image 157
mVChr Avatar answered Oct 02 '22 02:10

mVChr


SOLUTION

The following code worked for me with jQuery. It works in every browser and allows to preserve events and custom properties.

var $el = $(fileInputElement);
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();

DEMO

See this jsFiddle for code and demonstration.

LINKS

  • Clearing <input type='file' /> using jQuery

  • How to reset file input with JavaScript

like image 42
Gyrocode.com Avatar answered Oct 02 '22 02:10

Gyrocode.com


Cross-Browser solution by @Gyrocode.com in vanilla JS:

var clearFileInput = function (input) {
  if (!input) {
    return;
  }

  // standard way - works for IE 11+, Chrome, Firefox, webkit Opera
  input.value = null;

  if (input.files && input.files.length && input.parentNode) {
    // workaround for IE 10 and lower, pre-webkit Opera

    var form = document.createElement('form');
    input.parentNode.insertBefore(form, input);

    form.appendChild(input);
    form.reset();

    form.parentNode.insertBefore(input, form);
    input.parentNode.removeChild(form);
  }

}
like image 31
Frank Adler Avatar answered Oct 02 '22 03:10

Frank Adler


You can't reset the File input by itself. What you can do is wrap your File input in a <form id="form_id"> tag and reset the form. With jQuery you can do $('#form_id')[0].reset(); and in JavaScript you can do document.getElementById('form_id').reset().

like image 34
Gavin Avatar answered Oct 02 '22 03:10

Gavin