1

I have a Vuetify fie input:

<v-file-input
  accept="text/csv"
  label="File input"
  placeholder="Select your CSV files"
></v-file-input>

I want to upload only CSV files, but the accept="text/csv" not working, I can upload any file,

I have test other type like accept="image/*" and its work.

https://codepen.io/AiAbdrahim/pen/oNLyYvm

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
})
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.3.16/dist/vuetify.min.js"></script>
<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@5.x/css/materialdesignicons.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.3.16/dist/vuetify.min.css" rel="stylesheet"/>
<div id="app">
  <v-app id="inspire">
    <v-file-input
      accept="text/csv"
      label="File input"
      placeholder="Select your CSV files"
    ></v-file-input>
  </v-app>
</div>
AiAbdrahim
  • 309
  • 2
  • 13

3 Answers3

2

You could try this something like this, it works on vue.

<input id="fileUpload" type="file" ref="inputFile" @input="myUploadFile()" hidden />

And write a setUploadFile method

myUploadFile(){
 this.file = this.$refs.inputFile.files[0];
 if (this.file.type == "text/csv"){
    // Api call
 }
 else {
   this.showAlert("error", "The file-type doesn't belong to text/csv")
 }
}
shiro
  • 137
  • 2
  • 13
1

It's not related to Vuetify. You have inserted a wrong accept value. html-input-file-accept-attribute-file-type-csv

Raeisi
  • 1,647
  • 1
  • 6
  • 18
0

You need also to include a rule preventing that:

<v-file-input
  accept="text/csv"
  :rules="(value) => !value || value.type == 'text/csv' || 'Only CSV files allowed'"
  label="File input"
  placeholder="Select your CSV files"
></v-file-input>
Jesús Morán
  • 1
  • Rules must be an array, make it like, :rules="[(value) => !value || value.type == 'text/csv' || 'Only CSV files allowed]'" – MrSrv7 Jun 10 '22 at 07:50