button to reset individual file input value with name "file[]" (array)

Question

I'm trying to create a remove button to clear the value for a <input type="file">. The problem I have is that I don't know how can I make each button point to their respective <input>.

I'm using the JQuery plugin ezdz to upload and create previews of the images and I can easily add the buttons to each input with the $ezdz predefined var:

$ezdz.parent('div').find('div.arrow_box').html('<p><a href="#" onClick="window.resetMethod($(this.form[\'file[]\']));return false;">Quitar imagen</a></p>');
$ezdz.parent('div').find('div.arrow_box').removeClass('hide');

I need to create a function to reset the file input:

window.resetMethod = 
function (e) {
      $(this).parent('div').find('input').get(0).reset();
}

But the problem is in the button...

<a href="#" onClick="window.resetMethod($(this.form[\'file[]\']));return false;">Quitar imagen</a>

This is the html code:

<div class="first">
    <!-- ezdz creates the following div and it'll be the container for the img -->
    <div>Drop a file</div> <!-- This div is $ezdz -->
    <input type="file" name="file[]" accept="image/jpeg" /><div class="arrow_box hide"></div>
</div>

Any idea to make this working?

EDIT: Sorry I didn't realized that function will reset the entire form. I need to reset the input above the button.

I'm getting the following error in console:

TypeError: $(...).parent(...).find(...).get(...) is undefined

You would get a lot better answers if you supplied people with more information about what your problem is, what causes it and what errors occur. From looking briefly I will venture a guess that the way you are adding the button is not binding the click listener to the window. — Four_lo
– Four_lo, Commented Dec 10, 2015 at 20:47
Yes sorry, but just binding the click listener to the window won't bind each button with their respective input. I'm not too skilled in jquery. — Chazy Chaz
– Chazy Chaz, Commented Dec 10, 2015 at 21:24

trincot · Accepted Answer · 2015-12-10 22:11:34Z

2

this.form[...] in the onClickhandler will fail. I suppose that your console will display an error. At the moment of the call this corresponds to the anchor element (a), and that element has no form property.

So replace:

<a href="#" onClick="window.resetMethod($(this.form[\'file[]\']));return false;">Quitar imagen</a>

By:

<a href="#" onClick="window.resetMethod($(this));return false;">Quitar imagen</a>

The function resetMethod does not require you to pass the form object. As long as the element is placed in the intended form, you can pass it (as jQuery object) to the function, and it will find that form, and reset it.

There seems to be a problem too with the resetMethod function, because of the wrapping it does. I would suggest skipping that part, and just use an if, like this:

window.resetMethod = function (elem) {
    var frm = elem.closest('form');
    if (frm.length) {
        frm.get(0).reset();
    }
    return false; // cancel default
}

Because of the return false, you can simplify the onclick part to:

<a href="#" onClick="return resetMethod($(this));">Quitar imagen</a>

You also do not need to use the window prefix.

Note that the function will also reset any other inputs you might have in the same form.

If you just want to reset the file-upload input, then use this variant of the function:

window.resetMethod = function (elem) {
      frm = elem.closest('form');
      console.log(frm);
      if (frm.length) {
          upload = frm.find('input[type=file]');
          console.log(upload);
          if (upload.length) {
              // clear file-upload by
              // re-injecting the html for it in the dom:
              upload.replaceWith($("<p>").append(upload.clone()).html());
          }
      }
      return false; // cancel default
}

edited Dec 10, 2015 at 22:11

answered Dec 10, 2015 at 21:29

trincot

357k38 gold badges282 silver badges339 bronze badges

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

7 Comments

Chazy Chaz Over a year ago

Thanks for the answer and sorry if I provided poor information. Yes, I'm getting that error in console. I won't be in a hurry again when searching for scripts. I just now figured out (and thanks to you) that function will reset the entire form... What I'm looking for is to reset only the input type file (not all of them), just the one above the button.

Chazy Chaz Over a year ago

I edited. I'm looking the function to do something like this $(this).parent('div').find('input').get(0).reset(); is this possible? Or am I trying it the wrong way?

trincot Over a year ago

I added a version of the function that only resets the file upload input.

trincot Over a year ago

reset() on individual file-upload input does not work. You'll have to recreate the node in the document, which the code I suggested in my answer does.

Chazy Chaz Over a year ago

Can't I just replace the input with a new one? Instead all of them?

|

Collectives™ on Stack Overflow

button to reset individual file input value with name "file[]" (array)

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related