se/SE/se-lib/TableAjax.php.upload.js

// @require variables:
if ('undefined' === typeof URL_UPLOAD_FILES_AJAX) throw "Missing URL_UPLOAD_FILES_AJAX";

var this__dragOverChecker = (function () {
	var _node = null
	var _pk = null
	var _ns = null
	var _overlayNode = null
	var markNodeHoverOn = function (node, pk, ns) {
		if (!_overlayNode) {
			_overlayNode = document.createElement('div')
			_overlayNode.style.backgroundColor = '#03a9f4'
			_overlayNode.style.opacity = '0.2'
			_overlayNode.style.position = 'absolute'
			document.body.appendChild(_overlayNode)
			_overlayNode.appendChild(document.createTextNode('drag file...'))
		}
		var bbox = node.getBoundingClientRect()
		_overlayNode.style.top = ((window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0) + bbox.top) + 'px'
		_overlayNode.style.left = '0px' // bbox.left + 'px'
		_overlayNode.style.width = '100%' // bbox.width + 'px'
		_overlayNode.style.height = bbox.height + 'px'
		_overlayNode.setAttribute('ondrop', 'p5TA_onDrop(event, \''+pk+'\', \''+ns+'\')')
		_overlayNode.setAttribute('ondragover', 'p5TA_overlay_onDragOver(event, this, \''+pk+'\', \''+ns+'\')')
	}
	var markNodeHoverOff = function () {
		if (_overlayNode && _overlayNode.parentNode) _overlayNode.parentNode.removeChild(_overlayNode)
		_overlayNode = null
	}
	var _removeOverlayTimeoutId = null
	return {
		update: function (node, pk, ns) {
			_ns = ns
			if (null !== _pk && _pk !== pk) {
				markNodeHoverOff()
			}
			if (_pk !== pk) {
				if (null !== node) markNodeHoverOn(node, pk, ns)
			}
			_pk = pk
			if (null !== node) _node = node
			if (_removeOverlayTimeoutId) clearTimeout(_removeOverlayTimeoutId)
			_removeOverlayTimeoutId = setTimeout(markNodeHoverOff, 1000)
		},
		removeOverlay: function () {
			markNodeHoverOff()
		},
	}
})();

function p5Utils__getFilesFromDropEvent(event) {
	var dt = event.dataTransfer
	var files = []
	if (dt.items) { // Use DataTransferItemList interface to access the file(s)
		for (var i = 0; i < dt.items.length; i++) {
			if (dt.items[i].kind == 'file') {
				var file = dt.items[i].getAsFile();
				files.push(file)
			}
		}
	} else { // Use DataTransfer interface to access the file(s)
		for (var i=0; i < dt.files.length; i++) {
			files.push(dt.files[i])
		}
	}
	return files
}

function p5TA_uploadWithProgress(files, ns, pk, callbacks) {
	var formData = new FormData()
	formData.append('namespace', ns)
	formData.append('primaryKey', pk)
	files.forEach(function (file, idx) {
		formData.append('file' + idx, file)
	})

	var xhr = new XMLHttpRequest()
	xhr.withCredentials = true
	xhr.open('POST', URL_UPLOAD_FILES_AJAX)
	xhr.onerror = function (e) {
		if (callbacks && callbacks.onError) {
			callbacks.onError(e)
		} else {
			console.log('error', e);
		}
	}
	if (xhr.upload && callbacks && callbacks.onProgress) {
		xhr.upload.onprogress = function __onProgress(event) {
			// event.loaded / event.total * 100; // event.lengthComputable
			callbacks.onProgress(event.loaded / event.total * 100)
		};
	}
	xhr.onload = function (e) {
		if (callbacks && callbacks.onLoad) {
			callbacks.onLoad(e.target.responseText)
		} else {
			console.log('onload e.target.responseText:', e.target.responseText, 'event', e)
		}
	}
	xhr.send(formData)
}

function p5TA_uploadFiles(files, ns, pk) {
	var formData = new FormData()
	formData.append('namespace', ns)
	formData.append('primaryKey', pk)
	files.forEach(function (file, idx) {
		formData.append('file' + idx, file)
	})

	window.fetch(URL_UPLOAD_FILES_AJAX, {
		method: 'POST',
		body: formData,
		credentials: 'same-origin',
	}).then(function (response) {
		return response.json()
	}).then(function (response) {
		p5UI__notifyAjaxCallback(response)
	}).catch(function(error) {
		p5UI__notifyAjaxCallback({ type: 'error', msg: error })
	})
}

function p5TA_onDrop(event, pk, ns) {
	event.preventDefault()
	var files = p5Utils__getFilesFromDropEvent(event)
	if (!files) {
		p5UI__notifyAjaxCallback({
			type: 'info',
			msg: 'brak plików',
		})
		return false
	}
	p5TA_uploadFiles(files, ns, pk)
	this__dragOverChecker.removeOverlay()
}

function p5TA_onDragOver(e, n, pk, ns) {
	e.preventDefault();
	this__dragOverChecker.update(n, pk, ns)
}

function p5TA_overlay_onDragOver(e, n, pk, ns) {
	e.preventDefault();
	this__dragOverChecker.update(null, pk, ns)
}

function p5TA_onDragEnd(e, n, pk, ns) {
	var dt = e.dataTransfer;
	if (dt.items) { // Use DataTransferItemList interface to remove the drag data
		for (var i = 0; i < dt.items.length; i++) {
			dt.items.remove(i);
		}
	} else { // Use DataTransfer interface to remove the drag data
		e.dataTransfer.clearData();
	}
}

global.p5TA_onDrop = p5TA_onDrop
global.p5TA_onDragOver = p5TA_onDragOver
global.p5TA_onDragEnd = p5TA_onDragEnd
global.p5TA_overlay_onDragOver = p5TA_overlay_onDragOver
global.p5Utils__getFilesFromDropEvent = p5Utils__getFilesFromDropEvent
global.p5TA_uploadWithProgress = p5TA_uploadWithProgress