Vuetify v-file-input rule for "csv only"

user_1038988 0
Viewed 964

Good day,

I have a v-file-input like so:

<v-file-input
  :rules="rules"
  accept="text/csv"
  label="Select a CSV file..."
></v-file-input>

Here is my rule that is supposed to detect when the file doesn't have a ".csv" extension:

rules: [
  file => {
    const pattern = /\.csv$/;
    return (
      !file || pattern.test(file) || 'File type should be csv.'
    )
  }
],

But it doesn't work. Whether I select a .txt, .csv, or .jar, the file-input thinks they're all invalid.

How can I get it only error on a non-csv file?

Thank you for any assistance.

vuejs2 vuetify.js
1 Answers

Working codepen link https://codepen.io/manojkmishra/pen/vYgaZOy. This is working fine on windows, in case of any issue on Mac, please check file type in inputChanged(e) function and include that in if statement.

HTML:

<div id="app">
<v-app id="inspire">
<v-file-input accept=".csv" label="Select a CSV file..." v-model="ffile"
 @change="inputChanged"></v-file-input>
<p v-show="show">
  {{message}}
</p>
</v-app>
</div>

JS:

new Vue({  el: '#app',
vuetify: new Vuetify(),
data(){  return{ ffile:[], message:"",show:false} },
methods:{
 inputChanged(e) 
   { console.log('file type=',this.ffile.type)
     if (this.ffile.type.match('application/vnd.ms-excel'))
       {  console.log('csv matched');
          this.show=false;
       }
    else{ console.log('not matched')
          this.show=true;
          this.message="this is not a csv file" ;
        }
     }
   }
 })
user_89683880
Related