@randstad-design/orbit-multitheme/src/assets/js/components/upload.js

multitheme Front-end code based on Randstad Human Forward components

/**
 * upload.js
 * helper for file uploads
 */

/**
* Declare constants
*/
const attributeBase = 'data-rs-upload';

export class Upload {

	constructor(element) {
		this.element = element;
		this.addEventHandlers();
	}

	/**
	* Declare classes
	*/
	get classes() {
		return {
			dragOver: 'upload--drag-over'
		}
	}

	/**
	 * Add event handlers
	 */
	addEventHandlers() {
		this.element.addEventListener('dragover', (event) => {
			// prevent default to allow drop
			event.preventDefault();
			this.setReadyForDrop();
		}, false);

		this.element.addEventListener('dragleave', () => {
			this.idle();
		}, false);

		this.element.addEventListener('drop', () => {
			this.idle();
		}, false);
	}

	/**
	 * Highlight input to 'drop files'
	 */
	setReadyForDrop() {
		this.element.classList.add(this.classes.dragOver);
	}

	/**
	 * Back to default state
	 */
	idle() {
		this.element.classList.remove(this.classes.dragOver);
	}

	/**
	 * Get selector
	 */
	static getSelector() {
		return `[${attributeBase}]`;
	}
}