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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
Zotlabs/Storage/Browser.php
View File

@ -69,81 +69,6 @@ class Browser extends DAV\Browser\Plugin {
}
}
/**
* Extend from parent to add our own listeners
*/
function initialize(DAV\Server $server) {
parent::initialize($server);
if ($this->enablePost) {
$this->server->on('onBrowserPostAction', [$this, 'cloudPostAction']);
}
}
/**
* Handles POST requests for tree operations.
*
* @param string $uri
* @param string $action
* @param array $postVars
* @return boolean false will stop other events in the beforeMethod chain to execute
*/
function cloudPostAction($uri, $action, $postVars) {
switch ($postVars['sabreAction']) {
case 'mkcol' :
if (isset($postVars['name']) && trim($postVars['name'])) {
// Using basename() because we won't allow slashes
list(, $folderName) = \Sabre\HTTP\URLUtil::splitPath(trim($postVars['name']));
if (isset($postVars['resourceType'])) {
$resourceType = explode(',', $postVars['resourceType']);
} else {
$resourceType = ['{DAV:}collection'];
}
$properties = [];
foreach ($postVars as $varName => $varValue) {
// Any _POST variable in clark notation is treated
// like a property.
if ($varName[0] === '{') {
// PHP will convert any dots to underscores.
// This leaves us with no way to differentiate
// the two.
// Therefore we replace the string *DOT* with a
// real dot. * is not allowed in uris so we
// should be good.
$varName = str_replace('*DOT*', '.', $varName);
$properties[$varName] = $varValue;
}
}
$mkCol = new DAV\MkCol(
$resourceType,
$properties
);
$this->server->createCollection($uri . '/' . $folderName, $mkCol);
}
break;
case 'put' :
if ($_FILES)
$file = current($_FILES);
else
break;
for ($i = 0; $i < count($file['name']); $i++) {
list(, $newName) = \Sabre\HTTP\URLUtil::splitPath(trim($file['name'][$i]));
if (is_uploaded_file($file['tmp_name'][$i])) {
$this->server->createFile($uri . '/' . $newName, fopen($file['tmp_name'][$i], 'r'));
}
}
break;
}
return false;
}
/**
* @brief Creates the directory listing for the given path.
*

4
view/css/mod_cloud.css
View File

@ -41,3 +41,7 @@
padding: 7px 10px;
width: 100%;
}
#cloud-drag-area.hover {
box-shadow: inset 0 0px 7px #5cb85c;
}

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);
}

21
view/theme/redbasic/css/style.css
View File

@ -2042,24 +2042,3 @@ dl.bb-dl > dd > li {
#wiki-preview img {
max-width: 100%;
}
#filedrag
{
display: none;
font-weight: bold;
text-align: center;
padding: 1em 0;
margin: 1em 0;
color: #555;
border: 2px dashed #555;
border-radius: 7px;
cursor: default;
}
#filedrag.hover
{
color: #f00;
border-color: #f00;
border-style: solid;
box-shadow: inset 0 3px 4px #888;
}

10
view/tpl/cloud_actionspanel.tpl
View File

@ -11,16 +11,10 @@
{{if $quota.limit || $quota.used}}<div class="{{if $quota.warning}}section-content-danger-wrapper{{else}}section-content-info-wrapper{{/if}}">{{if $quota.warning}}<strong>{{$quota.warning}} </strong>{{/if}}{{$quota.desc}}</div>{{/if}}
<form id="ajax-upload-files" method="post" action="" enctype="multipart/form-data">
<input type="hidden" name="sabreAction" value="put">
<div>
<div id="filedrag" style="height: 7em;"><br>{{$dragdroptext}}</div>
</div>
<div id="file-upload-list"></div>
<div class="clear"></div>
<label for="files-upload">{{$upload_header}}</label>
<div class="clear"></div>
<input class="form-group pull-left" id="files-upload" type="file" name="file[]" multiple>
<button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$upload_submit}}">{{$upload_submit}}</button>
<input class="form-group pull-left" id="files-upload" type="file" name="file" multiple>
<button id="upload-submit" class="btn btn-primary btn-sm pull-right" type="submit" value="{{$upload_submit}}">{{$upload_submit}}</button>
</form>
<div class="clear"></div>
<hr/>
</div>

2
view/tpl/cloud_directory.tpl
View File

@ -1,4 +1,4 @@
<div class="section-content-wrapper-np">
<div id="cloud-drag-area" class="section-content-wrapper-np">
<table id="cloud-index">
<tr>
<th width="1%"></th>