Completed Image Editor

client/js/components/editor-image.js

@@ -16,11 +16,15 @@ let vueImage = new Vue({
 		images: [],
 		uploadSucceeded: false,
 		postUploadChecks: 0,
+		renameImageShow: false,
+		renameImageId: '',
+		renameImageFilename: '',
 		deleteImageShow: false,
-		deleteImageId: 0,
+		deleteImageId: '',
 		deleteImageFilename: ''
 	},
 	methods: {
+
 		open: () => {
 			mdeModalOpenState = true;
 			$('#modal-editor-image').slideDown();
@@ -30,6 +34,17 @@ let vueImage = new Vue({
 			mdeModalOpenState = false;
 			$('#modal-editor-image').slideUp();
 		},
+
+		// -------------------------------------------
+		// INSERT IMAGE
+		// -------------------------------------------
+
+		selectImage: (imageId) => {
+			vueImage.currentImage = imageId;
+		},
+		selectAlignment: (align) => {
+			vueImage.currentAlign = align;
+		},
 		insertImage: (ev) => {
 
 			if(mde.codemirror.doc.somethingSelected()) {
@@ -57,6 +72,11 @@ let vueImage = new Vue({
 			vueImage.cancel();
 
 		},
+
+		// -------------------------------------------
+		// NEW FOLDER
+		// -------------------------------------------
+
 		newFolder: (ev) => {
 			vueImage.newFolderName = '';
 			vueImage.newFolderError = false;
@@ -90,6 +110,11 @@ let vueImage = new Vue({
 			});
 
 		},
+
+		// -------------------------------------------
+		// FETCH FROM URL
+		// -------------------------------------------
+
 		fetchFromUrl: (ev) => {
 			vueImage.fetchFromUrlURL = '';
 			vueImage.fetchFromUrlShow = true;
@@ -107,7 +132,7 @@ let vueImage = new Vue({
 			Vue.nextTick(() => {
 				socket.emit('uploadsFetchFileFromURL', { folder: vueImage.currentFolder, fetchUrl: vueImage.fetchFromUrlURL }, (data) => {
 					if(data.ok) {
-						vueImage.waitUploadComplete();
+						vueImage.waitChangeComplete(vueImage.images.length, true);
 					} else {
 						vueImage.isLoading = false;
 						alerts.pushError('Upload error', data.msg);
@@ -117,22 +142,92 @@ let vueImage = new Vue({
 
 		},
 
-		/**
-		 * Select a folder
-		 *
-		 * @param      {string}  fldName  The folder name
-		 * @return     {Void}  Void
-		 */
+		// -------------------------------------------
+		// RENAME IMAGE
+		// -------------------------------------------
+
+		renameImage: () => {
+
+			let c = _.find(vueImage.images, ['_id', vueImage.renameImageId ]);
+			vueImage.renameImageFilename = c.basename || '';
+			vueImage.renameImageShow = true;
+			_.delay(() => {
+				$('#txt-editor-renameimage').focus();
+				_.defer(() => { $('#txt-editor-renameimage').select(); });
+			}, 400);
+		},
+		renameImageDiscard: () => {
+			vueImage.renameImageShow = false;
+		},
+		renameImageGo: () => {
+			
+			vueImage.renameImageDiscard();
+			vueImage.isLoadingText = 'Renaming image...';
+			vueImage.isLoading = true;
+
+			Vue.nextTick(() => {
+				socket.emit('uploadsRenameFile', { uid: vueImage.renameImageId, folder: vueImage.currentFolder, filename: vueImage.renameImageFilename }, (data) => {
+					if(data.ok) {
+						vueImage.waitChangeComplete(vueImage.images.length, false);
+					} else {
+						vueImage.isLoading = false;
+						alerts.pushError('Rename error', data.msg);
+					}
+				});
+			});
+
+		},
+
+		// -------------------------------------------
+		// MOVE IMAGE
+		// -------------------------------------------
+
+		moveImage: (uid, fld) => {
+			vueImage.isLoadingText = 'Moving image...';
+			vueImage.isLoading = true;
+			Vue.nextTick(() => {
+				socket.emit('uploadsMoveFile', { uid: uid, folder: fld }, (data) => {
+					if(data.ok) {
+						vueImage.loadImages();
+					} else {
+						vueImage.isLoading = false;
+						alerts.pushError('Rename error', data.msg);
+					}
+				});
+			});
+		},
+
+		// -------------------------------------------
+		// DELETE IMAGE
+		// -------------------------------------------
+
+		deleteImageWarn: (show) => {
+			if(show) {
+				let c = _.find(vueImage.images, ['_id', vueImage.deleteImageId ]);
+				vueImage.deleteImageFilename = c.filename || 'this image';
+			}
+			vueImage.deleteImageShow = show;
+		},
+		deleteImageGo: () => {
+			vueImage.deleteImageWarn(false);
+			vueImage.isLoadingText = 'Deleting image...';
+			vueImage.isLoading = true;
+			Vue.nextTick(() => {
+				socket.emit('uploadsDeleteFile', { uid: vueImage.deleteImageId }, (data) => {
+					vueImage.loadImages();
+				});
+			});
+		},
+
+		// -------------------------------------------
+		// LOAD FROM REMOTE
+		// -------------------------------------------
+
 		selectFolder: (fldName) => {
 			vueImage.currentFolder = fldName;
 			vueImage.loadImages();
 		},
 
-		/**
-		 * Refresh folder list and load images from root
-		 *
-		 * @return     {Void}  Void
-		 */
 		refreshFolders: () => {
 			vueImage.isLoadingText = 'Fetching folders list...';
 			vueImage.isLoading = true;
@@ -146,58 +241,66 @@ let vueImage = new Vue({
 			});
 		},
 
-		/**
-		 * Loads images in selected folder
-		 *
-		 * @return     {Void}  Void
-		 */
 		loadImages: (silent) => {
 			if(!silent) {
 				vueImage.isLoadingText = 'Fetching images...';
 				vueImage.isLoading = true;
 			}
+			return new Promise((resolve, reject) => {
+				Vue.nextTick(() => {
+					socket.emit('uploadsGetImages', { folder: vueImage.currentFolder }, (data) => {
+						vueImage.images = data;
+						if(!silent) {
+							vueImage.isLoading = false;
+						}
+						vueImage.attachContextMenus();
+						resolve(true);
+					});
+				});
+			});
+		},
+
+		waitChangeComplete: (oldAmount, expectChange) => {
+
+			expectChange = (_.isBoolean(expectChange)) ? expectChange : true;
+
+			vueImage.postUploadChecks++;
+			vueImage.isLoadingText = 'Processing...';
+
 			Vue.nextTick(() => {
-				socket.emit('uploadsGetImages', { folder: vueImage.currentFolder }, (data) => {
-					vueImage.images = data;
-					if(!silent) {
+				vueImage.loadImages(true).then(() => {
+					if((vueImage.images.length !== oldAmount) === expectChange) {
+						vueImage.postUploadChecks = 0;
+						vueImage.isLoading = false;
+					} else if(vueImage.postUploadChecks > 5) {
+						vueImage.postUploadChecks = 0;
 						vueImage.isLoading = false;
+						alerts.pushError('Unable to fetch updated listing', 'Try again later');
+					} else {
+						_.delay(() => {
+							vueImage.waitChangeComplete(oldAmount, expectChange);
+						}, 1500);
 					}
-					vueImage.attachContextMenus();
 				});
 			});
-		},
 
-		/**
-		 * Select an image
-		 *
-		 * @param      {String}  imageId  The image identifier
-		 * @return     {Void}  Void
-		 */
-		selectImage: (imageId) => {
-			vueImage.currentImage = imageId;
-		},
-
-		/**
-		 * Set image alignment
-		 *
-		 * @param      {String}  align   The alignment
-		 * @return     {Void}  Void
-		 */
-		selectAlignment: (align) => {
-			vueImage.currentAlign = align;
 		},
 
-		/**
-		 * Attach right-click context menus to images and folders
-		 *
-		 * @return     {Void}  Void
-		 */
+		// -------------------------------------------
+		// IMAGE CONTEXT MENU
+		// -------------------------------------------
+		
 		attachContextMenus: () => {
 
 			let moveFolders = _.map(vueImage.folders, (f) => {
 				return {
 					name: (f !== '') ? f : '/ (root)',
-					icon: 'fa-folder'
+					icon: 'fa-folder',
+					callback: (key, opt) => {
+						let moveImageId = _.toString($(opt.$trigger).data('uid'));
+						let moveImageDestFolder = _.nth(vueImage.folders, key);
+						vueImage.moveImage(moveImageId, moveImageDestFolder);
+					}
 				};
 			});
 
@@ -221,7 +324,8 @@ let vueImage = new Vue({
 						name: "Rename",
 						icon: "fa-edit",
 						callback: (key, opt) => {
-							 alert("Clicked on " + key);
+							vueImage.renameImageId = _.toString(opt.$trigger[0].dataset.uid);
+							vueImage.renameImage();
 						}
 					},
 					move: {
@@ -233,60 +337,12 @@ let vueImage = new Vue({
 						name: "Delete",
 						icon: "fa-trash",
 						callback: (key, opt) => {
-							vueImage.deleteImageId = _.toString($(opt.$trigger).data('uid'));
+							vueImage.deleteImageId = _.toString(opt.$trigger[0].dataset.uid);
 							vueImage.deleteImageWarn(true);
 						}
 					}
 				}
 			});
-		},
-
-		deleteImageWarn: (show) => {
-			if(show) {
-				let c = _.find(vueImage.images, ['_id', vueImage.deleteImageId ]);
-				if(c) {
-					vueImage.deleteImageFilename = c.filename;
-				} else {
-					vueImage.deleteImageFilename = 'this image';
-				}
-			}
-			vueImage.deleteImageShow = show;
-		},
-
-		deleteImageGo: () => {
-			vueImage.deleteImageWarn(false);
-			vueImage.isLoadingText = 'Deleting image...';
-			vueImage.isLoading = true;
-			Vue.nextTick(() => {
-				socket.emit('uploadsDeleteFile', { uid: vueImage.deleteImageId }, (data) => {
-					vueImage.loadImages();
-				});
-			});
-		},
-
-		waitUploadComplete: () => {
-
-			vueImage.postUploadChecks++;
-			vueImage.isLoadingText = 'Processing...';
-
-			let currentUplAmount = vueImage.images.length;
-			vueImage.loadImages(true);
-
-			Vue.nextTick(() => {
-				_.delay(() => {
-					if(currentUplAmount !== vueImage.images.length) {
-						vueImage.postUploadChecks = 0;
-						vueImage.isLoading = false;
-					} else if(vueImage.postUploadChecks > 5) {
-						vueImage.postUploadChecks = 0;
-						vueImage.isLoading = false;
-						alerts.pushError('Unable to fetch new listing', 'Try again later');
-					} else {
-						vueImage.waitUploadComplete();
-					}
-				}, 2000);
-			});
-
 		}
 
 	}
@@ -294,6 +350,8 @@ let vueImage = new Vue({
 
 $('#btn-editor-uploadimage input').on('change', (ev) => {
 
+	let curImageAmount = vueImage.images.length;
+
 	$(ev.currentTarget).simpleUpload("/uploads/img", {
 
 		name: 'imgfile',
@@ -346,7 +404,7 @@ $('#btn-editor-uploadimage input').on('change', (ev) => {
 
 		finish: () => {
 			if(vueImage.uploadSucceeded) {
-				vueImage.waitUploadComplete();
+				vueImage.waitChangeComplete(curImageAmount, true);
 			} else {
 				vueImage.isLoading = false;
 			}

controllers/ws.js

@@ -57,4 +57,28 @@ module.exports = (socket) => {
     });
   });
 
+  socket.on('uploadsRenameFile', (data, cb) => {
+  	cb = cb || _.noop;
+    upl.moveUploadsFile(data.uid, data.folder, data.filename).then((f) => {
+      return cb({ ok: true }) || true;
+    }).catch((err) => {
+    	return cb({
+    		ok: false,
+    		msg: err.message
+    	}) || true;
+    });
+  });
+
+  socket.on('uploadsMoveFile', (data, cb) => {
+    cb = cb || _.noop;
+    upl.moveUploadsFile(data.uid, data.folder).then((f) => {
+      return cb({ ok: true }) || true;
+    }).catch((err) => {
+    	return cb({
+    		ok: false,
+    		msg: err.message
+    	}) || true;
+    });
+  });
+
 };

libs/uploads-agent.js

@@ -66,7 +66,7 @@ module.exports = {
 
 			let pInfo = self.parseUploadsRelPath(p);
 			return self.processFile(pInfo.folder, pInfo.filename).then((mData) => {
-				return db.UplFile.create(mData);
+				return db.UplFile.findByIdAndUpdate(mData._id, mData, { upsert: true });
 			}).then(() => {
 				return git.commitUploads('Uploaded ' + p);
 			});
@@ -78,12 +78,7 @@ module.exports = {
 		self._watcher.on('unlink', (p) => {
 
 			let pInfo = self.parseUploadsRelPath(p);
-			return db.UplFile.findOneAndRemove({
-				folder: 'f:' + pInfo.folder,
-				filename: pInfo.filename
-			}).then(() => {
-				return git.commitUploads('Deleted ' + p);
-			});
+			return git.commitUploads('Deleted/Renamed ' + p);
 
 		});
 
@@ -113,7 +108,10 @@ module.exports = {
 
 				return db.UplFolder.remove({}).then(() => {
 					return db.UplFolder.insertMany(_.map(folderNames, (f) => {
-						return { name: f };
+						return {
+							_id: 'f:' + f,
+							name: f
+						};
 					}));
 				}).then(() => {
 

libs/uploads.js

@@ -6,6 +6,7 @@ const path = require('path'),
 			multer  = require('multer'),
 			request = require('request'),
 			url = require('url'),
+			farmhash = require('farmhash'),
 			_ = require('lodash');
 
 var regFolderName = new RegExp("^[a-z0-9][a-z0-9\-]*[a-z0-9]$");
@@ -231,6 +232,78 @@ module.exports = {
 
 		});
 
+	},
+
+	/**
+	 * Move/Rename a file
+	 *
+	 * @param      {String}   uid        The file ID
+	 * @param      {String}   fld        The destination folder
+	 * @param      {String}   nFilename  The new filename (optional)
+	 * @return     {Promise}  Promise of the operation
+	 */
+	moveUploadsFile(uid, fld, nFilename) {
+
+		let self = this;
+
+		return db.UplFolder.findById('f:' + fld).then((folder) => {
+			if(folder) {
+				return db.UplFile.findById(uid).then((originFile) => {
+
+					//-> Check if rename is valid
+
+					let nameCheck = null;
+					if(nFilename) {
+						let originFileObj = path.parse(originFile.filename);
+						nameCheck = lcdata.validateUploadsFilename(nFilename + originFileObj.ext, folder.name);
+					} else {
+						nameCheck = Promise.resolve(originFile.filename);
+					}
+
+					return nameCheck.then((destFilename) => {
+
+						let originFolder = (originFile.folder && originFile.folder !== 'f:') ? originFile.folder.slice(2) : './';
+						let sourceFilePath = path.resolve(self._uploadsPath, originFolder, originFile.filename);
+						let destFilePath = path.resolve(self._uploadsPath, folder.name, destFilename);
+						let preMoveOps = [];
+
+						//-> Check for invalid operations
+
+						if(sourceFilePath === destFilePath) {
+							return Promise.reject(new Error('Invalid Operation!'));
+						}
+
+						//-> Delete DB entry
+
+						preMoveOps.push(db.UplFile.findByIdAndRemove(uid));
+
+						//-> Move thumbnail ahead to avoid re-generation
+
+						if(originFile.category === 'image') {
+							let fUid = farmhash.fingerprint32(folder.name + '/' + destFilename);
+							let sourceThumbPath = path.resolve(self._uploadsThumbsPath, originFile._id + '.png');
+							let destThumbPath = path.resolve(self._uploadsThumbsPath, fUid + '.png');
+							preMoveOps.push(fs.moveAsync(sourceThumbPath, destThumbPath));
+						} else {
+							preMoveOps.push(Promise.resolve(true));
+						}
+
+						//-> Proceed to move actual file
+
+						return Promise.all(preMoveOps).then(() => {
+							return fs.moveAsync(sourceFilePath, destFilePath, {
+								clobber: false
+							});
+						});
+
+					})
+
+				});
+			} else {
+				return Promise.reject(new Error('Invalid Destination Folder'));
+			}
+		});
+
 	}
 
 };

views/modals/editor-image.pug

@@ -98,6 +98,23 @@
 						a.card-footer-item(v-on:click="fetchFromUrlDiscard") Discard
 						a.card-footer-item(v-on:click="fetchFromUrlGo") Fetch
 
+	.modal(v-bind:class="{ 'is-active': renameImageShow }")
+		.modal-background
+		.modal-container
+			.modal-content
+				.card.is-fullwidth
+					header.card-header
+						p.card-header-title Rename Image
+					.card-content
+						.content
+							label.label Enter the new filename (without the extension) of the image:
+							p.control
+								input.input#txt-editor-renameimage(type='text', placeholder='filename', v-model='renameImageFilename')
+								span.help.is-danger.is-hidden This filename is invalid!
+					footer.card-footer
+						a.card-footer-item(v-on:click="renameImageDiscard") Discard
+						a.card-footer-item(v-on:click="renameImageGo") Rename
+
 	.modal(v-bind:class="{ 'is-active': deleteImageShow }")
 		.modal-background
 		.modal-container