Bind file input to a button using Vue.js

Question

I'm trying to bind a input file to a button using Vue.js
Having the following:

<input type="file hidden>
<button>Choose</button>

In JQuery would be somthing like:

$('button').click(function() {
    $('input[type=file]').click();
});

So, what this is doing is binding the click event on the button to the input file, this way I have complete control on the look of the button, it can even be a anchor or a image or any element to trigger the event to the input.

My question is: How can I accomplish this using Vue.js?

Thank you!

crabbly · Accepted Answer · 2018-05-23 17:56:44Z

26

You can do this:

HTML:

<input id="fileUpload" type="file" hidden>
<button @click="chooseFiles()">Choose</button>

Vue.js:

methods: {
    chooseFiles: function() {
        document.getElementById("fileUpload").click()
    },
...

EDIT - Update syntax:

methods: {
    chooseFiles() {
        document.getElementById("fileUpload").click()
    },
...

edited May 23, 2018 at 17:56

answered May 31, 2016 at 1:58

crabbly

5,2261 gold badge26 silver badges48 bronze badges

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

4 Comments

farincz Over a year ago

it's safer use component's $refs and avoid lookup by id

crabbly Over a year ago

@farincz Could you explain why? The only difference would be to change the dependency from the element id to the ref attribute. i'm wondering if there is anything else. Thx.

farincz Over a year ago

@crabbly Using id is valid only for singleton components. Refs are need for components with multiple instances on page. Also reusable components / libraries should not spoil global id space (to avoid potential name clash).

crabbly Over a year ago

Interesting. Thank you for the feedback. I believe that is our responsibility to not have multiple elements with the same ID under the global namespace. Therefore, the problem you describe shouldn't exist in the first place. Refs are a good option, specially on the scenario you have described, but it doesn't justify having duplicated element ids on the page. Element ids should be unique.

Jossef Harush Kadouri · Accepted Answer · 2020-10-10 21:09:51Z

10

Add a ref="file" to your <input> element and later use $refs.file to access it.

<input ref="file" type="file">
<div @click="selectFile()">click to select a file</div>

methods:{
  selectFile(){
    let fileInputElement = this.$refs.file;
    fileInputElement.click();

    // Do something with chosen file 
  }
}

👌 Demo: https://codepen.io/Jossef/pen/QWEbNGv

answered Oct 10, 2020 at 21:09

Jossef Harush Kadouri

34.6k10 gold badges143 silver badges133 bronze badges

Comments

Andrew Powers · Accepted Answer · 2017-03-05 22:41:17Z

8

Simplest way to do this is to stylize a label element like a button, HTML only.

answered Mar 5, 2017 at 22:41

Andrew Powers

1362 silver badges4 bronze badges

Comments

Farshad Fahimi · Accepted Answer · 2020-08-24 06:44:29Z

6

you can use the label html tag for doing this like below

<label for="upload-file" class="css-class">
    <input type="file" id="upload-file" hidden @change="choosFile"/>
</label>

in this way you didn't need the button any more and you can customize the label with css as the way you like it

answered Aug 24, 2020 at 6:44

Farshad Fahimi

65811 silver badges22 bronze badges

Comments

AntonioGarcía · Accepted Answer · 2021-09-28 14:59:11Z

3

In Vue:

How code below works:

Open file explorer on button (label) click;
Select a file, continue;
@onChange will detect new file:

<label>
  <button/> //this can be an icon, link,...
  <input @change="doSomething" type="file" ref="file" accept="image/gif, 
    image/jpeg, image/png" hidden/>
</label>

Handle the file

doSomething(e: any) { 
  const file = e.target.files[0]
}

edited Sep 28, 2021 at 14:59

AntonioGarcía

1,1502 gold badges15 silver badges25 bronze badges

answered Sep 28, 2021 at 13:31

ThisCanBeNormal

2252 silver badges14 bronze badges

Comments

srikar kandula · Accepted Answer · 2021-07-24 07:58:06Z

1

There is a much simpler way of way doing this using Vue 3

<input type="file" id="upload-file" name="upload-file" hidden>
<label for="upload-file" refs="upload-file" class="file-btn">Choose a file</label>

Using this you can add classes and styling to the label field.

answered Jul 24, 2021 at 7:58

srikar kandula

1011 silver badge1 bronze badge

Comments

Vahida Vadiya · Accepted Answer · 2021-12-18 19:03:54Z

1

This might help someone who is using coreui <CInputFile> tag.

for <CInputFile>, this.$refs.file.click() and this.$refs.file.$el.click() both doesn't work.

Because <CInputFile> wraps <div> around <input type="file">. so $el is actually a div element here, you need to go find the <input type="file"> tag and trigger the click() event on the <input type="file"> tag like this

this.$refs.file.$el.getElementsByTagName('input')[0].click().

answered Dec 18, 2021 at 19:03

Vahida Vadiya

1541 silver badge12 bronze badges

Comments

denisdolmatov · Accepted Answer · 2022-11-08 10:33:08Z

0

<input ref="refName" type="file">
<div @click="selectFile()">Select file</div>

export default: {
   methods:{
      selectFile(){
        // refs return list of objects with name 'refName' or if only one object
        const r = this.$refs.refName[0] || this.$refs.refName;
        r.click();
     }
   }
}

edited Nov 8, 2022 at 10:33

answered Nov 3, 2022 at 8:49

denisdolmatov

5344 silver badges6 bronze badges

Comments

MR_AMDEV · Accepted Answer · 2024-01-19 12:18:15Z

0

When clicking the parent, it will click the ref upload (which is the child)

<div class="card card-upload" @click="$refs.upload.click()">
   <i class="fa fa-plus fa-lg"></i>
   <input ref="upload" type="file" hidden @change="upload">
</div>

answered Jan 19, 2024 at 12:18

MR_AMDEV

1,9622 gold badges24 silver badges41 bronze badges

Collectives™ on Stack Overflow

Bind file input to a button using Vue.js

9 Answers 9

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

4 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related