// @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 checkStatus(response) { if (response.status >= 200 && response.status < 300) { return response } else { var error = new Error(response.statusText) error.response = response throw error } }).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