Today, We want to share with you Vuejs File Type extension Validation.In this post we will show you validate files in laravel using vue.js, hear for How to check if file type is a specified file type(Image) in vue.js? we will give you demo and example for implement.In this post, we will learn about VueJS – Validate file size requirement in form file upload with an example.

Vuejs File Type extension Validation

Contents

There are the Following The simple About Vue-js File Type extension Validation Full Information With Example and source code.

As I will cover this Post with live Working example to develop VeeValidate(vue.js) image file size and dimensions validation, so the VueJS – Validate file size requirement in form file upload for this example is following below.

File type

app.vue

<template>
    <div class="col-lg-8 control-section uploader chunk">
        <div class="dsp control_wrapper">
            <ejs-uploader id='validation' name="UploadFiles" :asyncSettings= "path" ref="uploadObj" :allowedExtensions = "extensions"></ejs-uploader>
        </div>
    </div>
</template>
<script>
import Vue from "vue";
import { UploaderPlugin } from '@syncfusion/ej2-vue-inputs';
import { FileInfo } from '@syncfusion/ej2-vue-inputs/uploader';
Vue.use(UploaderPlugin);
export default {
 data: function(){
        return {
          path:  {
            saveUrl: 'https://www.pakainfo.com/services/api/media/Save',
            removeUrl: 'https://www.pakainfo.com/services/api/media/Remove'
          },
          extensions: '.doc, .docx, .xls, .xlsx'
        }
    }
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
    #container {
        visibility: hidden;
        padding-left: 5%;
        width: 100%;
    }
    #loader {
        color: #008cff;
        font-family: 'Helvetica Neue','calibiri';
        font-size: 14px;
        height: 40px;
        left: 45%;
        position: absolute;
        top: 45%;
        width: 30%;
    }
</style>

VueJS – Validate file size

vuejs Part

new Vue({
  el: '#app',
  methods: {
    onSubmit(e) {
      const file = this.$refs.file.files[0];
      
      if (!file) {
        e.preventDefault();
        alert('No file chosen');
        return;
      }
      
      if (file.size > 1024 * 1024) {
        e.preventDefault();
        alert('File too big (> 1MB)');
        return;
      }
      
      alert('File OK');
    },
  },
});

HTML part

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>

<div id="app">
  <form @submit="onSubmit">
    <input type="file" ref="file">
    <button type="submit">Submit</button>
  </form>
</div>

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

Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Vue 2.0 File Type extension vee Validation.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.