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 also forum.jquery.com/topic/how-to-clear-a-file-input-in-ie — NoWar
– NoWar, Commented Jul 21, 2015 at 15:02

yceruto · Accepted Answer · 2016-11-29 19:40:38Z

228

This should work:

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

edited Nov 29, 2016 at 19:40

yceruto

9,6155 gold badges42 silver badges69 bronze badges

answered Mar 8, 2012 at 12:35

Guillaume Poussel

9,8522 gold badges35 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Guillaume Poussel Over a year ago

Yes, it is a relatively simple jQuery code. It is a cross-browser solution.

Paul T. Rawkeen Over a year ago

Guys, <input type=file /> is readonly after selecting the file in >= IE8, for security reasons, here is the similar Q and correspondent A for the solution proposed here.

Usman Mughal Over a year ago

<input type=file /> data type is file, we can't clear it by pass empty string to input field.

QMaster Over a year ago

Working on Chrome too. That is may useful to see this stackoverflow.com/a/11953476/1830909 and my comment below that.

always-a-learner Over a year ago

How can i remove file in multiple file upload in file input using jquery?

Arvin Jayanake · Accepted Answer · 2017-03-13 14:44:20Z

83

Clear file input with jQuery

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

Clear file input with JavaScript

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

answered Mar 13, 2017 at 14:44

Arvin Jayanake

1,5453 gold badges14 silver badges27 bronze badges

2 Comments

myshadowself Over a year ago

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.

Sean Devoy Over a year ago

I agree completely. Lots of framework's functions fail on file type input elements and they change over time. This pure JavaScript answer is PERFECT.

Shani Kehati · Accepted Answer · 2020-03-29 14:07:54Z

11

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()

answered Mar 29, 2020 at 14:07

Shani Kehati

5725 silver badges16 bronze badges

Comments

meditari · Accepted Answer · 2016-02-03 20:28:26Z

7

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 3, 2016 at 20:28

answered Feb 3, 2016 at 19:56

meditari

1412 silver badges7 bronze badges

Comments

Nagnath Mungade · Accepted Answer · 2019-08-07 06:22:15Z

7

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

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

answered Aug 7, 2019 at 6:22

Nagnath Mungade

1,00911 silver badges12 bronze badges

3 Comments

raza9798 Over a year ago

simple and great solution to clear the file input

Nagnath Mungade Over a year ago

@MohamedRaza Thanks hope my answer was helpful.

raza9798 Over a year ago

yes, it was helped me

Syscall · Accepted Answer · 2018-05-10 09:44:57Z

6

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

edited May 10, 2018 at 9:44

Syscall

19.8k10 gold badges44 silver badges60 bronze badges

answered May 10, 2018 at 9:39

Pranav Kulshrestha

1451 silver badge6 bronze badges

Comments

reza laki · Accepted Answer · 2019-10-04 10:11:44Z

3

this code works for all browsers and all inputs.

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

answered Oct 4, 2019 at 10:11

reza laki

1212 silver badges8 bronze badges

1 Comment

reza laki Over a year ago

I recommend you use like : $(document).ready(function( {$('#your_target_input').attr('value', ''); } );

Iceman · Accepted Answer · 2018-03-04 15:00:39Z

2

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']"));

answered Mar 4, 2018 at 15:00

Iceman

211 bronze badge

1 Comment

Hanifullah Jamalzai Over a year ago

'Thank you bro, It help me, but when updating data nothing shows, can I share the code?

Charnichart · Accepted Answer · 2016-11-29 18:45:16Z

1

This works to

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

answered Nov 29, 2016 at 18:45

Charnichart

413 bronze badges

Comments

Pedro Severino · Accepted Answer · 2022-10-26 13:47:38Z

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>

marc_s · Accepted Answer · 2023-02-16 19:28:03Z

1

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

I'm using

jquery 2.2.1 &
jquery UI 1.11.4

edited Feb 16, 2023 at 19:28

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Sep 29, 2022 at 6:54

Catalyst

4656 silver badges14 bronze badges

1 Comment

Elikill58 Over a year ago

This method doesn't seems to exist for me

Nikunj K. · Accepted Answer · 2017-03-29 10:19:53Z

0

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

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

answered Mar 29, 2017 at 10:19

Nikunj K.

9,2674 gold badges46 silver badges54 bronze badges

Comments

Piotr Sagalara · Accepted Answer · 2018-12-13 13:27:06Z

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, 2018 at 13:27

Piotr Sagalara

2,5153 gold badges24 silver badges26 bronze badges

Comments

Hotkey · Accepted Answer · 2021-06-07 11:13:25Z

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));
        }
    }
});

Collectives™ on Stack Overflow

How to clear File Input

14 Answers 14

5 Comments

2 Comments

Comments

Comments

3 Comments

Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

14 Answers 14

5 Comments

2 Comments

Comments

Comments

3 Comments

Comments

1 Comment

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related