Merge pull request #458 from anaqreon/dragdropupload
Drag-and-drop file upload for cloud files
This commit is contained in:
hubzilla
GitHub
commit
eb03877aa4
@ -306,7 +306,8 @@ class Browser extends DAV\Browser\Plugin {
|
||||
'$folder_submit' => t('Create'),
|
||||
'$upload_header' => t('Upload file'),
|
||||
'$upload_submit' => t('Upload'),
|
||||
'$quota' => $quota
|
||||
'$quota' => $quota,
|
||||
'$dragdroptext' => t('Drop files here to immediately upload')
|
||||
));
|
||||
}
|
||||
|
||||
|
||||
6
vendor/sabre/dav/lib/DAV/Browser/Plugin.php
vendored
6
vendor/sabre/dav/lib/DAV/Browser/Plugin.php
vendored
@ -163,7 +163,7 @@ class Plugin extends DAV\ServerPlugin {
|
||||
* @return bool
|
||||
*/
|
||||
function httpPOST(RequestInterface $request, ResponseInterface $response) {
|
||||
|
||||
|
||||
$contentType = $request->getHeader('Content-Type');
|
||||
list($contentType) = explode(';', $contentType);
|
||||
if ($contentType !== 'application/x-www-form-urlencoded' &&
|
||||
@ -179,7 +179,7 @@ class Plugin extends DAV\ServerPlugin {
|
||||
|
||||
if ($this->server->emit('onBrowserPostAction', [$uri, $postVars['sabreAction'], $postVars])) {
|
||||
|
||||
switch ($postVars['sabreAction']) {
|
||||
switch ($postVars['sabreAction']) {
|
||||
|
||||
case 'mkcol' :
|
||||
if (isset($postVars['name']) && trim($postVars['name'])) {
|
||||
@ -221,7 +221,7 @@ class Plugin extends DAV\ServerPlugin {
|
||||
|
||||
if ($_FILES) $file = current($_FILES);
|
||||
else break;
|
||||
|
||||
|
||||
list(, $newName) = URLUtil::splitPath(trim($file['name']));
|
||||
if (isset($postVars['name']) && trim($postVars['name']))
|
||||
$newName = trim($postVars['name']);
|
||||
|
||||
98
view/js/mod_cloud.js
Normal file
98
view/js/mod_cloud.js
Normal file
@ -0,0 +1,98 @@
|
||||
/**
|
||||
* JavaScript for mod/cloud
|
||||
*/
|
||||
|
||||
$(document).ready(function () {
|
||||
// call initialization file
|
||||
if (window.File && window.FileList && window.FileReader) {
|
||||
DragDropUploadInit();
|
||||
}
|
||||
});
|
||||
|
||||
//
|
||||
// initialize
|
||||
function DragDropUploadInit() {
|
||||
|
||||
var fileselect = $("#fileselect"),
|
||||
filedrag = $("#filedrag");
|
||||
|
||||
// file select
|
||||
fileselect.on("change", DragDropUploadFileSelectHandler);
|
||||
|
||||
// is XHR2 available?
|
||||
var xhr = new XMLHttpRequest();
|
||||
if (xhr.upload) {
|
||||
|
||||
// file drop
|
||||
filedrag.on("dragover", DragDropUploadFileHover);
|
||||
filedrag.on("dragleave", DragDropUploadFileHover);
|
||||
filedrag.on("drop", DragDropUploadFileSelectHandler);
|
||||
filedrag.show();
|
||||
|
||||
}
|
||||
|
||||
window.filesToUpload = 0;
|
||||
window.fileUploadsCompleted = 0;
|
||||
|
||||
|
||||
}
|
||||
|
||||
// file drag hover
|
||||
function DragDropUploadFileHover(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
e.target.className = (e.type == "dragover" ? "hover" : "");
|
||||
}
|
||||
|
||||
// file selection
|
||||
function DragDropUploadFileSelectHandler(e) {
|
||||
|
||||
// cancel event and hover styling
|
||||
DragDropUploadFileHover(e);
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// upload files
|
||||
function DragDropUploadFile(file, idx) {
|
||||
|
||||
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 data = new FormData(document.getElementById("ajax-upload-files"));
|
||||
data.append('file', file);
|
||||
xhr.send(data);
|
||||
}
|
||||
@ -2040,4 +2040,25 @@ 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;
|
||||
}
|
||||
|
||||
@ -1,20 +1,26 @@
|
||||
<div id="files-mkdir-tools" class="section-content-tools-wrapper">
|
||||
<label for="files-mkdir">{{$folder_header}}</label>
|
||||
<form method="post" action="">
|
||||
<input type="hidden" name="sabreAction" value="mkcol">
|
||||
<input id="files-mkdir" type="text" name="name" class="form-control form-group">
|
||||
<button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$folder_submit}}">{{$folder_submit}}</button>
|
||||
</form>
|
||||
<div class="clear"></div>
|
||||
<label for="files-mkdir">{{$folder_header}}</label>
|
||||
<form method="post" action="">
|
||||
<input type="hidden" name="sabreAction" value="mkcol">
|
||||
<input id="files-mkdir" type="text" name="name" class="form-control form-group">
|
||||
<button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$folder_submit}}">{{$folder_submit}}</button>
|
||||
</form>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
<div id="files-upload-tools" class="section-content-tools-wrapper">
|
||||
{{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}}
|
||||
<label for="files-upload">{{$upload_header}}</label>
|
||||
<form method="post" action="" enctype="multipart/form-data">
|
||||
<input type="hidden" name="sabreAction" value="put">
|
||||
<input class="form-group" id="files-upload" type="file" name="file">
|
||||
<button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$upload_submit}}">{{$upload_submit}}</button>
|
||||
<!-- Name (optional): <input type="text" name="name"> we should rather provide a rename action in edit form-->
|
||||
</form>
|
||||
<div class="clear"></div>
|
||||
{{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" style="width: 70%;">
|
||||
<button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$upload_submit}}">{{$upload_submit}}</button>
|
||||
</form>
|
||||
<div class="clear"></div>
|
||||
<hr/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user