ファイルをWebブラウザにドラッグ&ドロップするためのVue.js用のメソッド(FileReader使用)

dropfile_with_filereader.js

// Inside a Vue instance...
	dragOver(event) {
		event.preventDefault();
	},
	dropFile(event) {
		event.preventDefault();
		if (event.dataTransfer.files.length != 1) {
			alert("Only one file can be dropped");
			return;
		}
		if (event.dataTransfer.items.length != 1 ||
			(event.dataTransfer.items[0].webkitGetAsEntry() &&
			 event.dataTransfer.items[0].webkitGetAsEntry().isDirectory)) {
			alert("Only tex file is available.");
			return;					  
		}
		if (event.dataTransfer.files[0].name.slice(-3) !== "tex") {
			alert("Only tex file is available.");
			return;
		}
		let reader = new FileReader();
		reader.readAsArrayBuffer(event.dataTransfer.files[0]);

		reader.onload = function() {
			let r = new Uint8Array(reader.result);
			const rr = function*() {
				for (let i = 0x20; i < 0xff; i++) {
					if (i != 0x7f) {
						yield i;
					}
				}
			}
			const textChars = [7,8,9,10,12,13,27, ...rr()];
			if (r.every(e => textChars.includes(e))) {
				// Put code to append string to textarea.
			} else {
				alert("Binary file is not available.");
			}
		};
		const _this = this;

		reader.onerror = function() {
			alert("Error occurred.");
		};
	}