cordis/client/webapp/elements/overlay-upload-drop-target.ts

import * as electronRemote from '@electron/remote';
const electronConsole = electronRemote.getGlobal('console') as Console;
import Logger from '../../../logger/logger';
const LOG = Logger.create(__filename, electronConsole);

import { Channel } from '../data-types';
import BaseElements from './require/base-elements';
import Q from '../q-module';
import createUploadOverlayFromDataTransferItem from './overlay-upload-datatransfer';
import CombinedGuild from '../guild-combined';

export default function createUploadDropTarget(document: Document, q: Q, guild: CombinedGuild, channel: Channel): HTMLElement {
	let element = BaseElements.createOverlay(document, { class: 'content drop-target', content: [
		// TODO: icon?
		{ class: 'message', content: 'Upload to #' + channel.name }
	] });
	element.addEventListener('dragover', (e) => {
		e.preventDefault();
		e.stopPropagation();
	});
	element.addEventListener('dragleave', (e) => {
		e.preventDefault();
		e.stopPropagation();
		if (element.parentElement) {
			element.parentElement.removeChild(element);
		}
	});
	element.addEventListener('drop', (e) => {
		e.preventDefault();
		element.parentElement?.removeChild(element);
		let fileTransferItem: DataTransferItem | null = null;
		for (let item of e.dataTransfer?.items ?? []) {
			if (item.kind == 'file') {
				e.preventDefault(); // don't continue the paste
				fileTransferItem = item;
				break;
			}
		}
		if (fileTransferItem) {
			let element = createUploadOverlayFromDataTransferItem(document, guild, channel, fileTransferItem);
			document.body.appendChild(element);
			q.$$$(element, '.text-input').focus();
		} else {
			LOG.debug('dropped non-file');
		}
	});
	return element;
}