Fipamo/src/com/ui/FileManager.js

import Sortable from 'sortablejs';
import DataUtils from '../utils/DataUtils';

export default class FileManager {
	//--------------------------
	// constructor
	//--------------------------
	constructor(upload, input, imageList, fileList) {
		this.upload = upload;
		this.input = input;
		this.imageList = imageList;
		this.fileList = fileList;
		this.accetableFiles = ['image/jpeg', 'image/gif', 'image/png', 'image/svg'];
		this.files = [];
		this.sortedFiles = [];
		this.storage = [];
		this.start();
	}
	//--------------------------
	// methods
	//--------------------------
	start() {
		this.upload.addEventListener('dragover', e => this.handleFileActions(e), false);
		this.upload.addEventListener('drop', e => this.handleFileActions(e), false);
		this.input.addEventListener('change', e => this.handleFileActions(e), false);

		Sortable.create(this.imageList, {
			onUpdate: e => {
				let currentFiles = []; //store current list
				let items = e.target.children;
				for (let index = 0; index < items.length; index++) {
					var item = items[index];
					currentFiles.push({
						id: item.getAttribute('id'),
						earl: item.style.backgroundImage.slice(4, -1).replace(/"/g, '')
					});
				}
				this.reindexFiles(currentFiles, 0);
			}
		});
	}

	getFiles() {
		return this.files;
	}

	reindexFiles(sortOrder, step) {
		let count = sortOrder.length;
		if (step == 0) this.files = [];
		var utils = new DataUtils();
		var path = sortOrder[step].earl.split('/');
		utils.imgLoad(sortOrder[step].earl).then(blob => {
			var fresh = new File([blob], path[6], { type: blob.type });
			this.files.push(fresh);
			if (this.files.length <= count - 1) {
				this.reindexFiles(sortOrder, ++step);
			} else {
				//console.log('FILES', this.files);
			}
		});
	}

	sortFiles(files) {
		var self = this;
		this.files = []; //clear files array
		this.imageList.innerHTML = '';
		for (var i = 0, file; (file = files[i]); i++) {
			var reader = new FileReader();
			// Closure to capture the file information

			reader.onload = (theFile => {
				return function (f) {
					// sort files
					switch (theFile.type) {
						case 'image/jpg':
						case 'image/jpeg':
						case 'image/gif':
						case 'image/svg':
						case 'image/png':
							//create element and add to list
							var image = document.createElement('img');
							image.src = f.target.result;
							image.title = escape(theFile.name);
							var span = document.createElement('div');
							span.style.background =
								'url(' +
								f.target.result +
								') no-repeat center center / cover';
							span.className = 'img-item';
							image.setAttribute('id', i);
							self.storage.push([
								{
									id: 'page_image' + i,
									data: f.target.result,
									type: theFile.type,
									name: escape(theFile.name)
								}
							]);
							self.imageList.appendChild(span);
							//add to files list
							self.files.push(theFile);

							break;
					}
				};
			})(file);
			// Read in the image file as a data URL.
			reader.readAsDataURL(file);
		}
	}

	//--------------------------
	// event handlers
	//--------------------------
	handleFileActions(e) {
		e.stopPropagation();
		e.preventDefault();
		let self = this;
		let rawList = [];
		let sortedList = [];
		let notOnTheList = [];

		switch (e.type) {
			case 'dragover':
				e.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
				break;
			case 'change':
			case 'drop':
				e.type == 'drop'
					? (rawList = e.dataTransfer.files)
					: (rawList = e.target.files);
				//this.sortFiles(freshList);
				for (var i = 0, f; (f = rawList[i]); i++) {
					// check witch files are cool to upload
					if (this.accetableFiles.includes(f.type)) {
						sortedList.push(f);
					} else {
						notOnTheList.push(f);
					}
				}
				//send for sorting
				self.sortFiles(sortedList);
				break;
		}
	}
}