【Vuejs】 drag and drop Image, video, audio Multiple File Upload

	<div id="app">
	<div
	draggable="true"
	@dragover.prevent="tts"
	@drop.prevent="ttrs"
	style="width: 800px;height: 200px;border: 1px solid black;font-size: 40px;line-height: 200px"
	>
	{{ dt }}
	</div>
	<div
	v-for="(item, index) in fileList"
	:key="index"
	style="width: 800px;height: 200px;border: 1px solid black;font-size: 40px;position: relative;top:10px"
	>
	<p
	style="font-size: 20px;float: left;position: relative;left: 20pxword-wrap:break-word;word-break:normal;"
	>
	{{ item.name }}
	</p>
	<h5 style="float:right;position: absolute;top: 80px;right: 20px">
	{{ item.type }}
	</h5>
	<h6 style="position: absolute;top: 80px;float: left;left: 20px">
	{{ item.size | sizeType }}
	</h6>
	<button style="float: right" @click="del(index)">Remove</button>
	</div>
	<div style="position:relative;top: 100px">
	<div v-for="(src, index) in srcs" :key="index">
	<img v-if="src.isImage" :src="src.file" style="width: 800px" />
	<video v-if="src.isVideo" controls :src="src.file" style="width: 800px"></video>
	<audio v-if="src.isAudio" controls :src="src.file" style="width: 800px"></audio>
	</div>
	</div>
	</div>

view raw index.html hosted with ❤ by GitHub

	new Vue({
	data() {
	return {
	dt: "",
	fileList: [],
	srcs:[],
	isImage:false,
	isAudio:false,
	isVideo:false
	};
	},
	filters: {
	sizeType(val) {
	let kbs = val / 1024;
	let mbs = 0;
	let gbs = 0;
	if (kbs >= 1024) {
	mbs = kbs / 1024;
	}
	if (mbs >= 1024) {
	gbs = mbs / 1024;
	return gbs.toFixed(2) + "GB";
	} else if (mbs >= 1) {
	return mbs.toFixed(2) + "MB";
	} else {
	return kbs.toFixed(2) + "KB";
	}
	}
	},
	mounted() {
	let vm = this;
	window.addEventListener("dragdrop", this.testfunc, false);
	document.addEventListener("dragover", function() {
	vm.dt = "Drag here to upload files";
	});
	},
	methods: {
	readFile(files){
	var vm = this
	for (var index = 0; index < files.length; index++) {
	var file = {isImage: false, isAudio: false, isVideo: false, file: ''}
	var reader = new FileReader();
	var type = files[index].type.substr(0,5);
	if(type=="image"){
	file.isImage = true;
	file.isAudio =false;
	file.isVideo = false;
	}else if(type=="audio"){
	file.isImage = false;
	file.isAudio =true;
	file.isVideo = false;
	}else if(type=="video"){
	file.isImage = false;
	file.isAudio = false;
	file.isVideo = true;
	}else {
	alert("Not a picture/video/audio")
	}
	reader.onload = function(event) {
	file.file = event.target.result;
	vm.srcs.push(file);
	}
	reader.readAsDataURL(files[index]);
	}
	},
	testfunc(event) {
	alert("dragdrop!");
	event.stopPropagation();
	event.preventDefault();
	},
	del(index) {
	this.fileList.splice(index, 1);
	if (this.fileList.length === 0) {
	this.dt = "";
	}
	},
	tts(e) {
	this.dt = "Drag here to upload files";
	},
	ttrs(e) {
	let datas = e.target.files || e.dataTransfer.files;
	var i
	for (i = 0; i < datas.length; i++) {
	this.fileList.push(datas[i])
	}
	this.readFile(datas)
	e.stopPropagation();
	e.preventDefault();
	this.dt = "Upload is complete, you can continue to upload";
	}
	}
	}).$mount("#app")

view raw script.js hosted with ❤ by GitHub

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>

view raw scripts hosted with ❤ by GitHub

Vue.js drag and drop Image/video/audio Multiple File Upload

A Pen by Edward Lance Lorilla on CodePen.

License.

view raw vue-js-drag-and-drop-image-video-audio-multiple-file-upload.markdown hosted with ❤ by GitHub