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.
HTML
CSS
#app {
text-align: center;
}
img {
width: 30%;
margin: auto;
display: block;
margin-bottom: 10px;
}
button {
}
|
#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 = '';
}
}
})
|
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.
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.
Related
