From 2b2e24c84a7f8cbdb4bd22094f4ae9cdeee18986 Mon Sep 17 00:00:00 2001
From: Diego Najar <dignajar@gmail.com>
Date: Mon, 9 Apr 2018 22:56:12 +0200
Subject: [PATCH] Upload manager, multiples files

---
 bl-kernel/admin/themes/booty/html/media.php | 125 ++++++++++++++------
 bl-kernel/admin/themes/booty/index.php      |  11 +-
 bl-kernel/ajax/list-files.php               |  14 ++-
 bl-kernel/ajax/upload-files.php             |  37 ++++++
 bl-kernel/ajax/uploader.php                 |  99 ----------------
 bl-kernel/boot/variables.php                |   6 +-
 6 files changed, 141 insertions(+), 151 deletions(-)
 create mode 100644 bl-kernel/ajax/upload-files.php
 delete mode 100644 bl-kernel/ajax/uploader.php

diff --git a/bl-kernel/admin/themes/booty/html/media.php b/bl-kernel/admin/themes/booty/html/media.php
index d6525672..d4ce4436 100644
--- a/bl-kernel/admin/themes/booty/html/media.php
+++ b/bl-kernel/admin/themes/booty/html/media.php
@@ -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>
\ No newline at end of file
diff --git a/bl-kernel/admin/themes/booty/index.php b/bl-kernel/admin/themes/booty/index.php
index 368e64f0..c7d47b10 100644
--- a/bl-kernel/admin/themes/booty/index.php
+++ b/bl-kernel/admin/themes/booty/index.php
@@ -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 -->
diff --git a/bl-kernel/ajax/list-files.php b/bl-kernel/ajax/list-files.php
index ce3b5c1f..cc50f327 100644
--- a/bl-kernel/ajax/list-files.php
+++ b/bl-kernel/ajax/list-files.php
@@ -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),
diff --git a/bl-kernel/ajax/upload-files.php b/bl-kernel/ajax/upload-files.php
new file mode 100644
index 00000000..54818b9b
--- /dev/null
+++ b/bl-kernel/ajax/upload-files.php
@@ -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
+)));
+
+?>
\ No newline at end of file
diff --git a/bl-kernel/ajax/uploader.php b/bl-kernel/ajax/uploader.php
deleted file mode 100644
index 7ecf5e73..00000000
--- a/bl-kernel/ajax/uploader.php
+++ /dev/null
@@ -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
-)));
-
-?>
\ No newline at end of file
diff --git a/bl-kernel/boot/variables.php b/bl-kernel/boot/variables.php
index 2c6eb747..37cc295a 100644
--- a/bl-kernel/boot/variables.php
+++ b/bl-kernel/boot/variables.php
@@ -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);
\ No newline at end of file
+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;
\ No newline at end of file