Merge branch 'chunk'

This commit is contained in:
zotlabs 2017-11-30 19:06:00 -08:00
commit 19ec8488e0
6 changed files with 65 additions and 33 deletions

View File

@ -10,7 +10,8 @@ class File_upload extends \Zotlabs\Web\Controller {
function post() { function post() {
// logger('file upload: ' . print_r($_REQUEST,true)); logger('file upload: ' . print_r($_REQUEST,true));
logger('file upload: ' . print_r($_FILES,true));
$channel = (($_REQUEST['channick']) ? channelx_by_nick($_REQUEST['channick']) : null); $channel = (($_REQUEST['channick']) ? channelx_by_nick($_REQUEST['channick']) : null);
@ -56,13 +57,15 @@ class File_upload extends \Zotlabs\Web\Controller {
if(array_key_exists('HTTP_CONTENT_RANGE',$_SERVER)) { if(array_key_exists('HTTP_CONTENT_RANGE',$_SERVER)) {
$pm = preg_match('/bytes (\d*)\-(\d*)\/(\d*)/',$_SERVER['HTTP_CONTENT_RANGE'],$matches); $pm = preg_match('/bytes (\d*)\-(\d*)\/(\d*)/',$_SERVER['HTTP_CONTENT_RANGE'],$matches);
if($pm) { if($pm) {
// logger('Content-Range: ' . print_r($matches,true)); logger('Content-Range: ' . print_r($matches,true));
$partial = true; $partial = true;
} }
} }
if($partial) { if($partial) {
$x = save_chunk($channel,$matches[1],$matches[2],$matches[3]); $x = save_chunk($channel,$matches[1],$matches[2],$matches[3]);
logger('save_chunk: ' . print_r($x,true));
if($x['partial']) { if($x['partial']) {
header('Range: bytes=0-' . (($x['length']) ? $x['length'] - 1 : 0)); header('Range: bytes=0-' . (($x['length']) ? $x['length'] - 1 : 0));
json_return_and_die($result); json_return_and_die($result);

View File

@ -2506,7 +2506,7 @@ function save_chunk($channel,$start,$end,$len) {
} }
if(($len - 1) == $end) { if(($len - 1) == $end) {
unlink($tmp_path); unlink($tmp_path);
$result['name'] = $_FILES['files']['tmp_name']; $result['name'] = $_FILES['files']['name'];
$result['type'] = $_FILES['files']['type']; $result['type'] = $_FILES['files']['type'];
$result['tmp_name'] = $new_path; $result['tmp_name'] = $new_path;
$result['error'] = 0; $result['error'] = 0;

View File

@ -16,26 +16,48 @@ function UploadInit() {
var fileselect = $("#files-upload"); var fileselect = $("#files-upload");
var filedrag = $("#cloud-drag-area"); var filedrag = $("#cloud-drag-area");
var submit = $("#upload-submit"); var submit = $("#upload-submit");
var count = 1;
// is XHR2 available?
var xhr = new XMLHttpRequest();
if (xhr.upload) {
// file select $('#invisible-cloud-file-upload').fileupload({
fileselect.attr("multiple", 'multiple'); url: 'file_upload',
fileselect.on("change", UploadFileSelectHandler); dataType: 'json',
dropZone: filedrag,
formData: $('#ajax-upload-files').serializeArray(),
maxChunkSize: 4 * 1024 * 1024,
// file submit add: function(e,data) {
submit.on("click", fileselect, UploadFileSelectHandler); $(data.files).each( function() { this.count = ++ count; prepareHtml(this); });
// file drop data.submit();
filedrag.on("dragover", DragDropUploadFileHover); },
filedrag.on("dragleave", DragDropUploadFileHover);
filedrag.on("drop", DragDropUploadFileSelectHandler);
progress: function(e,data) {
// there will only be one file, the one we are looking for
$(data.files).each( function() {
var idx = this.count;
// Dynamically update the percentage complete displayed in the file upload list
$('#upload-progress-' + idx).html(Math.round(data.loaded / data.total * 100) + '%');
$('#upload-progress-bar-' + idx).css('background-size', Math.round(data.loaded / data.total * 100) + '%');
});
},
stop: function(e,data) {
window.location.href = window.location.href;
} }
window.filesToUpload = 0; });
window.fileUploadsCompleted = 0;
$('#upload-submit').click(function(event) { event.preventDefault(); $('#invisible-cloud-file-upload').trigger('click'); return false;});
} }
// file drag hover // file drag hover
@ -84,8 +106,9 @@ function UploadFileSelectHandler(e) {
} }
} }
function prepareHtml(f, i) { function prepareHtml(f) {
var num = i - 1; var num = f.count - 1;
var i = f.count;
$('#cloud-index #new-upload-progress-bar-' + num.toString()).after( $('#cloud-index #new-upload-progress-bar-' + num.toString()).after(
'<tr id="new-upload-' + i + '" class="new-upload">' + '<tr id="new-upload-' + i + '" class="new-upload">' +
'<td><i class="fa ' + getIconFromType(f.type) + '" title="' + f.type + '"></i></td>' + '<td><i class="fa ' + getIconFromType(f.type) + '" title="' + f.type + '"></i></td>' +
@ -158,6 +181,7 @@ function getIconFromType(type) {
// upload files // upload files
function UploadFile(file, idx) { function UploadFile(file, idx) {
window.filesToUpload = window.filesToUpload + 1; window.filesToUpload = window.filesToUpload + 1;
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
@ -202,15 +226,15 @@ function UploadFile(file, idx) {
}); });
// POST to the entire cloud path // POST to the entire cloud path
xhr.open('post', 'file_upload', true); // xhr.open('post', 'file_upload', true);
var formfields = $("#ajax-upload-files").serializeArray(); // var formfields = $("#ajax-upload-files").serializeArray();
var data = new FormData(); // var data = new FormData();
$.each(formfields, function(i, field) { // $.each(formfields, function(i, field) {
data.append(field.name, field.value); // data.append(field.name, field.value);
}); // });
data.append('userfile', file); // data.append('userfile', file);
xhr.send(data); // xhr.send(data);
} }

View File

@ -1,3 +1,7 @@
<script src="library/blueimp_upload/js/vendor/jquery.ui.widget.js"></script>
<script src="library/blueimp_upload/js/jquery.iframe-transport.js"></script>
<script src="library/blueimp_upload/js/jquery.fileupload.js"></script>
<div class="generic-content-wrapper"> <div class="generic-content-wrapper">
{{include file="cloud_header.tpl"}} {{include file="cloud_header.tpl"}}
{{include file="cloud_directory.tpl"}} {{include file="cloud_directory.tpl"}}

View File

@ -1,3 +1,4 @@
<input id="invisible-cloud-file-upload" type="file" name="files" style="visibility:hidden;position:absolute;top:-50;left:-50;width:0;height:0;" multiple>
<div id="files-mkdir-tools" class="section-content-tools-wrapper"> <div id="files-mkdir-tools" class="section-content-tools-wrapper">
<label for="files-mkdir">{{$folder_header}}</label> <label for="files-mkdir">{{$folder_header}}</label>
<form id="mkdir-form" method="post" action="file_upload" class="acl-form" data-form_id="mkdir-form" data-allow_cid='{{$allow_cid}}' data-allow_gid='{{$allow_gid}}' data-deny_cid='{{$deny_cid}}' data-deny_gid='{{$deny_gid}}'> <form id="mkdir-form" method="post" action="file_upload" class="acl-form" data-form_id="mkdir-form" data-allow_cid='{{$allow_cid}}' data-allow_gid='{{$allow_gid}}' data-deny_cid='{{$deny_cid}}' data-deny_gid='{{$deny_gid}}'>
@ -20,12 +21,12 @@
</div> </div>
<div id="files-upload-tools" class="section-content-tools-wrapper"> <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}}{{if $quota.desc}}{{$quota.desc}}<br><br>{{/if}}{{$info}}</div>{{/if}} {{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}}{{if $quota.desc}}{{$quota.desc}}<br><br>{{/if}}{{$info}}</div>{{/if}}
<form id="ajax-upload-files" method="post" action="file_upload" enctype="multipart/form-data" class="acl-form" data-form_id="ajax-upload-files" data-allow_cid='{{$allow_cid}}' data-allow_gid='{{$allow_gid}}' data-deny_cid='{{$deny_cid}}' data-deny_gid='{{$deny_gid}}'> <form id="ajax-upload-files" method="post" action="#" enctype="multipart/form-data" class="acl-form" data-form_id="ajax-upload-files" data-allow_cid='{{$allow_cid}}' data-allow_gid='{{$allow_gid}}' data-deny_cid='{{$deny_cid}}' data-deny_gid='{{$deny_gid}}'>
<input type="hidden" name="directory" value="{{$path}}" /> <input type="hidden" name="directory" value="{{$path}}" />
<input type="hidden" name="channick" value="{{$channick}}" /> <input type="hidden" name="channick" value="{{$channick}}" />
<input type="hidden" name="return_url" value="{{$return_url}}" /> <input type="hidden" name="return_url" value="{{$return_url}}" />
<label for="files-upload">{{$upload_header}}</label> <!--label for="files-upload">{{$upload_header}}</label>
<input class="form-group pull-left" id="files-upload" type="file" name="userfile"> <input class="form-group pull-left" id="files-upload" type="file" name="files[]" multiple -->
{{include file="field_checkbox.tpl" field=$notify}} {{include file="field_checkbox.tpl" field=$notify}}
<div class="pull-right btn-group"> <div class="pull-right btn-group">
<div class="btn-group"> <div class="btn-group">
@ -34,7 +35,7 @@
<i class="jot-perms-icon fa fa-{{$lockstate}}"></i> <i class="jot-perms-icon fa fa-{{$lockstate}}"></i>
</button> </button>
{{/if}} {{/if}}
<button id="upload-submit" class="btn btn-primary btn-sm pull-right" type="submit" name="submit" value="{{$upload_submit}}">{{$upload_submit}}</button> <button id="upload-submit" class="btn btn-primary btn-sm pull-right">{{$upload_submit}}</button>
</div> </div>
</div> </div>
</form> </form>

View File

@ -52,7 +52,7 @@
<td class="d-none d-md-table-cell"></td> <td class="d-none d-md-table-cell"></td>
</tr> </tr>
{{/if}} {{/if}}
<tr id="new-upload-progress-bar--1"></tr> {{* this is needed to append the upload files in the right order *}} <tr id="new-upload-progress-bar-1"></tr> {{* this is needed to append the upload files in the right order *}}
{{foreach $entries as $item}} {{foreach $entries as $item}}
<tr id="cloud-index-{{$item.attachId}}"> <tr id="cloud-index-{{$item.attachId}}">
<td><i class="fa {{$item.iconFromType}}" title="{{$item.type}}"></i></td> <td><i class="fa {{$item.iconFromType}}" title="{{$item.type}}"></i></td>