Vue.js show file name event.target.files

Question

I'm making an upload functionality in my webapp with vue 2. Currently it looks like this:

<label class="btn btn-xs btn-primary">
    <input type="file" name="attachment[]" @change="onFileChange" multiple/>
    Upload file
</label>

input[type="file"]  {
  display: none;
}


onFileChange() {
    this.reaction.attachment = event.target.files || event.dataTransfer.files;
}

So now I would like to show the file names that are on the event.target.files object.

I've tried this:

<p v-for="file in reaction.attachment">
  {{ file.name }}
</p>

But that's not working!? When I look into my vue devtools the attachment object looks like this:

attachment:FileList

So how do I get this to work?

Thanks a lot

Whats your Vue code?

Bert
– Bert

2017-05-20 19:30:35 +00:00
Commented May 20, 2017 at 19:30 — Bert
– Bert, Commented May 20, 2017 at 19:30

Helping hand · Accepted Answer · 2021-08-05 05:02:06Z

11

You need to get file name using document.getElementById("fileId").files[0].name inside onFileChange function.

<label class="btn btn-xs btn-primary">
    <input type="file" name="attachment[]" id="fileId" @change="onFileChange" multiple/>
    Upload file
</label>
{{fileName}}


input[type="file"]  {
  height:0;
  weight:0;
  //OR
  display:none
}

Inside script, pass event to the function.

onFileChange(event){
   var fileData =  event.target.files[0];
   this.fileName=fileData.name;
}

edited Aug 5, 2021 at 5:02

answered Oct 5, 2017 at 12:06

Helping hand

2,9602 gold badges21 silver badges33 bronze badges

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

Comments

MOHD SHAHZAIB · Accepted Answer · 2021-08-05 05:46:59Z

1

I have created a working example in the sandbox you can check it out. It will work either select one file or multiple https://codesandbox.io/s/condescending-wildflower-jljxn?file=/src/App.vue

answered Aug 5, 2021 at 5:46

MOHD SHAHZAIB

5503 silver badges12 bronze badges

Comments

Aseem · Accepted Answer · 2020-06-18 02:11:46Z

0

Following code works when selecting 1 file at a time. HTML code to show input field and a label using bootstrap classes:

<input type="file" class="custom-file-input" id="idEditUploadVideo"
       v-on:change="videoChoosen">
<label class="custom-file-label" id="idFileName" for="idEditUploadVideo">
    [[videoFileName]]</label>

JS code to show file name in the label as soon as user selects a file:

var vueVar = new Vue({
    el: '#idSomething',
    data: {
        videoFileName:''
    },
    methods: {
        videoChoosen(event){
            this.videoFileName = event.target.files[0].name;
        }
    },
    delimiters: ["[[", "]]"],
});

answered Jun 18, 2020 at 2:11

Aseem

6,9578 gold badges57 silver badges96 bronze badges

Collectives™ on Stack Overflow

Vue.js show file name event.target.files

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related