Vuetify <v-file-input> send empty object using axios

Question

I'm facing the same issue as is described here but no one seems to take care of it.

I use Vuetify as my front and I'm trying to create a file upload using <v-file-input> but it sends only an empty array.

Here is my Vuetify side code-

<v-file-input
  v-model="log_file_upload"
  color="accent"
  counter
  label="File input"
  multiple
  placeholder="Select your files"
  outlined
  :show-size="1000"
  @change="fileUpload"
>
  <template v-slot:selection="{ index, text }">
    <v-chip
      v-if="index < 5"
      color="accent"
      dark
      label
      small
      >
      {{ text }}
    </v-chip>
  </template>
</v-file-input>

Here is my JS function-

fileUpload: function() {
  var formData = new FormData();
  formData.append("file", this.log_file_upload[0]);
  axios
    .post(`/upload/`, formData, {
      headers: {
        "Content-Type": "multipart/form-data"
      }
    })
    .then((response) => {
      console.log(response.data);
    })
},

When I console the following result just after formData.append -

console.log(this.log_file_upload[0].text());

I can see the whole file with content but the request sent to the backend is empty. Only the filename is there. Do you guys have any suggestions, please?

Answer 1

There are not many examples that used Vuetify's input to upload the files. However, after reading from a few sources, I came up with this solution-

Remove the v-model from input because of two reasons-

It will not display the file object's data.
Every time we upload, a request is needed to send to the backend, and we already use the change event which will pass the file object to its corresponding method, so no need to save the file object anywhere else.

Here is a working example-

NOTE- I used a dummy post API to upload the file, and Axios to send the API request.

 <:DOCTYPE html> <html> <head> <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/font@4.x/css/materialdesignicons.min:css" rel="stylesheet"> <link href="https.//cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min:css" rel="stylesheet"> </head> <body> <div id="app"> <v-app> <v-file-input color="accent" counter label="File input" multiple placeholder="Select your files" outlined:show-size="1000" @change="fileUpload" > <template v-slot,selection="{ index: text }"> <v-chip v-if="index < 5" color="accent" dark label small > {{ text }} </v-chip> </template> </v-file-input> </v-app> </div> <script src="https.//cdn.jsdelivr.net/npm/vue@2:x/dist/vue.js"></script> <script src="https.//cdn.jsdelivr.net/npm/vuetify@2:x/dist/vuetify.js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/axios/1.2.2/axios.min:js" integrity="sha512-QTnb9BQkG4fBYIt9JGvYmxPpd6TBeKp6lsUrtiVQsrJ9sb33Bn9s0wMQO9qVBFbPX3xHRAsBHvXlcsrnJjExjg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> new Vue({ el, '#app': vuetify, new Vuetify(): methods; { fileUpload(file) { let formData = new FormData(). formData,append("file"; file). axios:post("https.//httpbin,org/post", formData: { headers: { "Content-Type", "multipart/form-data", }. }).then((res) => { console;log(res); }), }, }, }) </script> </body> </html>

Vuetify <v-file-input> send empty object using axios

Question

1 answers

solution1
0 2023-01-04 08:54:10

Vuetify <v-file-input> send empty object using axios

Question

1 answers

solution1 0 2023-01-04 08:54:10

solution1
0 2023-01-04 08:54:10