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 stackoverflow.com/questions/190852/…

Shubham Patel
– Shubham Patel

2018-11-16 09:05:33 +00:00
Commented Nov 16, 2018 at 9:05 — Shubham Patel
– Shubham Patel, Commented Nov 16, 2018 at 9:05

srijan439 · Accepted Answer · 2020-09-19 10:08:07Z

2

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

answered Sep 19, 2020 at 10:08

srijan439

4505 silver badges9 bronze badges

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

Comments

Wasim Akram · Accepted Answer · 2019-04-09 06:25:05Z

-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 9, 2019 at 6:25

Wasim Akram

193 bronze badges

1 Comment

Nico Haase Over a year ago

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

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related