r31k
/
bludit
2
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Upload manager, multiples files

This commit is contained in:
Diego Najar 2018-04-09 22:56:12 +02:00
parent 070a0c40fe
commit 2b2e24c84a
6 changed files with 141 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

115
bl-kernel/admin/themes/booty/html/media.php
View File

@ -1,44 +1,54 @@
<?php <?php
// Preload the first 10 files to not call via AJAX the first time the user open the media // Preload the first 10 files to not call via AJAX when the user open the first time the media manager
$listOfFiles = Filesystem::listFiles(PATH_UPLOADS, '*', '*', $sortByDate=true, $chunk=false); $listOfFiles = Filesystem::listFiles(PATH_UPLOADS_THUMBNAILS, '*', '*', $GLOBALS['BLUDIT_MEDIA_MANAGER_SORT_BY_DATE'], false);
$listOfFilesByPage = array_chunk($listOfFiles, 10); $listOfFilesByPage = array_chunk($listOfFiles, $GLOBALS['BLUDIT_MEDIA_MANAGER_AMOUNT_OF_FILES']);
$preLoadFiles = array(); $preLoadFiles = array();
foreach ($listOfFilesByPage[0] as $file) { foreach ($listOfFilesByPage[0] as $file) {
array_push($preLoadFiles, basename($file)); array_push($preLoadFiles, basename($file));
} }
// Amount of pages of files, for the paginator // Amount of pages for the paginator
$amountOfPages = count($listOfFilesByPage); $amountOfPages = count($listOfFilesByPage);
?> ?>
<div id="bluditMediaModal" class="modal fade" tabindex="-1" role="dialog"> <div id="jsbluditMediaModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg"> <div class="modal-dialog modal-lg">
<div class="modal-content"> <div class="modal-content">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col p-3"> <div class="col p-3">
<h3>Bludit Media Manager</h3>
<table id="bluditMediaTable" class="table"> <!--
<tbody> UPLOAD INPUT
<tr> -->
<td style="width:120px"> <h3 class="mt-2 mb-3">Upload</h3>
<img class="img-thumbnail" alt="200x200" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1627e1b2b7e%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1627e1b2b7e%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.65%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="width: 100px; height: 100px;">
</td> <!-- Form and Input file -->
<td> <form name="bluditFormUpload" id="jsbluditFormUpload" enctype="multipart/form-data">
<div>example.jpg</div> <input type="hidden" name="tokenCSRF" value="<?php echo $Security->getTokenCSRF() ?>">
<div> <div class="custom-file">
<a href="#" class="mr-2">Insert</a> <input type="file" class="custom-file-input" id="jsbluditInputFiles" name="bluditInputFiles[]" multiple>
<a href="#" class="mr-2">Delete</a> <label class="custom-file-label" for="jsbluditInputFiles">Choose images</label>
</div> </div>
</td> </form>
</tr>
</tbody> <!-- Progress bar -->
</table> <div class="progress mt-2">
<div id="jsbluditProgressBar" class="progress-bar bg-info" role="progressbar" style="width:0%"></div>
</div>
<!--
MANAGER
-->
<h3 class="mt-4 mb-3">Manage</h3>
<!-- Table for list files -->
<table id="jsbluditMediaTable" class="table"></table>
<!-- Paginator -->
<nav> <nav>
<ul class="pagination justify-content-center"> <ul class="pagination justify-content-center">
<?php for ($i=1; $i<=$amountOfPages; $i++): ?> <?php for ($i=1; $i<=$amountOfPages; $i++): ?>
<li class="page-item"><a class="page-link" href="#"><?php echo $i ?></a></li> <li class="page-item"><button type="button" class="btn btn-link page-link" onClick="getFiles(<?php echo $i ?>)"><?php echo $i ?></button></li>
<?php endfor; ?> <?php endfor; ?>
</ul> </ul>
</nav> </nav>
@ -56,28 +66,71 @@ $amountOfPages = count($listOfFilesByPage);
echo 'var preLoadFiles = '.json_encode($preLoadFiles).';'; echo 'var preLoadFiles = '.json_encode($preLoadFiles).';';
?> ?>
function showFiles(files) { // Remove all files from the table
function cleanFiles() {
$('#jsbluditMediaTable').empty();
}
// Show the files in the table
function displayFiles(files) {
// Clean table
cleanFiles();
// Regenerate the table
$.each(files, function(key, filename) { $.each(files, function(key, filename) {
tableRow = '<tr>'+ tableRow = '<tr>'+
'<td><img class="img-thumbnail" alt="200x200" src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1627e1b2b7e%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1627e1b2b7e%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.65%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" data-holder-rendered="true" style="width: 100px; height: 100px;"></td>'+ '<td style="width:80px"><img class="img-thumbnail" alt="200x200" src="<?php echo HTML_PATH_UPLOADS_THUMBNAILS ?>'+filename+'" style="width: 50px; height: 50px;"></td>'+
'<td>'+ '<td>'+
'<div>'+filename+'</div>'+ '<div>'+filename+'</div>'+
'<div>'+ '<div>'+
'<a class="mr-2" href="#">Insert</a>'+ '<button type="button" class="btn btn-link p-0 mr-2">Insert</button>'+
'<a class="mr-2" href="#">Delete</a>'+ '<button type="button" class="btn btn-link p-0 mr-2">Delete</button>'+
'</div>'+ '</div>'+
'</td>'+ '</td>'+
'</tr>'; '</tr>';
$('#bluditMediaTable').append(tableRow); $('#jsbluditMediaTable').append(tableRow);
}); });
} }
// Get the list of files via AJAX, filter by the page number
function getFiles(pageNumber) {
$.getJSON("<?php echo HTML_PATH_ADMIN_ROOT ?>ajax/list-files", $.getJSON("<?php echo HTML_PATH_ADMIN_ROOT ?>ajax/list-files",
{ pageNumber: 1 }, { pageNumber: pageNumber, path: "<?php echo PATH_UPLOADS_THUMBNAILS ?>"},
function(data) { function(data) {
showFiles(data.files); displayFiles(data.files);
});
}
$(document).ready(function() {
// Display the files preloaded for the first time
displayFiles(preLoadFiles);
// Event to wait the selected files
$("#jsbluditInputFiles").on("change", function() {
// Check file size ?
// Check file type/extension ?
$.ajax({
url: "<?php echo HTML_PATH_ADMIN_ROOT ?>ajax/upload-files",
type: "POST",
data: new FormData($("#jsbluditFormUpload")[0]),
cache: false,
contentType: false,
processData: false,
xhr: function() {
var xhr = $.ajaxSettings.xhr();
if (xhr.upload) {
xhr.upload.addEventListener("progress", function(e) {
if (e.lengthComputable) {
var percentComplete = e.loaded / e.total;
$("#jsbluditProgressBar").width(percentComplete+"%");
}
}, false);
}
return xhr;
}
});
});
}); });
showFiles(preLoadFiles);
</script> </script>

11
bl-kernel/admin/themes/booty/index.php
View File

@ -73,15 +73,6 @@
<!-- TABS IMAGES --> <!-- TABS IMAGES -->
<div class="tab-pane show active" id="images" role="tabpanel" aria-labelledby="images-tab"> <div class="tab-pane show active" id="images" role="tabpanel" aria-labelledby="images-tab">
<?php
echo Bootstrap::formTitle(array('title'=>'Upload an image'));
?>
<div class="w-75 custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
<?php <?php
echo Bootstrap::formTitle(array('title'=>'Cover image')); echo Bootstrap::formTitle(array('title'=>'Cover image'));
?> ?>
@ -92,7 +83,7 @@
echo Bootstrap::formTitle(array('title'=>'Select images')); echo Bootstrap::formTitle(array('title'=>'Select images'));
?> ?>
<button type="button" class="btn" data-toggle="modal" data-target="#bluditMediaModal">Media</button> <button type="button" class="btn" data-toggle="modal" data-target="#jsbluditMediaModal">Media Manager</button>
</div> </div>
<!-- TABS OPTIONS --> <!-- TABS OPTIONS -->

14
bl-kernel/ajax/list-files.php
View File

@ -2,25 +2,29 @@
header('Content-Type: application/json'); header('Content-Type: application/json');
// $_GET // $_GET
// ----------------------------------------------------------------------------
// (integer) $_GET['pageNumber'] // (integer) $_GET['pageNumber']
$pageNumber = isset($_GET['pageNumber']) ? (int)$_GET['pageNumber'] : '1'; $pageNumber = isset($_GET['pageNumber']) ? (int)$_GET['pageNumber'] : '1';
$pageNumber = $pageNumber - 1; $pageNumber = $pageNumber - 1;
$numberOfItems = 10; // Number of items per page // (string) $_GET['path']
$sortByDate=true; $path = isset($_GET['path']) ? $_GET['path'] : PATH_UPLOADS_THUMBNAILS;
// ----------------------------------------------------------------------------
// Get all files from the directory PATH_UPLOADS, also split the array by numberOfItems // Get all files from the directory $path, also split the array by numberOfItems
$listOfFilesByPage = Filesystem::listFiles(PATH_UPLOADS, '*', '*', $sortByDate, $numberOfItems); $listOfFilesByPage = Filesystem::listFiles($path, '*', '*', $GLOBALS['BLUDIT_MEDIA_MANAGER_SORT_BY_DATE'], $GLOBALS['BLUDIT_MEDIA_MANAGER_AMOUNT_OF_FILES']);
// Check if the page number exists in the chunks // Check if the page number exists in the chunks
if (isset($listOfFilesByPage[$pageNumber])) { if (isset($listOfFilesByPage[$pageNumber])) {
// Get the filename from the chunk // Get only the filename from the chunk
$tmp = array(); $tmp = array();
foreach ($listOfFilesByPage[$pageNumber] as $file) { foreach ($listOfFilesByPage[$pageNumber] as $file) {
array_push($tmp, basename($file)); array_push($tmp, basename($file));
} }
// Returns the amount of chunks for the paginator
// Returns the files inside the chunk
exit (json_encode(array( exit (json_encode(array(
'status'=>0, 'status'=>0,
'numberOfPages'=>count($listOfFilesByPage), 'numberOfPages'=>count($listOfFilesByPage),

37
bl-kernel/ajax/upload-files.php Normal file
View File

@ -0,0 +1,37 @@
<?php defined('BLUDIT') or die('Bludit CMS.');
header('Content-Type: application/json');
foreach ($_FILES['bluditInputFiles']['name'] as $key=>$filename) {
// Clean filename and get extension
$filename = Text::lowercase($filename);
$fileExtension = pathinfo($filename, PATHINFO_EXTENSION);
$filename = pathinfo($filename, PATHINFO_FILENAME);
$filename = Text::replace(' ', '', $filename);
$filename = Text::replace('_', '', $filename);
// Generate the next filename if the filename already exist
$tmpName = $filename.'.'.$fileExtension;
if (Sanitize::pathFile(PATH_UPLOADS.$tmpName)) {
$number = 0;
$tmpName = $filename.'_'.$number.'.'.$fileExtension;
while (Sanitize::pathFile(PATH_UPLOADS.$tmpName)) {
$number++;
$tmpName = $filename.'_'.$number.'.'.$fileExtension;
}
}
// Move from temporary PHP folder to temporary Bludit folder
$originalFile = PATH_TMP.'original'.'.'.$fileExtension;
move_uploaded_file($_FILES['bluditInputFiles']['tmp_name'][$key], $originalFile);
rename($originalFile, PATH_UPLOADS.$tmpName);
}
exit (json_encode(array(
'status'=>0,
'message'=>'Image uploaded success.',
'filename'=>$tmpName
)));
?>

99
bl-kernel/ajax/uploader.php
View File

@ -1,99 +0,0 @@
<?php defined('BLUDIT') or die('Bludit CMS.');
header('Content-Type: application/json');
// Type
$type = 'other';
if (!empty($_POST['type'])) {
$type = Sanitize::html($_POST['type']);
}
// Filename and extension
$filename = Text::lowercase($_FILES['files']['name'][0]);
$fileExtension = pathinfo($filename, PATHINFO_EXTENSION);
$filename = pathinfo($filename, PATHINFO_FILENAME);
$filename = Text::replace(' ', '', $filename);
$filename = Text::replace('_', '', $filename);
// Check extension
$validExtension = array('tiff', 'gif', 'png', 'jpg', 'jpeg', 'bmp', 'svg');
if (!in_array($fileExtension, $validExtension)) {
$validExtensionString = implode(',', $validExtension);
exit (json_encode(array(
'status'=>1,
'message'=>'Invalid extension file. Supported extensions:'.$validExtensionString
)));
}
// Generate the next filename if the filename already exist
$tmpName = $filename.'.'.$fileExtension;
if (Sanitize::pathFile(PATH_UPLOADS.$tmpName)) {
$number = 0;
$tmpName = $filename.'_'.$number.'.'.$fileExtension;
while (Sanitize::pathFile(PATH_UPLOADS.$tmpName)) {
$number++;
$tmpName = $filename.'_'.$number.'.'.$fileExtension;
}
}
// Move from temporary PHP folder to temporary Bludit folder
$originalFile = PATH_TMP.'original'.'.'.$fileExtension;
move_uploaded_file($_FILES['files']['tmp_name'][0], $originalFile);
// Returned variables
$absoluteURL = '';
$absoluteURLThumbnail = '';
$absolutePath = '';
// --- PROFILE PICTURE ---
if ($type=='profilePicture') {
// Resize and crop profile image
$username = Sanitize::html($_POST['username']);
$tmpName = $username.'.png';
$Image = new Image();
$Image->setImage($originalFile, PROFILE_IMG_WIDTH, PROFILE_IMG_HEIGHT, 'crop');
$Image->saveImage(PATH_UPLOADS_PROFILES.$tmpName, PROFILE_IMG_QUALITY, false, true);
// Paths
$absoluteURL = DOMAIN_UPLOADS_PROFILES.$tmpName;
$absoluteURLThumbnail = '';
$absolutePath = PATH_UPLOADS_PROFILES.$tmpName;
}
// --- OTHERS ---
else {
// Exclude generate thumbnail for SVG format
if (strcasecmp($fileExtension, 'svg')!=0) {
// Generate the thumbnail
$Image = new Image();
$Image->setImage($originalFile, THUMBNAILS_WIDTH, THUMBNAILS_HEIGHT, 'crop');
$Image->saveImage(PATH_UPLOADS_THUMBNAILS.$tmpName, THUMBNAILS_QUALITY, true);
}
// Move the original to the upload folder
rename($originalFile, PATH_UPLOADS.$tmpName);
// Generate a link to the SVG file and save on thumbnails folder
if (strcasecmp($fileExtension, 'svg')==0) {
symlink(PATH_UPLOADS.$tmpName, PATH_UPLOADS_THUMBNAILS.$tmpName);
}
// Paths
$absoluteURL = DOMAIN_UPLOADS.$tmpName;
$absoluteURLThumbnail = DOMAIN_UPLOADS_THUMBNAILS.$tmpName;
$absolutePath = PATH_UPLOADS.$tmpName;
}
// Remove the Bludit temporary file
if (Sanitize::pathFile($originalFile)) {
unlink($originalFile);
}
exit (json_encode(array(
'status'=>0,
'message'=>'Image uploaded success.',
'filename'=>$tmpName,
'absoluteURL'=>$absoluteURL,
'absoluteURLThumbnail'=>$absoluteURLThumbnail,
'absolutePath'=>$absolutePath
)));
?>

4
bl-kernel/boot/variables.php
View File

@ -105,3 +105,7 @@ define('SESSION_GC_MAXLIFETIME', 3600);
// Session lifetime of the cookie in seconds which is sent to the browser // Session lifetime of the cookie in seconds which is sent to the browser
// The value 0 means until the browser is closed // The value 0 means until the browser is closed
define('SESSION_COOKIE_LIFE_TIME', 0); define('SESSION_COOKIE_LIFE_TIME', 0);
// New Global Variables
$GLOBALS['BLUDIT_MEDIA_MANAGER_AMOUNT_OF_FILES'] = 5;
$GLOBALS['BLUDIT_MEDIA_MANAGER_SORT_BY_DATE'] = true;