DropZone.tsx

import React, { useState, FunctionComponent, createRef, DragEvent, ChangeEvent } from 'react';
import classNames from 'classnames';
import { useOnMount, isIE } from '@utilities';

export interface Props {
	onFileAdded?: (value: File) => any;
	disabled?: boolean;
	classes?: string;
	accepts?: string;
}

const DropZone: FunctionComponent<Props> = ({
	onFileAdded = () => {},
	disabled = false,
	classes,
	accepts = '*'
}: Props) => {
	const [highlight, setHighlight] = useState(false);
	const [file, setFile] = useState<File | undefined>();
	const fileInputRef = createRef<HTMLInputElement>();

	const overrideEventDefaults = (evt: Event | React.DragEvent<HTMLDivElement>) => {
		evt.preventDefault();
		evt.stopPropagation();
	};

	useOnMount(() => {
		window.addEventListener('dragover', overrideEventDefaults);
		window.addEventListener('drop', overrideEventDefaults);
		return () => {
			window.removeEventListener('dragover', overrideEventDefaults);
			window.removeEventListener('drop', overrideEventDefaults);
		};
	});

	const openFileDialog = () => {
		if (!disabled) {
			fileInputRef.current && fileInputRef.current.click();
		}
	};

	const handleFileAdded = (evt: ChangeEvent<HTMLInputElement>) => {
		if (!disabled) {
			const files = evt.target.files || [];
			onFileAdded(Array.from(files)[0]);
			setFile(files[0]);
		}
	};

	const onDragOver = (evt: DragEvent<HTMLDivElement>) => {
		overrideEventDefaults(evt);
		setHighlight(true);
	};

	const onDragLeave = () => {
		setHighlight(false);
	};

	const onDrop = (evt: DragEvent<HTMLDivElement>) => {
		overrideEventDefaults(evt);
		if (!disabled) {
			onFileAdded(Array.from(evt.dataTransfer.files)[0]);
			setFile(evt.dataTransfer.files[0]);
			setHighlight(false);
		}
	};

	const containerClasses = classNames(
		'border',
		'bg-white',
		'rounded',
		'shadow-inner',
		'p-4',
		'select-none',
		'cursor-pointer',
		{
			'bg-blue-100': highlight,
			'cursor-pointer': !disabled,
			'cursor-not-allowed opacity-75': disabled
		},
		classes
	);

	return (
		<div
			className={containerClasses}
			onDragOver={onDragOver}
			onDragLeave={onDragLeave}
			onDrop={onDrop}
			onClick={openFileDialog}
		>
			<input
				ref={fileInputRef}
				type="file"
				onChange={handleFileAdded}
				accept={accepts}
				className="hidden"
			/>
			{file ? (
				<div>{file.name}</div>
			) : (
				<span>{isIE ? 'Click here to select file' : 'Drop file or click here'}</span>
			)}
		</div>
	);
};

export default DropZone;