'Vuetify file input accept text/csv not working

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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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/[email protected]/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>
javascripthtmlvue.jsvuetify.jsmime-types


Solution 1:[1]

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")
 }
}

Solution 2:[2]

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

Solution 3:[3]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 shiro
Solution 2 Mr. R
Solution 3 Jesús Morán

Related Questions