harukin/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rework drag and drop to drag directly into files area, implement the default upload button to work with the same mechanism as drag and drop, revert 560af7a5b8 since it did not work so well with the new cloud upload mechanism

Browse Source
This commit is contained in:
Mario Vavti
2016-07-27 16:49:55 +02:00
parent 672c3d7c6d
commit f808f1601b
6 changed files with 117 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
view/js/mod_cloud.js
View File

@@ -3,96 +3,140 @@
*/
$(document).ready(function () {
// call initialization file
if (window.File && window.FileList && window.FileReader) {
DragDropUploadInit();
}
// call initialization file
if (window.File && window.FileList && window.FileReader) {
UploadInit();
}
});
//
// initialize
function DragDropUploadInit() {
function UploadInit() {
var fileselect = $("#fileselect"),
filedrag = $("#filedrag");
var fileselect = $("#files-upload");
var filedrag = $("#cloud-drag-area");
var submit = $("#upload-submit");
// file select
fileselect.on("change", DragDropUploadFileSelectHandler);
// is XHR2 available?
var xhr = new XMLHttpRequest();
if (xhr.upload) {
// is XHR2 available?
var xhr = new XMLHttpRequest();
if (xhr.upload) {
// file select
fileselect.on("change", UploadFileSelectHandler);
// file drop
filedrag.on("dragover", DragDropUploadFileHover);
filedrag.on("dragleave", DragDropUploadFileHover);
filedrag.on("drop", DragDropUploadFileSelectHandler);
filedrag.show();
}
window.filesToUpload = 0;
window.fileUploadsCompleted = 0;
// file submit
submit.on("click", fileselect, UploadFileSelectHandler);
// file drop
filedrag.on("dragover", DragDropUploadFileHover);
filedrag.on("dragleave", DragDropUploadFileHover);
filedrag.on("drop", DragDropUploadFileSelectHandler);
}
window.filesToUpload = 0;
window.fileUploadsCompleted = 0;
}
// file drag hover
function DragDropUploadFileHover(e) {
e.stopPropagation();
e.preventDefault();
e.target.className = (e.type == "dragover" ? "hover" : "");
e.stopPropagation();
e.preventDefault();
e.currentTarget.className = (e.type == "dragover" ? "hover" : "");
}
// file selection
// file selection via drag/drop
function DragDropUploadFileSelectHandler(e) {
// cancel event and hover styling
DragDropUploadFileHover(e);
// cancel event and hover styling
DragDropUploadFileHover(e);
// fetch FileList object
var files = e.target.files || e.originalEvent.dataTransfer.files;
// fetch FileList object
var files = e.target.files || e.originalEvent.dataTransfer.files;
$("#file-upload-list").empty();
// process all File objects
for (var i = 0, f; f = files[i]; i++) {
$("#file-upload-list").append(
"<p>" + "<span id='upload-progress-" + i + "'></span> -> File: <strong>" + f.name +
"</strong> type: <strong>" + f.type +
"</strong> size: <strong>" + f.size +
"</strong> bytes</p>"
);
DragDropUploadFile(f, i);
}
$('.new-upload').remove();
// process all File objects
for (var i = 0, f; f = files[i]; i++) {
prepareHtml(f, i);
UploadFile(f, i);
}
}
// file selection via input
function UploadFileSelectHandler(e) {
// fetch FileList object
if(e.type === 'click') {
e.preventDefault();
var files = e.data[0].files;
}
else {
var files = e.target.files;
}
$('.new-upload').remove();
// process all File objects
for (var i = 0, f; f = files[i]; i++) {
prepareHtml(f, i);
if(e.type === 'click')
UploadFile(f, i);
}
}
function prepareHtml(f, i) {
$("#cloud-index").prepend(
"<tr class='new-upload'>" + "<td id='upload-progress-" + i + "'></td><td>" + f.name +
"</td><td>" + f.type +
"</td><td></td><td></td><td></td><td></td><td>" + formatSizeUnits(f.size) +
"</td><td></td></tr>"
);
}
function formatSizeUnits(bytes){
if (bytes>=1000000000) {bytes=(bytes/1000000000).toFixed(2)+' GB';}
else if (bytes>=1000000) {bytes=(bytes/1000000).toFixed(2)+' MB';}
else if (bytes>=1000) {bytes=(bytes/1000).toFixed(2)+' KB';}
else if (bytes>1) {bytes=bytes+' bytes';}
else if (bytes==1) {bytes=bytes+' byte';}
else {bytes='0 byte';}
return bytes;
}
// upload files
function DragDropUploadFile(file, idx) {
function UploadFile(file, idx) {
window.filesToUpload = window.filesToUpload + 1;
window.filesToUpload = window.filesToUpload + 1;
var xhr = new XMLHttpRequest();
xhr.withCredentials = true; // Include the SESSION cookie info for authentication
(xhr.upload || xhr).addEventListener('progress', function (e) {
var done = e.position || e.loaded;
var total = e.totalSize || e.total;
// Dynamically update the percentage complete displayed in the file upload list
$('#upload-progress-' + idx).html(Math.round(done / total * 100) + '%');
});
xhr.addEventListener('load', function (e) {
//console.log('xhr upload complete', e);
window.fileUploadsCompleted = window.fileUploadsCompleted + 1;
// When all the uploads have completed, refresh the page
if (window.filesToUpload > 0 && window.fileUploadsCompleted === window.filesToUpload) {
window.fileUploadsCompleted = window.filesToUpload = 0;
// After uploads complete, refresh browser window to display new files
window.location.href = window.location.href;
}
});
// POST to the entire cloud path
xhr.open('post', window.location.pathname, true);
var xhr = new XMLHttpRequest();
var data = new FormData(document.getElementById("ajax-upload-files"));
data.append('file[]', file);
xhr.send(data);
xhr.withCredentials = true; // Include the SESSION cookie info for authentication
(xhr.upload || xhr).addEventListener('progress', function (e) {
var done = e.position || e.loaded;
var total = e.totalSize || e.total;
// Dynamically update the percentage complete displayed in the file upload list
$('#upload-progress-' + idx).html(Math.round(done / total * 100) + '%');
});
xhr.addEventListener('load', function (e) {
//console.log('xhr upload complete', e);
window.fileUploadsCompleted = window.fileUploadsCompleted + 1;
// When all the uploads have completed, refresh the page
if (window.filesToUpload > 0 && window.fileUploadsCompleted === window.filesToUpload) {
window.fileUploadsCompleted = window.filesToUpload = 0;
// After uploads complete, refresh browser window to display new files
window.location.href = window.location.href;
}
});
// POST to the entire cloud path
xhr.open('post', window.location.pathname, true);
var data = new FormData(document.getElementById("ajax-upload-files"));
data.append('file', file);
xhr.send(data);
}