Vue.js File Upload Script

by
In this post I am going to share simple Vue Script to create file upload system. this is only client side script which read file client side. if you want to store file on sever then you must have to write server side to code to store files. Vue File Upload

HTML


  

    
Select an image

CSS

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

Vue JS

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

      reader.onload = (e) => {
        vm.image = e.target.result;
      };
      reader.readAsDataURL(file);
    },
    removeImage: function (e) {
      this.image = '';
    }
  }
})
See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by Atinux. Visit their official repository for more information and follow for future updates.

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

Published by Rohit