Using vuetifyjs v-file-input for image upload

Question

I'm trying to use the v-file-input component to upload an image to an s3 bucket but when I try to get the photo it comes up as an empty object

<v-file-input
    v-model='test'
    type='file'
></v-file-input>

When I call 'this.test' as the file to upload it shows up as an empty file though doing 'this.test.name' shows the name of the file... I'm sure this is something super simple and I'm overthinking it hard, I've tried reading the file with 'FileReader' with readAsDataUrl but that just reads it as a base64, I've also tried FormData to no avail

Oleg Naumov · Accepted Answer · 2022-03-10 02:42:21Z

4

I think you're doing something else wrong. Here is a super simple snippet, the file object is definitely not empty:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    file: null,
    imageUrl: null
  }),

  methods: {
    upload() {
      // the file object is not empty
      console.log(this.file);
      
      // post file to server
      const formData = new FormData();
      formData.append('file', this.file);

      const options = {
        method: 'POST',
        body: formData,
      };

      fetch('https://httpbin.org/post', options).then(response => response.json())
        .then(data => console.log(data));
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app id="inspire">
    <v-file-input v-model='file' accept="image/*" @change="upload"></v-file-input>
  </v-app>
</div>



<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

answered Mar 10, 2022 at 2:42

Oleg Naumov

5971 gold badge3 silver badges10 bronze badges

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

2 Comments

Lemon Over a year ago

You were right, ended up being how I was grabbing the file.

Oleg Naumov Over a year ago

Awesome, glad you solved it :)

Collectives™ on Stack Overflow

Using vuetifyjs v-file-input for image upload

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related