How to validate if imported file is a .csv file type in vue

Question

I have created a file select functionality that allows the user to select a .csv files. Code is below:

<input type="file" accept=".csv" ref="file" v-on:input="handleFileUpload()" id="upload-photo" />

This enables the user to browse for .csv files and my problem is, if the user select the all files, all files are displayed and can select other file types.

How can I disable the all files option or check the file extension using vue.js. Below is the functionality if the user selects the file.

onConfirm() {
        this.txtBrowse = this.file.name; //gets the file name with the extension
        //other functionalities
}

UPDATE

As of the moment, I temporarily used the following trapping:

if(this.file.name.split(".").pop() != 'csv'){//check if file extension is csv
   Vue.alert.show( "Please select CSV file type", "error");
   return;
}

But, if you have a better approach, please help me out.

Have a look at https://stackoverflow.com/questions/190852/how-can-i-get-file-extensions-with-javascript — Shubham Patel, Nov 16 '18 at 09:05

score 2 · Answer 1 · answered Sep 19 '20 at 10:08

I was in a similar situation and have solved it the following way. For inputting the file:

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

Inside the setUploadFile function:

setUploadFile(){
 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")
 }
}

score -1 · Answer 2 · answered Apr 09 '19 at 06:25

-1

if(this.file.name.split(".").pop() != 'csv'){//check if file extension is csv
   Vue.alert.show( "Please select CSV file type", "error");
   return false;
}`enter code here`

answered Apr 09 '19 at 06:25

Wasim Akram

19
3

Please add some explanation to your answer such that others can learn from it. To me, it looks like you've simply copied something from the question that does not disallow any user to select files of other types – Nico Haase Apr 09 '19 at 06:50

How to validate if imported file is a .csv file type in vue

2 Answers2