How to clear the img placeholder for choose image using jQuery

Question

I have a form with fileupload.

<input class="file" type="file" name="files[]">

I am curently cloning the input, but if a file is choosen it also clones the choosen filinput, is there a way to clear the selected image?

script: $('.fieldset-content_doc').first().clone().appendTo('.fieldset-clone_doc').find('.file').reset();

fieldset-content_doc: holds the formvalues

Does it happen in https://jsfiddle.net/7z1eu4ab/ too? – haim770 Sep 22 '16 at 11:20 — haim770, Sep 22 '16 at 11:20
Can't reproduce on Chrome 53. What's your browser? – haim770 Sep 22 '16 at 11:21 — haim770, Sep 22 '16 at 11:21

score 1 · Accepted Answer · answered Sep 22 '16 at 11:32

Apparently the issue is only reproducible on Firefox. But, you can simply set the value property of the element to null:

$('.fieldset-content_doc')
    .first()
    .clone()
    .appendTo('.fieldset-clone_doc')
    .find('.file')
    .each(function() { this.value = null; });

See Fiddle

score 0 · Answer 2 · edited May 23 '17 at 12:15

0

You can't use reset() if field is not inside <form>. You can clear input by wrapping element into form, reseting it and then unwrapping.

function resetFormElement(e) {
  e.wrap('<form>').closest('form').get(0).reset();
  e.unwrap();

  // Prevent form submission
  e.stopPropagation();
  e.preventDefault();
}

See: https://stackoverflow.com/a/13351234/3581321

edited May 23 '17 at 12:15

Community

1
1

answered Sep 22 '16 at 11:26

MatiK

573
1
7
21

score 0 · Answer 3 · answered Sep 22 '16 at 11:32

0

In your script instead of reset() you can use val(''). Like this

$('.fieldset-content_doc').first().clone().appendTo('.fieldset-clone_doc').find('.file').val('');

answered Sep 22 '16 at 11:32

Dimitris Nastos

76
4

How to clear the img placeholder for choose image using jQuery

3 Answers3