Merge pull request #5582 from owncloud/files-previewcaching

Append file etag to preview URLs

apps/files/ajax/newfile.php

@@ -89,7 +89,7 @@ if($source) {
 		$meta = \OC\Files\Filesystem::getFileInfo($target);
 		$mime=$meta['mimetype'];
 		$id = $meta['fileid'];
-		$eventSource->send('success', array('mime'=>$mime, 'size'=>\OC\Files\Filesystem::filesize($target), 'id' => $id));
+		$eventSource->send('success', array('mime'=>$mime, 'size'=>\OC\Files\Filesystem::filesize($target), 'id' => $id, 'etag' => $meta['etag']));
 	} else {
 		$eventSource->send('error', $l10n->t('Error while downloading %s to %s', array($source, $target)));
 	}
@@ -119,6 +119,7 @@ if($source) {
 			'mime' => $mime,
 			'size' => $size,
 			'content' => $content,
+			'etag' => $meta['etag'],
 		)));
 		exit();
 	}

apps/files/ajax/upload.php

@@ -132,6 +132,7 @@ if (strpos($dir, '..') === false) {
 							'size' => $meta['size'],
 							'id' => $meta['fileid'],
 							'name' => basename($target),
+							'etag' => $meta['etag'],
 							'originalname' => $files['tmp_name'][$i],
 							'uploadMaxFilesize' => $maxUploadFileSize,
 							'maxHumanFilesize' => $maxHumanFileSize,
@@ -158,6 +159,7 @@ if (strpos($dir, '..') === false) {
 					'size' => $meta['size'],
 					'id' => $meta['fileid'],
 					'name' => basename($target),
+					'etag' => $meta['etag'],
 					'originalname' => $files['tmp_name'][$i],
 					'uploadMaxFilesize' => $maxUploadFileSize,
 					'maxHumanFilesize' => $maxHumanFileSize,

apps/files/css/files.css

@@ -320,8 +320,9 @@ table.dragshadow {
 	width:auto;
 }
 table.dragshadow td.filename {
-	padding-left:36px;
+	padding-left:60px;
 	padding-right:16px;
+	height: 36px;
 }
 table.dragshadow td.size {
 	padding-right:8px;

apps/files/js/file-upload.js

@@ -575,11 +575,12 @@ $(document).ready(function() {
 									tr.attr('data-size', result.data.size);
 									tr.attr('data-mime', result.data.mime);
 									tr.attr('data-id', result.data.id);
+									tr.attr('data-etag', result.data.etag);
 									tr.find('.filesize').text(humanFileSize(result.data.size));
 									var path = getPathForPreview(name);
-									lazyLoadPreview(path, result.data.mime, function(previewpath) {
+									Files.lazyLoadPreview(path, result.data.mime, function(previewpath) {
 										tr.find('td.filename').attr('style','background-image:url('+previewpath+')');
-									});
+									}, null, null, result.data.etag);
 									FileActions.display(tr.find('td.filename'), true);
 								} else {
 									OC.dialogs.alert(result.data.message, t('core', 'Could not create file'));
@@ -641,9 +642,9 @@ $(document).ready(function() {
 							tr.data('mime', mime).data('id', id);
 							tr.attr('data-id', id);
 							var path = $('#dir').val()+'/'+localName;
-							lazyLoadPreview(path, mime, function(previewpath) {
+							Files.lazyLoadPreview(path, mime, function(previewpath) {
 								tr.find('td.filename').attr('style', 'background-image:url('+previewpath+')');
-							});
+							}, null, null, data.etag);
 							FileActions.display(tr.find('td.filename'), true);
 						});
 						eventSource.listen('error',function(error) {

apps/files/js/filelist.js

@@ -329,9 +329,9 @@ var FileList={
 			tr.attr('data-id', id);
 		}
 		var path = getPathForPreview(name);
-		lazyLoadPreview(path, mime, function(previewpath) {
+		Files.lazyLoadPreview(path, mime, function(previewpath) {
 			tr.find('td.filename').attr('style','background-image:url('+previewpath+')');
-		});
+		}, null, null, tr.attr('data-etag'));
 		tr.find('td.filename').draggable(dragOptions);
 	},
 	isLoading:function(name) {
@@ -867,7 +867,7 @@ $(document).ready(function() {
 				data.context = FileList.addFile(file.name, file.size, date, false, false, param);
 
 				// update file data
-				data.context.attr('data-mime',file.mime).attr('data-id',file.id);
+				data.context.attr('data-mime',file.mime).attr('data-id',file.id).attr('data-etag', file.etag);
 
 				var permissions = data.context.data('permissions');
 				if (permissions !== file.permissions) {
@@ -877,9 +877,9 @@ $(document).ready(function() {
 				FileActions.display(data.context.find('td.filename'), true);
 
 				var path = getPathForPreview(file.name);
-				lazyLoadPreview(path, file.mime, function(previewpath) {
+				Files.lazyLoadPreview(path, file.mime, function(previewpath) {
 					data.context.find('td.filename').attr('style','background-image:url('+previewpath+')');
-				});
+				}, null, null, file.etag);
 			}
 		}
 	});

apps/files/js/files.js

@@ -20,6 +20,17 @@ Files={
 		}
 
 	},
+
+	/**
+	 * Fix path name by removing double slash at the beginning, if any
+	 */
+	fixPath: function(fileName) {
+		if (fileName.substr(0, 2) == '//') {
+			return fileName.substr(1);
+		}
+		return fileName;
+	},
+
 	isFileNameValid:function (name) {
 		if (name === '.') {
 			throw t('files', '\'.\' is an invalid file name.');
@@ -457,9 +468,9 @@ var createDragShadow = function(event) {
 			newtr.find('td.filename').attr('style','background-image:url('+OC.imagePath('core', 'filetypes/folder.png')+')');
 		} else {
 			var path = getPathForPreview(elem.name);
-			lazyLoadPreview(path, elem.mime, function(previewpath) {
+			Files.lazyLoadPreview(path, elem.mime, function(previewpath) {
 				newtr.find('td.filename').attr('style','background-image:url('+previewpath+')');
-			});
+			}, null, null, elem.etag);
 		}
 	});
 
@@ -469,7 +480,7 @@ var createDragShadow = function(event) {
 //options for file drag/drop
 var dragOptions={
 	revert: 'invalid', revertDuration: 300,
-	opacity: 0.7, zIndex: 100, appendTo: 'body', cursorAt: { left: -5, top: -5 },
+	opacity: 0.7, zIndex: 100, appendTo: 'body', cursorAt: { left: 24, top: 18 },
 	helper: createDragShadow, cursor: 'move',
 	stop: function(event, ui) {
 		$('#fileList tr td.filename').addClass('ui-draggable');
@@ -615,7 +626,8 @@ function getSelectedFilesTrash(property) {
 			name:$(element).attr('data-file'),
 			mime:$(element).data('mime'),
 			type:$(element).data('type'),
-			size:$(element).data('size')
+			size:$(element).data('size'),
+			etag:$(element).data('etag')
 		};
 		if (property) {
 			files.push(file[property]);
@@ -626,26 +638,28 @@ function getSelectedFilesTrash(property) {
 	return files;
 }
 
-function getMimeIcon(mime, ready) {
+Files.getMimeIcon = function(mime, ready) {
-	if (getMimeIcon.cache[mime]) {
+	if (Files.getMimeIcon.cache[mime]) {
-		ready(getMimeIcon.cache[mime]);
+		ready(Files.getMimeIcon.cache[mime]);
 	} else {
 		$.get( OC.filePath('files','ajax','mimeicon.php'), {mime: mime}, function(path) {
-			getMimeIcon.cache[mime]=path;
+			Files.getMimeIcon.cache[mime]=path;
-			ready(getMimeIcon.cache[mime]);
+			ready(Files.getMimeIcon.cache[mime]);
 		});
 	}
 }
-getMimeIcon.cache={};
+Files.getMimeIcon.cache={};
 
 function getPathForPreview(name) {
 	var path = $('#dir').val() + '/' + name;
 	return path;
 }
 
-function lazyLoadPreview(path, mime, ready, width, height) {
+Files.lazyLoadPreview = function(path, mime, ready, width, height, etag) {
 	// get mime icon url
-	getMimeIcon(mime, function(iconURL) {
+	Files.getMimeIcon(mime, function(iconURL) {
+		var urlSpec = {};
+		var previewURL;
 		ready(iconURL); // set mimeicon URL
 
 		// now try getting a preview thumbnail URL
@@ -655,25 +669,38 @@ function lazyLoadPreview(path, mime, ready, width, height) {
 		if ( ! height ) {
 			height = $('#filestable').data('preview-y');
 		}
-		if ( $('#publicUploadButtonMock').length ) {
+		// note: the order of arguments must match the one
-			var previewURL = OC.Router.generate('core_ajax_public_preview', {file: path, x:width, y:height, t:$('#dirToken').val()});
+		// from the server's template so that the browser
-		} else {
+		// knows it's the same file for caching
-			var previewURL = OC.Router.generate('core_ajax_preview', {file: path, x:width, y:height});
+		urlSpec.x = width;
-		}
+		urlSpec.y = height;
-		$.get(previewURL, function() {
+		urlSpec.file = Files.fixPath(path);
-			previewURL = previewURL.replace('(', '%28');
-			previewURL = previewURL.replace(')', '%29');
-			previewURL += '&reload=true';
 
-			// preload image to prevent delay
+		if (etag){
-			// this will make the browser cache the image
+			// use etag as cache buster
-			var img = new Image();
+			urlSpec.c = etag;
-			img.onload = function(){
+		}
-				//set preview thumbnail URL
+		else {
-				ready(previewURL);
+			console.warn('Files.lazyLoadPreview(): missing etag argument');
-			}
+		}
-			img.src = previewURL;
+
-		});
+		if ( $('#publicUploadButtonMock').length ) {
+			urlSpec.t = $('#dirToken').val();
+			previewURL = OC.Router.generate('core_ajax_public_preview', urlSpec);
+		} else {
+			previewURL = OC.Router.generate('core_ajax_preview', urlSpec);
+		}
+		previewURL = previewURL.replace('(', '%28');
+		previewURL = previewURL.replace(')', '%29');
+
+		// preload image to prevent delay
+		// this will make the browser cache the image
+		var img = new Image();
+		img.onload = function(){
+			//set preview thumbnail URL
+			ready(previewURL);
+		}
+		img.src = previewURL;
 	});
 }
 

apps/files/lib/helper.php

@@ -40,7 +40,7 @@ class Helper
 
 		if($file['isPreviewAvailable']) {
 			$pathForPreview = $file['directory'] . '/' . $file['name'];
-			return \OC_Helper::previewIcon($pathForPreview);
+			return \OC_Helper::previewIcon($pathForPreview) . '&c=' . $file['etag'];
 		}
 		return \OC_Helper::mimetypeIcon($file['mimetype']);
 	}

apps/files/templates/part.list.php

@@ -16,6 +16,7 @@ $totalsize = 0; ?>
 		data-type="<?php ($file['type'] == 'dir')?p('dir'):p('file')?>"
 		data-mime="<?php p($file['mimetype'])?>"
 		data-size="<?php p($file['size']);?>"
+		data-etag="<?php p($file['etag']);?>"
 		data-permissions="<?php p($file['permissions']); ?>">
 		<?php if($file['isPreviewAvailable']): ?>
 		<td class="filename svg preview-icon"

apps/files_sharing/public.php

@@ -28,7 +28,7 @@ function determineIcon($file, $sharingRoot, $sharingToken) {
 	$relativePath = substr($file['path'], 6);
 	$relativePath = substr($relativePath, strlen($sharingRoot));
 	if($file['isPreviewAvailable']) {
-		return OCP\publicPreview_icon($relativePath, $sharingToken);
+		return OCP\publicPreview_icon($relativePath, $sharingToken) . '&c=' . $file['etag'];
 	}
 	return OCP\mimetype_icon($file['mimetype']);
 }

core/js/oc-dialogs.js

@@ -294,14 +294,14 @@ var OCdialogs = {
 				conflict.find('.replacement .mtime').text(formatDate(replacement.lastModifiedDate));
 			}
 			var path = getPathForPreview(original.name);
-			lazyLoadPreview(path, original.mime, function(previewpath){
+			Files.lazyLoadPreview(path, original.mime, function(previewpath){
 				conflict.find('.original .icon').css('background-image','url('+previewpath+')');
-			}, 96, 96);
+			}, 96, 96, original.etag);
 			getCroppedPreview(replacement).then(
 				function(path){
 					conflict.find('.replacement .icon').css('background-image','url(' + path + ')');
 				}, function(){
-					getMimeIcon(replacement.type,function(path){
+					Files.getMimeIcon(replacement.type,function(path){
 						conflict.find('.replacement .icon').css('background-image','url(' + path + ')');
 					});
 				}

lib/private/helper.php

@@ -231,11 +231,11 @@ class OC_Helper {
 	 * Returns the path to the preview of the file.
 	 */
 	public static function previewIcon($path) {
-		return self::linkToRoute( 'core_ajax_preview', array('x' => 36, 'y' => 36, 'file' => urlencode($path) ));
+		return self::linkToRoute( 'core_ajax_preview', array('x' => 36, 'y' => 36, 'file' => $path ));
 	}
 
 	public static function publicPreviewIcon( $path, $token ) {
-		return self::linkToRoute( 'core_ajax_public_preview', array('x' => 36, 'y' => 36, 'file' => urlencode($path), 't' => $token));
+		return self::linkToRoute( 'core_ajax_public_preview', array('x' => 36, 'y' => 36, 'file' => $path, 't' => $token));
 	}
 
 	/**