Append file etag to preview URLs

Fixes #5534

1 files changed, 53 insertions, 27 deletions

diff --git a/apps/files/js/files.js b/apps/files/js/files.js
index 389bf1bf197..ee0fdcb43a9 100644
--- a/apps/files/js/files.js
+++ b/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);
 		}
 	});
 
@@ -626,26 +637,28 @@ function getSelectedFilesTrash(property) {
 	return files;
 }
 
-function getMimeIcon(mime, ready) {
-	if (getMimeIcon.cache[mime]) {
-		ready(getMimeIcon.cache[mime]);
+Files.getMimeIcon = function(mime, ready) {
+	if (Files.getMimeIcon.cache[mime]) {
+		ready(Files.getMimeIcon.cache[mime]);
 	} else {
 		$.get( OC.filePath('files','ajax','mimeicon.php'), {mime: mime}, function(path) {
-			getMimeIcon.cache[mime]=path;
-			ready(getMimeIcon.cache[mime]);
+			Files.getMimeIcon.cache[mime]=path;
+			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 +668,38 @@ function lazyLoadPreview(path, mime, ready, width, height) {
 		if ( ! height ) {
 			height = $('#filestable').data('preview-y');
 		}
+		// note: the order of arguments must match the one
+		// from the server's template so that the browser
+		// knows it's the same file for caching
+		urlSpec.x = width;
+		urlSpec.y = height;
+		urlSpec.file = Files.fixPath(path);
+
+		if (etag){
+			// use etag as cache buster
+			urlSpec.c = etag;
+		}
+		else {
+			console.warn('Files.lazyLoadPreview(): missing etag argument');
+		}
+
 		if ( $('#publicUploadButtonMock').length ) {
-			var previewURL = OC.Router.generate('core_ajax_public_preview', {file: path, x:width, y:height, t:$('#dirToken').val()});
+			urlSpec.t = $('#dirToken').val();
+			previewURL = OC.Router.generate('core_ajax_public_preview', urlSpec);
 		} else {
-			var previewURL = OC.Router.generate('core_ajax_preview', {file: path, x:width, y:height});
-		}
-		$.get(previewURL, function() {
-			previewURL = previewURL.replace('(', '%28');
-			previewURL = previewURL.replace(')', '%29');
-			previewURL += '&reload=true';
-
-			// 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;
-		});
+			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;
 	});
 }