Vuejs File Type extension Validation

Programming Technology VueJs

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.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

Snippet Contents

Vuejs File Type extension Validation

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.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Angular 6 DataTable Pagination Sorting Searching Example
  2.   Laravel Autocomplete text field suggestions search using Database
  3.   Preview Image before Upload using vuejs
  4.   Laravel DataTables Server side Processing Example
  5.   vue Image Upload Component
  6.   Laravel Vue JS ajax file upload multipart form data
  7.   PHP String Email word-char limit timestamp Examples
  8.   Laravel Combine two DB query results Example
  9.   Vue js Laravel Image Upload Example Tutorial From Scratch
  10.   Laravel 6 get last Insert id from query builder

Leave a Reply

Your email address will not be published. Required fields are marked *