How to check if file type is a specified file type(Image) in vue.js?

Question

Helo. i want to check my input file type if it's jpg or not. i worked with 'vee-validate', which it was fine, but what i like to do is like what I've did with file size base on a tutorial.

Here's the code:

<input type="file" @change="updateMelliCodeFrontScan" name="mellicode_front_url" class="form-input" >

Here's the Vue method:

updateMelliCodeFrontScan(e){
            // console.log('uploading');
            let file = e.target.files[0];
            let reader = new FileReader();
            // let vm = this;
            if (file['size'] < 200000){

                    reader.onloadend = (file) => {
                        // console.log('RESULT', reader.result)
                        this.form.mellicode_front_url = reader.result;
                    }
                    reader.readAsDataURL(file);
            }else
            {
                swal({
                    type: 'error',
                    title: 'Size limited.',
                    text: 'size limit',
                })
            }
},

so i want to do it like this:

=> i want to make another if for file type base on extension/type like file['type']. 

i used file['type'] === jpg and didn't worked.
if (file['size'] < 200000){

                    reader.onloadend = (file) => {
                        // console.log('RESULT', reader.result)
                        this.form.mellicode_front_url = reader.result;
                    }
                    reader.readAsDataURL(file);
            }else
            {
                swal({
                    type: 'error',
                    title: 'Size limited.',
                    text: 'size limit',
                })
}

Pratik Patel · Accepted Answer · 2019-03-07 17:27:51Z

10

It's because it return image/jpeg in file[0]

if(files[0]['type']==='image/jpeg')

Try this it's works.

edited Mar 7, 2019 at 17:27

answered Mar 7, 2019 at 17:18

Pratik Patel

7,0381 gold badge20 silver badges44 bronze badges

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

2 Comments

Mohammad Eskandari Over a year ago

how about adding more types? i've tried === 'image/jpeg' || 'image/png'), didn't worked.

Pratik Patel Over a year ago

Try this files[0]['type']==='image/jpeg' || files[0]['type']==='image/png'

VLAZ · Accepted Answer · 2023-10-25 06:51:47Z

2

For multiple file type checking you can use like this

if(['image/png','image/jpeg','image/svg'].includes(files[0]['type'])){
   
}

edited Oct 25, 2023 at 6:51

VLAZ

29.6k9 gold badges65 silver badges88 bronze badges

answered Sep 28, 2022 at 9:14

Riyas Ahamed

215 bronze badges

Collectives™ on Stack Overflow

How to check if file type is a specified file type(Image) in vue.js?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related