Upload manager, multiples files
This commit is contained in:
Diego Najar
parent
070a0c40fe
commit
2b2e24c84a
@ -1,45 +1,55 @@
|
||||
<?php
|
||||
// Preload the first 10 files to not call via AJAX the first time the user open the media
|
||||
$listOfFiles = Filesystem::listFiles(PATH_UPLOADS, '*', '*', $sortByDate=true, $chunk=false);
|
||||
$listOfFilesByPage = array_chunk($listOfFiles, 10);
|
||||
// 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_THUMBNAILS, '*', '*', $GLOBALS['BLUDIT_MEDIA_MANAGER_SORT_BY_DATE'], false);
|
||||
$listOfFilesByPage = array_chunk($listOfFiles, $GLOBALS['BLUDIT_MEDIA_MANAGER_AMOUNT_OF_FILES']);
|
||||
$preLoadFiles = array();
|
||||
foreach ($listOfFilesByPage[0] as $file) {
|
||||
array_push($preLoadFiles, basename($file));
|
||||
}
|
||||
// Amount of pages of files, for the paginator
|
||||
// Amount of pages for the paginator
|
||||
$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-content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col p-3">
|
||||
<h3>Bludit Media Manager</h3>
|
||||
<table id="bluditMediaTable" class="table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="width:120px">
|
||||
<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>
|
||||
<div>example.jpg</div>
|
||||
<div>
|
||||
<a href="#" class="mr-2">Insert</a>
|
||||
<a href="#" class="mr-2">Delete</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
<!--
|
||||
UPLOAD INPUT
|
||||
-->
|
||||
<h3 class="mt-2 mb-3">Upload</h3>
|
||||
|
||||
<!-- Form and Input file -->
|
||||
<form name="bluditFormUpload" id="jsbluditFormUpload" enctype="multipart/form-data">
|
||||
<input type="hidden" name="tokenCSRF" value="<?php echo $Security->getTokenCSRF() ?>">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="jsbluditInputFiles" name="bluditInputFiles[]" multiple>
|
||||
<label class="custom-file-label" for="jsbluditInputFiles">Choose images</label>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Progress bar -->
|
||||
<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>
|
||||
<ul class="pagination justify-content-center">
|
||||
<?php for ($i=1; $i<=$amountOfPages; $i++): ?>
|
||||
<li class="page-item"><a class="page-link" href="#"><?php echo $i ?></a></li>
|
||||
<?php endfor; ?>
|
||||
<?php for ($i=1; $i<=$amountOfPages; $i++): ?>
|
||||
<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; ?>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
@ -56,28 +66,71 @@ $amountOfPages = count($listOfFilesByPage);
|
||||
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) {
|
||||
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>'+
|
||||
'<div>'+filename+'</div>'+
|
||||
'<div>'+
|
||||
'<a class="mr-2" href="#">Insert</a>'+
|
||||
'<a class="mr-2" href="#">Delete</a>'+
|
||||
'<button type="button" class="btn btn-link p-0 mr-2">Insert</button>'+
|
||||
'<button type="button" class="btn btn-link p-0 mr-2">Delete</button>'+
|
||||
'</div>'+
|
||||
'</td>'+
|
||||
'</tr>';
|
||||
$('#bluditMediaTable').append(tableRow);
|
||||
$('#jsbluditMediaTable').append(tableRow);
|
||||
});
|
||||
}
|
||||
|
||||
$.getJSON("<?php echo HTML_PATH_ADMIN_ROOT ?>ajax/list-files",
|
||||
{ pageNumber: 1 },
|
||||
function(data) {
|
||||
showFiles(data.files);
|
||||
// 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",
|
||||
{ pageNumber: pageNumber, path: "<?php echo PATH_UPLOADS_THUMBNAILS ?>"},
|
||||
function(data) {
|
||||
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>
|
||||
@ -73,15 +73,6 @@
|
||||
<!-- TABS IMAGES -->
|
||||
<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
|
||||
echo Bootstrap::formTitle(array('title'=>'Cover image'));
|
||||
?>
|
||||
@ -92,7 +83,7 @@
|
||||
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>
|
||||
<!-- TABS OPTIONS -->
|
||||
|
||||
@ -2,25 +2,29 @@
|
||||
header('Content-Type: application/json');
|
||||
|
||||
// $_GET
|
||||
// ----------------------------------------------------------------------------
|
||||
// (integer) $_GET['pageNumber']
|
||||
$pageNumber = isset($_GET['pageNumber']) ? (int)$_GET['pageNumber'] : '1';
|
||||
$pageNumber = $pageNumber - 1;
|
||||
|
||||
$numberOfItems = 10; // Number of items per page
|
||||
$sortByDate=true;
|
||||
// (string) $_GET['path']
|
||||
$path = isset($_GET['path']) ? $_GET['path'] : PATH_UPLOADS_THUMBNAILS;
|
||||
// ----------------------------------------------------------------------------
|
||||
|
||||
// Get all files from the directory PATH_UPLOADS, also split the array by numberOfItems
|
||||
$listOfFilesByPage = Filesystem::listFiles(PATH_UPLOADS, '*', '*', $sortByDate, $numberOfItems);
|
||||
// Get all files from the directory $path, also split the array by 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
|
||||
if (isset($listOfFilesByPage[$pageNumber])) {
|
||||
|
||||
// Get the filename from the chunk
|
||||
// Get only the filename from the chunk
|
||||
$tmp = array();
|
||||
foreach ($listOfFilesByPage[$pageNumber] as $file) {
|
||||
array_push($tmp, basename($file));
|
||||
}
|
||||
|
||||
// Returns the amount of chunks for the paginator
|
||||
// Returns the files inside the chunk
|
||||
exit (json_encode(array(
|
||||
'status'=>0,
|
||||
'numberOfPages'=>count($listOfFilesByPage),
|
||||
|
||||
37
bl-kernel/ajax/upload-files.php
Normal file
37
bl-kernel/ajax/upload-files.php
Normal 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
|
||||
)));
|
||||
|
||||
?>
|
||||
@ -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
|
||||
)));
|
||||
|
||||
?>
|
||||
@ -104,4 +104,8 @@ define('SESSION_GC_MAXLIFETIME', 3600);
|
||||
|
||||
// Session lifetime of the cookie in seconds which is sent to the browser
|
||||
// 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;
|
||||
Loading…
Reference in New Issue
Block a user