simple file upload component using VueJs

simple file upload component using VueJs

In this Post We Will Explain About is simple file upload component using VueJs With Example and Demo.Welcome on infinityknow.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to How to Handle File Uploads in Vue jsExample

In this post we will show you Best way to implement vue-file-upload-component, hear for Image upload and validation using VueJswith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Vue.js File Upload

First of all create a simple fileindex.html, and then include External libs, and simple initalization simple randering DOM HTML function,Now here Learn to Step by step,How to simple Handle File Uploads in Vue js

In this Example to, simple to function using vuejs, like as a uploadImgChnage methods and deleteImg o click events genrate to upload and changes images using vuejs.

index.html

<div id="liveApp">
  <div v-if="!live_image">
    <h2>Please Select an image</h2>
    <input type="file" @change="uploadImgChnage">
  </div>
  <div v-else>
    <img :src="live_image" />
    <button @click="deleteImg">Delete image</button>
  </div>
</div>

CSS

Include simple Css to images dynemically set.

#liveApp {
  text-align: center;
}
img {
  width: 30%;
  margin: auto;
  display: block;
  margin-bottom: 10px;
}
button {
  
}

JavaScript File

include simple javascript file here simple data rander to call function and display HTML Dom to preview images and remove this images.

new Vue({
  el: '#liveApp',
  data: {
    live_image: ''
  },
  methods: {
    uploadImgChnage(e) {
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length)
        return;
      this.createImage(files[0]);
    },
    createImage(file) {
      var live_image = new Image();
      var reader = new FileReader();
      var vm = this;

      reader.onload = (e) => {
        vm.live_image = e.target.result;
      };
      reader.readAsDataURL(file);
    },
    deleteImg: function (e) {
      this.live_image = '';
    }
  }
})

Example

I hope you have Got What is simple file upload component for Vuejs And how it works.I would Like to have FeadBack From My Blog(infinityknow.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(infinityknow.com) Are Most Always Welcome.