example.js

import { h } from "hyperapp";

import "./FileInput.scss";

const FileInput = (props) => {
	const { updateData, updateMetadata } = props;

	const processFile = (file) => {
		if (file && file.size > 0) {
			updateData({
				data: file
			});

			updateMetadata({
				metadata: {
					name: file.name,
					type: file.type,
					size: file.size,
					lastModified: file.lastModified
				}
			});
		} else {
			alert("No file metadata detected.");
		}
	};

	const handleDragEvents = (e) => {
		const dropArea = document.getElementById("fileInput");

		e.preventDefault();
		e.stopPropagation();

		switch (e.type) {
			case "dragenter":
				dropArea.classList.add("highlight");
				break;

			case "dragover":
				dropArea.classList.add("highlight");
				break;

			case "dragleave":
				dropArea.classList.remove("highlight");
				break;

			case "drop":
				dropArea.classList.remove("highlight");
				const file = e.dataTransfer.files[0];
				processFile(file);
				break;
		}
	};

	const handleInputClick = () => {
		const input = document.getElementById("input");
		input.click();
	};

	const handleOnChange = () => {
		const input = document.getElementById("input");
		const file = input.files[0];

		processFile(file);
	};

	return (
		<div
			id="fileInput"
			ondragenter={handleDragEvents}
			ondragover={handleDragEvents}
			ondragleave={handleDragEvents}
			ondrop={handleDragEvents}
		>
			<input
				type="file"
				id="input"
				onchange={handleOnChange}
			/>
			<div id="uploadContainer">
				<div id="bigText">
					Drop a file here to transfer
				</div>
				<div id="smallText">
					or <span> <a onclick={handleInputClick}>browse</a> to choose a file. </span>
				</div>
			</div>
		</div>
	);
};

export default FileInput;