Adding image thumbnail feature

thecodingmachine · Oct 30, 2014 · 1022c49 · 1022c49
1 parent cf9930f
commit 1022c49
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 134 deletions.
diff --git a/composer.json b/composer.json
@@ -1,41 +1,46 @@
 {
-    "name": "mouf/html.widgets.jqueryfileupload",
-    "description": "This package contains an upload widget based on the 'jQuery file upload' plugin. This allows easy uploading of files.",
-    "keywords": ["mouf", "html", "widget", "file", "uploader", "jqueryFileUpload"],
-    "homepage": "http://mouf-php.com/packages/mouf/html.widgets.jqueryfileupload",
-    "type": "mouf-library",
-    "license": "MIT",
-    "authors": [
-        {
-            "name": "David Négrier",
-            "email": "d.negrier@thecodingmachine.com",
-            "homepage": "http://mouf-php.com"
-        }
-    ],
-    "require": {
-    	"php": ">=5.3.0",
-        "mouf/javascript.jquery.jquery-file-upload": "*",
-        "mouf/html.htmlelement": "~2.0",
-        "mouf/utils.session.session-manager": "~2.0",
-        "mouf/utils.common.getvars": "~2.0",
-        "mouf/html.renderer" : "~1.0",
-        "symfony/filesystem" : "~2.3"
-    },
-    "autoload": {
-        "psr-4": {
-            "Mouf\\Html\\Widgets\\JqueryFileUpload\\": "src/Mouf/Html/Widgets/JqueryFileUpload"
-        }
-    },
-	"extra": {
-		"mouf": {
-			"doc": [
-				{
-					"title": "Install",
-					"url": "doc/install.md"
-				},
-				{
-					"title": "Tutorial",
-					"url": "doc/tutorial.md"
+	"name" : "mouf/html.widgets.jqueryfileupload",
+	"description" : "This package contains an upload widget based on the 'jQuery file upload' plugin. This allows easy uploading of files.",
+	"keywords" : [
+		"mouf",
+		"html",
+		"widget",
+		"file",
+		"uploader",
+		"jqueryFileUpload"
+	],
+	"homepage" : "http://mouf-php.com/packages/mouf/html.widgets.jqueryfileupload",
+	"type" : "mouf-library",
+	"license" : "MIT",
+	"authors" : [{
+			"name" : "David Négrier",
+			"email" : "d.negrier@thecodingmachine.com",
+			"homepage" : "http://mouf-php.com"
+		}
+	],
+	"require" : {
+		"php" : ">=5.3.0",
+		"mouf/javascript.jquery.jquery-file-upload" : "*",
+		"mouf/html.htmlelement" : "~2.0",
+		"mouf/utils.session.session-manager" : "~2.0",
+		"mouf/utils.common.getvars" : "~2.0",
+		"mouf/html.renderer" : "~1.0",
+		"symfony/filesystem" : "~2.3",
+		"mouf/utils.graphics.mouf-image" : "~2.0"
+	},
+	"autoload" : {
+		"psr-4" : {
+			"Mouf\\Html\\Widgets\\JqueryFileUpload\\" : "src/Mouf/Html/Widgets/JqueryFileUpload"
+		}
+	},
+	"extra" : {
+		"mouf" : {
+			"doc" : [{
+					"title" : "Install",
+					"url" : "doc/install.md"
+				}, {
+					"title" : "Tutorial",
+					"url" : "doc/tutorial.md"
 				}
 			],
 			"install" : [{
@@ -45,4 +50,4 @@
 			]
 		}
 	}
-}
+}
diff --git a/doc/tutorial.md b/doc/tutorial.md
@@ -135,3 +135,10 @@ Customizing the display
 
 The JqueryFileUpload widget is using [Mouf's rendering mechanism](http://mouf-php.com/packages/mouf/html.renderer/README.md).
 Therefore, you can easily overload the way it is displayed if you want to.
+
+You just have to copy the `vendor/mouf/html.widgets.jqueryfileupload/src/templates/Mouf/Html/Widgets/JqueryFileUpload/FileWidget.php`
+into `src/templates/Mouf/Html/Widgets/JqueryFileUpload/FileWidget.php` and customize it.
+
+By default, the uploaded file renderer will display thumbnails for png, gif and jpg images.
+If you want to simply modify the size of the thumbnails or the way they are displayed, you can have a look at the
+`resizeUploadThumbnails` instance in Mouf.
diff --git a/src/Mouf/Html/Widgets/JqueryFileUpload/JqueryFileUploadInstaller.php b/src/Mouf/Html/Widgets/JqueryFileUpload/JqueryFileUploadInstaller.php
@@ -17,7 +17,38 @@ class JqueryFileUploadInstaller implements PackageInstallerInterface {
     public static function install(MoufManager $moufManager) {
 		// Let's create the renderer
 		RendererUtils::createPackageRenderer($moufManager, "mouf/html.widgets.jqueryfileupload");
-
+
+		// Let's create the instance.
+		$resizeUploadThumbnails = InstallUtils::getOrCreateInstance('resizeUploadThumbnails', 'Mouf\\Utils\\Graphics\\MoufImage\\Filters\\MoufImageResize', $moufManager);
+
+		if (!$resizeUploadThumbnails->getPublicFieldProperty('height')->isValueSet()) {
+			$resizeUploadThumbnails->getPublicFieldProperty('height')->setValue('100');
+		}
+		if (!$resizeUploadThumbnails->getPublicFieldProperty('width')->isValueSet()) {
+			$resizeUploadThumbnails->getPublicFieldProperty('width')->setValue('100');
+		}
+		if (!$resizeUploadThumbnails->getPublicFieldProperty('keepRatio')->isValueSet()) {
+			$resizeUploadThumbnails->getPublicFieldProperty('keepRatio')->setValue(true);
+		}
+		if (!$resizeUploadThumbnails->getPublicFieldProperty('allowEnlarge')->isValueSet()) {
+			$resizeUploadThumbnails->getPublicFieldProperty('allowEnlarge')->setValue(true);
+		}
+		if (!$resizeUploadThumbnails->getPublicFieldProperty('enforceRequestedDimensions')->isValueSet()) {
+			$resizeUploadThumbnails->getPublicFieldProperty('enforceRequestedDimensions')->setValue(true);
+		}
+		if (!$resizeUploadThumbnails->getPublicFieldProperty('backgroundRed')->isValueSet()) {
+			$resizeUploadThumbnails->getPublicFieldProperty('backgroundRed')->setValue('255');
+		}
+		if (!$resizeUploadThumbnails->getPublicFieldProperty('backgroundGreen')->isValueSet()) {
+			$resizeUploadThumbnails->getPublicFieldProperty('backgroundGreen')->setValue('255');
+		}
+		if (!$resizeUploadThumbnails->getPublicFieldProperty('backgroundBlue')->isValueSet()) {
+			$resizeUploadThumbnails->getPublicFieldProperty('backgroundBlue')->setValue('255');
+		}
+		if (!$resizeUploadThumbnails->getPublicFieldProperty('backgroundAlpha')->isValueSet()) {
+			$resizeUploadThumbnails->getPublicFieldProperty('backgroundAlpha')->setValue('0');
+		}
+
         // Let's rewrite the MoufComponents.php file to save the component
         $moufManager->rewriteMouf();
     }

diff --git a/src/Mouf/Html/Widgets/JqueryFileUpload/MoufUploadHandler.php b/src/Mouf/Html/Widgets/JqueryFileUpload/MoufUploadHandler.php
@@ -14,8 +14,11 @@ class MoufUploadHandler extends \UploadHandler {
 
 	protected function set_additional_file_properties($file) {
 		parent::set_additional_file_properties($file);
+
+		$file_path = $this->get_upload_path($file->name);
+
 		// Let's add the HTML representing the file to the object returned.
-		$fileWidget = new FileWidget($file->name, md5($file->name));
+		$fileWidget = new FileWidget($file_path, md5($file_path));
 
 		ob_start();
 		$fileWidget->toHtml();

diff --git a/src/direct/upload.php b/src/direct/upload.php
@@ -20,96 +20,3 @@
 $upload_handler = new MoufUploadHandler([
 		'upload_dir'=>$targetDir
 ]);
-
-/*$sessArray = array("path"=>$_REQUEST['path'],
-		"fileId"=>$_REQUEST['fileId'],
-		"instanceName"=>$_REQUEST['instanceName']);
-
-foreach ($sessArray as $key => $value) {
-	if($value == 'null')
-		$sessArray[$key] = null;
-}
-
-$targetFile = $sessArray["path"];
-
-$fileName = '';
-if(isset($_REQUEST['fileName'])) {
-	$fileName = $_REQUEST['fileName'];
-}
-if(!$fileName) {
-	$fileName = null;
-}
-if (empty($sessArray['instanceName'])) {
-	$returnArray['error'] = 'No instance name';
-	echo json_encode($returnArray);
-	exit;
-}
-$instance = $moufManager->getInstance($sessArray['instanceName']);
-
-if(!isset($_SESSION["mouf_fileupload_autorizeduploads"]) || !is_array($_SESSION["mouf_fileupload_autorizeduploads"][$uniqueId])) {
-	$returnArray['error'] = 'session error';
-	echo json_encode($returnArray);
-	exit;
-}
-
-// Check if there is difference between form and session
-foreach ($sessArray as $key => $value) {
-	if((string)$_SESSION["mouf_fileupload_autorizeduploads"][$uniqueId][$key] != $value) {
-		// 		echo $key.' - '.$value.'!='.$_SESSION["mouf_fileupload_autorizeduploads"][$uniqueId][$key];
-		$returnArray['error'] = 'session not match';
-		echo json_encode($returnArray);
-		exit;
-	}
-}
-
-$targetPath = dirname($targetFile);
-
-$returnArray = array('success'=>'true');
-
-// Initialize the update
-$allowedExtensions = json_decode($instance->fileExtensions);
-if(!$allowedExtensions) {
-	$allowedExtensions = array();
-}
-// max file size in bytes
-$sizeLimit = $instance->sizeLimit;
-
-// Object to retrieve file send by user
-$uploader = new JsFileUploader($allowedExtensions, $sizeLimit);
-
-// If the user cannot add fileName
-if(!$fileName) {
-	// Retrieve fileName in the instance or the fileName send by user
-	if($instance->fileName)
-		$fileName = $instance->fileName;
-	else
-		$fileName = $uploader->getFileName();
-}
-/* @var $instance FileUploaderWidget * /
-// Call listener Before
-
-$continue = $instance->triggerBeforeUpload($targetFile, $fileName, $sessArray["fileId"], $returnArray, $uniqueId);
-if($continue === false) {
-	$returnArray['success'] = null;
-	$returnArray['info'] = 'Cancel by Trigger before upload';
-	echo htmlspecialchars(json_encode($returnArray), ENT_NOQUOTES);
-	exit();
-}
-
-if (!is_dir($targetFile)) {
-	mkdir(str_replace('//','/', $targetFile), 0755, true);
-}
-
-if (!isset($returnArray['error'])) {
-	$returnUpload = $uploader->handleUpload($targetFile, $fileName, $instance->replace);
-	$targetFile = $uploader->getFileSave(true);
-	if (!$returnUpload) {
-		$returnArray['error'] = 'no return after JSFileUpload';
-	}
-}
-
-// Call listener After
-$instance->triggerAfterUpload($targetFile, $sessArray["fileId"], $returnArray, $uniqueId);
-
-echo htmlspecialchars(json_encode($returnArray), ENT_NOQUOTES);
-*/
diff --git a/src/templates/Mouf/Html/Widgets/JqueryFileUpload/FileWidget.php b/src/templates/Mouf/Html/Widgets/JqueryFileUpload/FileWidget.php
@@ -1,7 +1,40 @@
 <?php
+use Mouf\Utils\Graphics\MoufImage\Filters\MoufImageFromFile;
 /* @var $object Mouf\Html\Widgets\JqueryFileUpload\FileWidget */
 ?>
 <span class="badge file-widget" data-id="<?php echo htmlentities($id); ?>">
-<?php echo htmlentities($object->getFileInfo()->getFilename()); ?>
+<?php  
+$extension = strtolower($object->getFileInfo()->getExtension());
+if ($extension == "png" || $extension == "gif" || $extension == "jpg") {
+	$origin = new MoufImageFromFile();
+	$origin->path = $object->getFileInfo()->getRealPath();
+
+	$resizeService = Mouf::getResizeUploadThumbnails();
+	$resizeService->source = $origin;
+	$moufImageResource = $resizeService->getResource();
+
+	$finalImage = $moufImageResource->resource;
+	$image_info = $moufImageResource->originInfo;
+	$image_type = $image_info[2];
+
+	ob_start();
+	//create the image
+	if( $image_type == IMAGETYPE_JPEG ) {
+		imagejpeg($finalImage);
+	} elseif( $image_type == IMAGETYPE_GIF ) {
+		imagegif($finalImage);
+	} elseif( $image_type == IMAGETYPE_PNG ) {
+		imagepng($finalImage);
+	}
+	$imageAsString = ob_get_clean();
+
+	echo '<img style="vertical-align:top;" alt="'.htmlentities($object->getFileInfo()->getFilename()).'" src="data:image/'.$extension.';base64,';
+	echo base64_encode($imageAsString); 
+	echo '" />';
+} else {
+	echo htmlentities($object->getFileInfo()->getFilename());
+}
+?>
  <i class="icon-remove file-delete-button" data-id="<?php echo htmlentities($id); ?>"></i>
 </span>
+<span>&nbsp;</span>