Vuetify file input accept text/csv not working

Question

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>

shiro · Accepted Answer · 2020-11-03 11:30:02Z

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

answered Nov 3, 2020 at 11:30

shiro

1552 silver badges14 bronze badges

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

Comments

Raeisi · Accepted Answer · 2020-11-03 11:33:45Z

1

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

answered Nov 3, 2020 at 11:33

Raeisi

2,2311 gold badge11 silver badges25 bronze badges

Comments

Jesús Morán · Accepted Answer · 2022-04-04 14:16:33Z

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>

answered Apr 4, 2022 at 14:16

Jesús Morán

1

1 Comment

MrSrv7 Over a year ago

Rules must be an array, make it like, :rules="[(value) => !value || value.type == 'text/csv' || 'Only CSV files allowed]'"

Collectives™ on Stack Overflow

Vuetify file input accept text/csv not working

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related