Reset input type file using vue.js

Question

I need to clear/reset input type file within Vue.js 2 Before I've used jQuery method clone:

var input = $(div).find("input[type='file']");
input.replaceWith(input.val('').clone(true));

How can I clear this input? I can't use v-model for input because it doesn't work in vue 2

@GhanshyamSingh this is not an option for my usecase, I have a lot of fields in this form. — rado
– rado, Commented Dec 13, 2017 at 7:19
you can use vuejs.org/v2/api/#ref ref vue js attribute to hold that node reference and then when you want to clear you can do => vm.$refs.fileupload.value= null; — Hardik Satasiya
– Hardik Satasiya, Commented Dec 13, 2017 at 8:37
@HardikSatasiya I've tested this - not working for IE 11, and default browser on Android 4.4 — rado
– rado, Commented Dec 13, 2017 at 9:26
are you adding jquery in your project or just vue, if you are adding jquery then you can do same stuff as you do before but now input can be var input = $(vm.$refs.fileupload) — Hardik Satasiya
– Hardik Satasiya, Commented Dec 13, 2017 at 9:35

junho · Accepted Answer · 2020-03-19 09:10:42Z

2

it works.

<input type="file" ref="myFileInput"/>


this.$refs.myFileInput.value = '';

Reference : https://jj.isgeek.net/2018/02/how-to-reset-file-input-with-vuejs/

answered Mar 19, 2020 at 9:10

junho

3,8713 gold badges22 silver badges26 bronze badges

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

Comments

Bobby Cannon · Accepted Answer · 2018-07-14 13:50:31Z

1

My old site used your same method when I was using AngularJS. I'm currently converting to use Vue and ran into the same issue. Here is what I did to solve my problem.

fileInput.file = null

or

$('#fileInput')[0].file = null

answered Jul 14, 2018 at 13:50

Bobby Cannon

6,9538 gold badges35 silver badges46 bronze badges

Comments

Salman Zafar · Accepted Answer · 2019-12-12 09:02:13Z

0

Try this:

reset_document()
{this.instructions_file_document = "";
$("input[type=file]").val(null);}

edited Dec 12, 2019 at 9:02

Salman Zafar

4,0655 gold badges23 silver badges44 bronze badges

answered Dec 12, 2019 at 9:01

Swap

1632 silver badges10 bronze badges

Comments

Diego Miranda Neves Gomes · Accepted Answer · 2020-09-23 12:35:51Z

0

I tried all of the above, but my project had several errors. What solved my problem was:

<input type="file" ref="inputFile"/>

this.$refs.inputFile.reset();

This code above resets the field values.

answered Sep 23, 2020 at 12:35

Diego Miranda Neves Gomes

1571 silver badge5 bronze badges

Collectives™ on Stack Overflow

Reset input type file using vue.js

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related