jQuery - Reset file input on change

Question

I'm trying to clear the component if the user attaches a file that is not accepted. I'm trying to do it right after it is attached. I took a look on some examples here, where some of them showed me how to do it with a reset button, that resets the whole form (something that I don't wanna do), or cloning the component (something that I tried but it is not working). I would be glad if someone could help me. Thanks in advance.

Here is an example of what I have:

$("#mycomponent").on("change", function()
{
    var extension = $(this).val().split(".").pop().toString();

    if((extension === "pdf") || (extension === "docx") || (extension === "doc"))
    {
        alert("OK");    
    }
    else
    {
        alert("File extension not accepted");

        var mycomponent = $("#mycomponent");
        mycomponent.replaceWith(mycomponent = mycomponent.clone(true));
    }
});

Why not just do a mycomponent.val(""); ?

Vasan
– Vasan

2017-04-26 13:58:27 +00:00
Commented Apr 26, 2017 at 13:58 — Vasan
– Vasan, Commented Apr 26, 2017 at 13:58

Eduardo Franco · Accepted Answer · 2017-04-26 14:02:07Z

4

You can clear the component with val(), like this:

$("#mycomponent").on("change", function()
{
    var extension = $(this).val().split(".").pop().toString();

    if((extension === "pdf") || (extension === "docx") || (extension === "doc"))
    {
        alert("OK");    
    }
    else
    {
        alert("File extension not accepted");

        var mycomponent = $("#mycomponent");
        mycomponent.val("");
    }
});

answered Apr 26, 2017 at 14:02

Eduardo Franco

413 bronze badges

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

1 Comment

Anderson Gama Over a year ago

Funcionou desse jeito também. Valeu!

Zakaria Acharki · Accepted Answer · 2017-04-26 15:01:14Z

2

Working fiddle.

Using the wrap()/unwrap() functions like the following way should work :

$(this).wrap('<form>').closest('form').get(0).reset();
$(this).unwrap();

Hope this helps.

$("#mycomponent").on("change", function(){
  var extension = $(this).val().split(".").pop().toString();

  if((extension === "pdf") || (extension === "docx") || (extension === "doc"))
  {
    console.log("OK");    
  }
  else
  {
    console.log("File extension not accepted");
    
    $(this).wrap('<form>').closest('form').get(0).reset();
    $(this).unwrap();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="mycomponent" />

edited Apr 26, 2017 at 15:01

answered Apr 26, 2017 at 13:54

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

3 Comments

Anderson Gama Over a year ago

Didn't work, the component is still showing the file name attached with the wrong extension

Zakaria Acharki Over a year ago

True, I've updated my answer with working snippet, check please.

Vasan Over a year ago

You're no longer using clone, can you edit out that part please (for the sake of people seeing this in future)

Collectives™ on Stack Overflow

jQuery - Reset file input on change

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related