CoreLibs/development
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Various QQ File uploaders updates

Browse Source
This commit is contained in:
Clemens Schwaighofer
2018-07-26 14:58:44 +09:00
parent 71ab3e27bd
commit 03ff1862c1
6 changed files with 207 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
www/admin/qq_file_upload_ajax.php
View File

@@ -8,18 +8,20 @@ $PRINT_ALL = 1;
require 'config.inc';
// class load
$base = new CoreLibs\Basic();
$base->debug('AJAX UPLOAD', 'START Backend');
// set max upload size
$MAX_UPLOAD_SIZE = $base->StringByteFormat(ini_get('upload_max_filesize'));
// test for qqFileUploader (AJAX side)
$allowedExtensions = array ('csv', 'zip', 'jpg', 'pdf');
$allowedExtensions = array ('csv', 'zip', 'jpg', 'pdf', 'bz2');
$sizeLimit = $MAX_UPLOAD_SIZE; // as set in php ini
$base->debug('AJAX UPLOAD', 'Size: '.$sizeLimit.', Memory Limit: '.ini_get('memory_limit'));
$uploader = new CoreLibs\Upload\qqFileUploader($allowedExtensions, $sizeLimit);
// either in post or get
$_action= $_POST['action'] ? $_POST['action'] : $_GET['action'];
$_task_uid = $_POST['task_uid'] ? $_POST['task_uid'] : $_GET['task_uid'];
$base->debug('AJAX UPLOAD', 'Action: '.$_action.', Task UID: '.$_task_uid);
$get_post['start'] = microtime(true);
$base->debug('AJAX UPLOAD', 'Action: '.$_action.', Task UID: '.$_task_uid.' => '.$base->dateStringFormat($get_post['start']));
$upload_path = ROOT.MEDIA.UPLOADS;
$get_post['result'] = $uploader->handleUpload($upload_path, false);
@@ -30,10 +32,13 @@ $get_post['filename'] = $uploader->uploadFileName;
$get_post['type'] = $uploader->uploadFileExt;
$get_post['filesize'] = filesize($uploader->uploadFileName);
$get_post['filesize_formated'] = $base->ByteStringFormat($get_post['filesize']);
$get_post['end'] = microtime(true);
$get_post['time'] = $get_post['end'] - $get_post['start'];
$base->debug('AJAX RESULT', $base->printAr($get_post));
// return data
$output = htmlspecialchars(json_encode($get_post), ENT_NOQUOTES);
$base->debug('AJAX USAGE', $output);
// $base->debug('AJAX JSON', $output);
print $output;
$base->printErrorMsg();

229
www/admin/qq_file_upload_front.php
View File

@@ -17,6 +17,7 @@ $base->debug('UPLOADED FRONT', 'With max size: '.$MAX_UPLOAD_SIZE);
<html>
<head>
<title>File upload AJAX</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style type="text/css">
.normal {
width: 25%;
@@ -30,12 +31,15 @@ $base->debug('UPLOADED FRONT', 'With max size: '.$MAX_UPLOAD_SIZE);
font-weight: bold;
color: red;
}
.uploadCancel {
font-weight: bold;
color: orange;
}
.qq-file-upload-button {
border: 1px solid #999999;
border-radius: 2px 2px 2px 2px;
box-shadow: 0 10px rgba(255, 255, 255, 0.3) inset, 0 10px rgba(255, 255, 255, 0.2) inset, 0 10px 2px rgba(255, 255, 255, 0.25) inset, 0 -1px 2px rgba(0, 0, 0, 0.3) inset;
height: 17px;
text-align: center;
padding: 3px 5px 3px;
background-color: #cacaca;
@@ -50,102 +54,161 @@ $base->debug('UPLOADED FRONT', 'With max size: '.$MAX_UPLOAD_SIZE);
border: 1px solid red;
background-color: rgba(80, 80, 80, 0.5);
}
.qq-upload-cancel {
border: 1px solid red;
border-radius: 2px;
text-align: center;
padding: 3px 5px 3px;
background-color: #eb652d;
margin: 2px;
}
.qq-upload-cancel:hover {
background-color: #eb8686;
}
.qq-upload-cancel:active {
border: 1px solid black;
background-color: #eb2d2d;
}
.progressBarOutside {
background-color: #f1f1f1;
color: black;
width: 100%;
}
.progressBarInside {
background-color: #1e9e84;
border-radius: 4px;
padding: 0.01em;
text-align: center;
font-size: 0.8em;
}
</style>
<script src="layout/default/javascript/prototype.js" type="text/javascript"></script>
<script src="layout/default/javascript/file-uploader/fileuploader.js" type="text/javascript"></script>
<script type="text/javascript">
function formatBytes(bytes)
{
var i = -1;
do {
bytes = bytes / 1024;
i++;
} while (bytes > 99);
function formatBytes(bytes)
{
var i = -1;
do {
bytes = bytes / 1024;
i++;
} while (bytes > 99);
// return Math.max(bytes, 0.1).toFixed(1) + ['kB', 'MB', 'GB', 'TB', 'PB', 'EB'][i];
return parseFloat(Math.round(bytes * Math.pow(10, 2)) / Math.pow(10, 2)) + ['kB', 'MB', 'GB', 'TB', 'PB', 'EB'][i];
}
var MAX_UPLOAD_SIZE = <?=$MAX_UPLOAD_SIZE;?>;
// function to add an AJAX uploadeder to the set
function createUploaderSin(divName, divNumber) {
divID = divName + '_' + divNumber;
console.log('Div: %s, Number: %s => ID: %s', divName, divNumber, divID);
var uploader = new qq.FileUploaderBasic({
// element: document.getElementById(divID),
element: $(divID),
action: 'qq_file_upload_ajax.php',
multiple: false,
button: $(divID),
allowedExtensions: ['csv', 'zip', 'jpg', 'pdf'],
sizeLimit: MAX_UPLOAD_SIZE, // size set from php ini
name: divID,
params: {
'file_pos': divNumber, // we need to add here ID or something
'action': 'upload',
'task_uid': divNumber // -> test for some internal uid
},
onSubmit: function(id, filename, target) {
console.log('File upload: "%s", ID: "%s" => "%s"', filename, id, target);
// remove any assigned error classes and flags
if ($(target + '_Progress').hasClassName('uploadError'))
{
$(target + '_Progress').className = '';
$(target + '_Error').value = 0;
}
$(target + '_Progress').innerHTML = 'Start uploading file: ' + filename;
// disabled stuff here
},
onProgress: function(id, filename, loaded, total, target) {
console.log('Progress for file: "%s", ID: "%s", loaded: "%s", total: "%s" => "%s"', id, filename, loaded, total, target);
var percent = Math.round((loaded / total) * 100);
$(target + '_Progress').innerHTML = 'Uploading: ' + filename + ', ' + percent + '%' + ' (' + formatBytes(loaded) + '/' + formatBytes(total) + ')';
},
onComplete: function(id, filename, responseJSON, target) {
console.log('File upload for file "%s", id "%s" done with status "%s" => "%s", And success: %s', filename, id, responseJSON, target, responseJSON.result.success);
if (responseJSON.result.success)
{
$(target + '_Progress').innerHTML = 'Uploaded: ' + filename + ' (' + responseJSON.filesize_formated + ')';
// also write hidden vars for this (file name, etc)
// for that we replace the divName part from the target and get just the pos number ?
// $(target + 'Name').value = filename;
// $(target + 'NameUpload').value = responseJSON.filename;
// $(target + 'Type').value = responseJSON.type;
// $(target + 'Size').value = responseJSON.filesize;
}
else
{
// set the error class
$(target + '_Progress').className = 'uploadError';
// flag error
$(target + '_Error').value = 1;
// and write the error
$(target + '_Progress').innerHTML = 'UPLOAD FAILED FOR FILE: ' + filename;
}
// renable stuff here
},
/*showMessage: function(message) {
console.log('MESSAGE: %s', message);
}, */
debug: true
});
// console.log('INIT Nr %s => cnt: %s', divNumber, uploader);
return uploader;
}
// return Math.max(bytes, 0.1).toFixed(1) + ['kB', 'MB', 'GB', 'TB', 'PB', 'EB'][i];
return parseFloat(Math.round(bytes * Math.pow(10, 2)) / Math.pow(10, 2)) + ['kB', 'MB', 'GB', 'TB', 'PB', 'EB'][i];
}
var MAX_UPLOAD_SIZE = <?=$MAX_UPLOAD_SIZE;?>;
// function to add an AJAX uploadeder to the set
function createUploaderSin(divName, divNumber) {
divID = divName + '_' + divNumber;
console.log('Div: %s, Number: %s => ID: %s', divName, divNumber, divID);
$(divID + '_Cancel').hide();
var uploader = new qq.FileUploaderBasic({
// element: document.getElementById(divID),
element: $(divID),
cancel: $(divID + '_Cancel'),
action: 'qq_file_upload_ajax.php',
multiple: false,
button: $(divID),
allowedExtensions: ['csv', 'zip', 'jpg', 'pdf', 'bz2'],
sizeLimit: MAX_UPLOAD_SIZE, // size set from php ini
name: divID,
params: {
'file_pos': divNumber, // we need to add here ID or something
'action': 'upload',
'task_uid': divNumber // -> test for some internal uid
},
onSubmit: function(id, filename, target) {
console.log('File upload: "%s", ID: "%s" => "%s"', filename, id, target);
// remove any assigned error classes and flags
if ($(target + '_ProgressText').hasClassName('uploadError') || $(target + '_ProgressText').hasClassName('uploadCancel')) {
$(target + '_ProgressText').className = '';
$(target + '_Error').value = 0;
}
$(target + '_ProgressText').innerHTML = 'Start uploading file: ' + filename;
$(target + '_Cancel').show();
// disabled stuff here
},
onProgress: function(id, filename, loaded, total, target) {
console.log('Progress for file: "%s", ID: "%s", loaded: "%s", total: "%s" => "%s"', id, filename, loaded, total, target);
var percent = Math.round((loaded / total) * 100);
$(target + '_ProgressBar').innerHTML = percent + '%';
$(target + '_ProgressBar').style.width = percent + '%';
$(target + '_ProgressText').innerHTML = 'Uploading: ' + filename + ', ' + formatBytes(loaded) + '/' + formatBytes(total);
},
onComplete: function(id, filename, responseJSON, target) {
console.log('File upload for file "%s", id "%s" done with status "%s" => "%s", And success: %s', filename, id, responseJSON, target, responseJSON.result.success);
if (responseJSON.result.success) {
$(target + '_ProgressBar').innerHTML = '100%';
$(target + '_ProgressBar').style.width = '100%';
$(target + '_ProgressText').innerHTML = 'Uploaded: ' + filename + ' (' + responseJSON.filesize_formated + ')';
// also write hidden vars for this (file name, etc)
// for that we replace the divName part from the target and get just the pos number ?
// $(target + 'Name').value = filename;
// $(target + 'NameUpload').value = responseJSON.filename;
// $(target + 'Type').value = responseJSON.type;
// $(target + 'Size').value = responseJSON.filesize;
} else {
// set the error class
$(target + '_ProgressText').className = 'uploadError';
// flag error
$(target + '_Error').value = 1;
// and write the error
$(target + '_ProgressText').innerHTML = 'UPLOAD FAILED FOR FILE: ' + filename;
}
// renable stuff here
$(target + '_Cancel').hide();
},
onCancel: function (id, filename, target) {
// cancel upload
console.log('File upload cancled for file "%s", id "%s"', filename, id);
// upload cancel
$(target + '_ProgressText').className = 'uploadCancel';
$(target + '_Error').value = 1;
$(target + '_ProgressText').innerHTML = 'UPLOAD CANCELED FOR FILE: ' + filename;
$(target + '_Cancel').hide();
},
/*showMessage: function(message) {
console.log('MESSAGE: %s', message);
}, */
debug: true
});
// console.log('INIT Nr %s => cnt: %s', divNumber, uploader);
return uploader;
}
</script>
</head>
<body>
<div id="masterGroup">
<div>File upload via AJAX</div>
<div>File upload via AJAX (MAX SIZE: <?=$base->byteStringFormat($MAX_UPLOAD_SIZE);?>)</div>
<div class="flx-s">
<div id="Uploader_3WD7MAFmjAux_dlvvu13tezNj_XeSO0Ovauli0_MF5tISORiay7" class="normal qq-file-upload-button">Upload File</div>
<div id="Uploader_3WD7MAFmjAux_dlvvu13tezNj_XeSO0Ovauli0_MF5tISORiay7_Progress"></div>
<div id="Uploader_3WD7MAFmjAux_dlvvu13tezNj_XeSO0Ovauli0_MF5tISORiay7" class="normal qq-file-upload-button" style="width: 20%">Upload File</div>
<div style="width: 5%">
<div id="Uploader_3WD7MAFmjAux_dlvvu13tezNj_XeSO0Ovauli0_MF5tISORiay7_Cancel" class="qq-upload-cancel">X</div>
</div>
<div style="width: 75%; padding: 5px;">
<div id="Uploader_3WD7MAFmjAux_dlvvu13tezNj_XeSO0Ovauli0_MF5tISORiay7_ProgressText"></div>
<div class="progressBarOutside">
<div class="progressBarInside" id="Uploader_3WD7MAFmjAux_dlvvu13tezNj_XeSO0Ovauli0_MF5tISORiay7_ProgressBar" style="width: 0%">0%</div>
</div>
</div>
<input type="hidden" name="Uploader_3WD7MAFmjAux_dlvvu13tezNj_XeSO0Ovauli0_MF5tISORiay7_Error" id="Uploader_3WD7MAFmjAux_dlvvu13tezNj_XeSO0Ovauli0_MF5tISORiay7_Error" value="">
</div>
<div class="flx-s">
<div id="Uploader_3WD7MAFmjAux_dlvvu13tezNj_XeSO0Ovauli0_Ww9iWKrl3Xou" class="normal qq-file-upload-button">Upload File</div>
<div id="Uploader_3WD7MAFmjAux_dlvvu13tezNj_XeSO0Ovauli0_Ww9iWKrl3Xou_Progress"></div>
<div id="Uploader_3WD7MAFmjAux_dlvvu13tezNj_XeSO0Ovauli0_Ww9iWKrl3Xou" class="normal qq-file-upload-button" style="width: 20%">Upload File</div>
<div style="width: 5%">
<div id="Uploader_3WD7MAFmjAux_dlvvu13tezNj_XeSO0Ovauli0_Ww9iWKrl3Xou_Cancel" class="qq-upload-cancel">X</div>
</div>
<div style="width: 75%; padding: 5px;">
<div id="Uploader_3WD7MAFmjAux_dlvvu13tezNj_XeSO0Ovauli0_Ww9iWKrl3Xou_ProgressText"></div>
<div class="progressBarOutside">
<div class="progressBarInside" id="Uploader_3WD7MAFmjAux_dlvvu13tezNj_XeSO0Ovauli0_Ww9iWKrl3Xou_ProgressBar" style="width: 0%">0%</div>
</div>
</div>
<input type="hidden" name="Uploader_3WD7MAFmjAux_dlvvu13tezNj_XeSO0Ovauli0_Ww9iWKrl3Xou_Error" id="Uploader_3WD7MAFmjAux_dlvvu13tezNj_XeSO0Ovauli0_Ww9iWKrl3Xou_Error" value="">
</div>
</div>

5
www/admin/various_class_test.php
View File

@@ -10,6 +10,8 @@ require 'config.inc' ;
DEFINE('SET_SESSION_NAME', EDIT_SESSION_NAME);
$base = new CoreLibs\Basic();
print "THIS HOST: ".HOST_NAME.", with PROTOCOL: ".HOST_PROTOCOL." is running SSL: ".HOST_SSL."<br>";
// $test = array (
// 'A' => array (
// 'B' => array (),
@@ -31,6 +33,9 @@ $base->debug('ARRAY', $base->printAr($test));
function rec($pre, $cur, $node = array ())
{
if (!is_array($node)) {
$node = array ();
}
print "<div style='color: green;'>#### PRE: ".$pre.", CUR: ".$cur.", N-c: ".count($node)." [".join('|', array_keys($node))."]</div>";
if (!$pre) {
print "** <span style='color: red;'>NEW</span><br>";