How to clear File Input

Question

Below is part of the jquery code I have which displays the file input and a "Clear File" button.

var $imagefile = $('<input />').attr({
    type: 'file',
    name: 'imageFile',
    class: 'imageFile'
});

$image.append($imagefile);

var $imageclear = $('<input />').attr({
    type: 'button',
    name: 'imageClear',
    class: 'imageClear',
    value: 'Clear File'
});

$image.append($imageclear);

Now the reason I have the "Clear File" button is because if you click on the button, then it will clear anything that is in the file input. How do I code it so that it actually clears the file input when I click on the "Clear File" button?

See this: http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery — Sudhir Bastakoti, Mar 08 '12 at 12:41
See this also https://forum.jquery.com/topic/how-to-clear-a-file-input-in-ie — NoWar, Jul 21 '15 at 15:02

score 213 · Accepted Answer · edited Nov 29 '16 at 19:40

213

This should work:

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

edited Nov 29 '16 at 19:40

yceruto

9,230
5
38
65

answered Mar 08 '12 at 12:35

Guillaume Poussel

9,572
2
33
42

1

Yes, it is a *relatively simple* jQuery code. It is a cross-browser solution. – Guillaume Poussel Mar 08 '12 at 12:45
4

Guys, `` is `readonly` after selecting the file in >= **IE8**, for security reasons, here is the similar [Q](http://stackoverflow.com/q/1043957/1548719) and correspondent [A](http://stackoverflow.com/a/1188853/1548719) for the solution proposed here. – Paul T. Rawkeen Aug 01 '12 at 07:36
1

`` data type is file, we can't clear it by pass empty string to input field. – Usman Mughal Oct 16 '17 at 11:24
Working on Chrome too. That is may useful to see this https://stackoverflow.com/a/11953476/1830909 and my comment below that. – QMaster Oct 07 '18 at 17:08
1

How can i remove file in multiple file upload in file input using jquery? – always-a-learner Mar 12 '20 at 09:25

score 78 · Answer 2 · answered Mar 13 '17 at 14:44

78

Clear file input with jQuery

$("#fileInputId").val(null);

Clear file input with JavaScript

document.getElementById("fileInputId").value = null;

answered Mar 13 '17 at 14:44

Arvin Jayanake

1,475
3
14
26

This is only method that truly works across all input types. Using .val('') on file inputs prevents normal submission if the file has been changed since initial render. .val(null) clears the input back to it's initial state. – myshadowself Mar 09 '23 at 09:10

score 9 · Answer 3 · answered Mar 29 '20 at 14:07

for React users

e.target.value = ""

But if the file input element is triggered by a different element (with a htmlFor attribute) - that will mean u don't have the event

So you could use a ref:

at beginning of func:

const inputRef = React.useRef();

on input element

<input type="file" ref={inputRef} />

and then on an onClick function (for example) u may write

inputRef.current.value = ""

in React Classes - same idea, but difference in constructor: this.inputRef = React.createRef()

meditari · Answer 4 · 2016-02-03T20:28:26.770

6

This is the method I like to use as well but I believe you need to add the bool true parameter to the clone method in order for any events to remain attached with the new object and you need to clear the contents.

    var input = $("#fileInput");

    function clearInput() {
        input = input.val('').clone(true);
    };

https://api.jquery.com/clone/

edited Feb 03 '16 at 20:28

answered Feb 03 '16 at 19:56

meditari

131
2
7

score 6 · Answer 5 · edited May 10 '18 at 09:44

6

By Setting $("ID").val(null), worked for me

edited May 10 '18 at 09:44

Syscall

19,327
10
37
52

answered May 10 '18 at 09:39

Pranav Kulshrestha

149
1
6

score 6 · Answer 6 · answered Aug 07 '19 at 06:22

6

get input id and put val is empty like below: Note : Dont put space between val empty double quotes val(" ").

 $('#imageFileId').val("")

answered Aug 07 '19 at 06:22

Nagnath Mungade

921
10
11

1

simple and great solution to clear the file input – Mohamed Raza Dec 16 '21 at 20:06
1

@MohamedRaza Thanks hope my answer was helpful. – Nagnath Mungade Mar 27 '23 at 06:43
yes, it was helped me – Mohamed Raza Mar 27 '23 at 17:34

score 3 · Answer 7 · answered Oct 04 '19 at 10:11

3

this code works for all browsers and all inputs.

$('#your_target_input').attr('value', '');

answered Oct 04 '19 at 10:11

reza laki

81
1
8

I recommend you use like : `$(document).ready(function( {$('#your_target_input').attr('value', ''); } );` – reza laki May 15 '20 at 03:01

score 2 · Answer 8 · answered Mar 04 '18 at 15:00

Another solution if you want to be certain that this is cross-browser capable is to remove() the tag and then append() or prepend() or in some other way re-add a new instance of the input tag with the same attributes.

<form method="POST" enctype="multipart/form-data">
<label for="fileinput">
 <input type="file" name="fileinput" id="fileinput" />
</label>
</form>

$("#fileinput").remove();
$("<input>")
  .attr({
    type: 'file',
    id: 'fileinput',
    name: 'fileinput'
    })
  .appendTo($("label[for='fileinput']"));

'Thank you bro, It help me, but when updating data nothing shows, can I share the code? — Hanifullah Jamalzai, Feb 28 '22 at 08:07

score 1 · Answer 9 · answered Nov 29 '16 at 18:45

1

This works to

 $("#yourINPUTfile").val("");

answered Nov 29 '16 at 18:45

Charnichart

41
3

score 1 · Answer 10 · edited Feb 16 '23 at 19:28

1

$('#myImage').filestyle('clear');

I'm using

jquery 2.2.1 &
jquery UI 1.11.4

edited Feb 16 '23 at 19:28

marc_s

732,580
175
1,330
1,459

answered Sep 29 '22 at 06:54

Catalyst

465
6
14

score 1 · Answer 11 · answered Oct 26 '22 at 13:47

This can solve your problem, i has problem when i pass the archive with accent into name and i solved verifying the size of archive and clear input if has something different than normal.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="file" placeholder="hello world" id="input_file" />

    <script
      src="https://code.jquery.com/jquery-3.6.1.js"
      integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI="
      crossorigin="anonymous"
    ></script>
    <script>
      $("input:file").change(function () {
        var fileInput = $(this); // => Gets the file data
        var fileSize = fileInput.get(0).files[0].size; // => Value in bytes
        if (fileSize == 0) {
          $("#input_file").val("");
          console.log('Something wrong :/');
        } else {
            console.log('good thats working :D');
        }
      });
    </script>
  </body>
</html>

score 0 · Answer 12 · answered Mar 29 '17 at 10:19

0

I have done something like this and it's working for me

$('#fileInput').val(null);

answered Mar 29 '17 at 10:19

Nikunj K.

8,779
4
43
53

score 0 · Answer 13 · answered Dec 13 '18 at 13:27

0

In my case other solutions did not work than this way:

$('.bootstrap-filestyle :input').val('');

However, if you will have more than 1 file input on page, it will reset the text on all of them.

answered Dec 13 '18 at 13:27

Piotr Sagalara

2,247
3
22
25

score 0 · Answer 14 · answered Jun 07 '21 at 11:13

Okay, That's worked and approved;

$('.file-input-element').change();

$(document).on("change", 'input[type="file"][data-module-name="Test"]', function (e) {
    e.preventDefault();
    var controlName = $(this).attr('name');
    var fileFormData = new FormData();
    var files = e.target.files;
    if (files.length > 0) {
        var file = files[0];
        var fileName = file.name;
        var fileSize = file.size; //in bytes
        var fileType = file.type; //like "image/png"
        if (fileSize > App.maxAllowedSizeInBytes) {
            e.target.value = '';
            $(this).attr("value", '');
            $(this).change();
            toastr.error(langData.UIMaxFileSizeShouldBeFiveMb);
            return;
        } else {
            App.test.validation.ValidateFile(file);
            fileFormData.append("file", file, fileName);
            App.test.uploadFile(fileFormData, controlName, $(this));
        }
    }
});

How to clear File Input

14 Answers14

Linked