Completed Image Editor

assets/js/app.js

@@ -1 +1 @@
-"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function setInputSelection(e,t,o){if(e.focus(),"undefined"!=typeof e.selectionStart)e.selectionStart=t,e.selectionEnd=o;else if(document.selection&&document.selection.createRange){e.select();var a=document.selection.createRange();a.collapse(!0),a.moveEnd("character",o),a.moveStart("character",t),a.select()}}function makeSafePath(e){var t=_.split(_.trim(e),"/");return t=_.map(t,function(e){return _.kebabCase(_.deburr(_.trim(e)))}),_.join(_.filter(t,function(e){return!_.isEmpty(e)}),"/")}var _createClass=function(){function e(e,t){for(var o=0;o<t.length;o++){var a=t[o];a.enumerable=a.enumerable||!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}return function(t,o,a){return o&&e(t.prototype,o),a&&e(t,a),t}}();jQuery(document).ready(function(e){e("a").smoothScroll({speed:400,offset:-70});new Sticky(".stickyscroll");e(window).bind("beforeunload",function(){e("#notifload").addClass("active")}),e(document).ajaxSend(function(){e("#notifload").addClass("active")}).ajaxComplete(function(){e("#notifload").removeClass("active")});var t=new Alerts;alertsData&&_.forEach(alertsData,function(e){t.push(e)});var o=io(ioHost);if(e("#search-input").length){e("#search-input").focus(),e(".searchresults").css("display","block");var a=new Vue({el:"#header-container",data:{searchq:"",searchres:[],searchsuggest:[],searchload:0,searchactive:!1,searchmoveidx:0,searchmovekey:"",searchmovearr:[]},watch:{searchq:function(e,t){a.searchmoveidx=0,e.length>=3?(a.searchactive=!0,a.searchload++,o.emit("search",{terms:e},function(e){a.searchres=e.match,a.searchsuggest=e.suggest,a.searchmovearr=_.concat([],a.searchres,a.searchsuggest),a.searchload>0&&a.searchload--})):(a.searchactive=!1,a.searchres=[],a.searchsuggest=[],a.searchmovearr=[],a.searchload=0)},searchmoveidx:function(e,t){e>0?a.searchmovekey=a.searchmovearr[e-1]?"res."+a.searchmovearr[e-1]._id:"sug."+a.searchmovearr[e-1]:a.searchmovekey=""}},methods:{useSuggestion:function(e){a.searchq=e},closeSearch:function(){a.searchq=""},moveSelectSearch:function(){if(!(a.searchmoveidx<1)){var e=a.searchmoveidx-1;a.searchmovearr[e]?window.location.assign("/"+a.searchmovearr[e]._id):a.searchq=a.searchmovearr[e]}},moveDownSearch:function(){a.searchmoveidx<a.searchmovearr.length&&a.searchmoveidx++},moveUpSearch:function(){a.searchmoveidx>0&&a.searchmoveidx--}}});e("main").on("click",a.closeSearch)}if(e("#page-type-view").length&&!function(){var o="home"!==e("#page-type-view").data("entrypath")?e("#page-type-view").data("entrypath"):"",a=o+"/new-page";e(".btn-create-prompt").on("click",function(t){e("#txt-create-prompt").val(a),e("#modal-create-prompt").toggleClass("is-active"),setInputSelection(e("#txt-create-prompt").get(0),o.length+1,a.length),e("#txt-create-prompt").removeClass("is-danger").next().addClass("is-hidden")}),e("#txt-create-prompt").on("keypress",function(t){13===t.which&&e(".btn-create-go").trigger("click")}),e(".btn-create-go").on("click",function(t){var o=makeSafePath(e("#txt-create-prompt").val());_.isEmpty(o)?e("#txt-create-prompt").addClass("is-danger").next().removeClass("is-hidden"):(e("#txt-create-prompt").parent().addClass("is-loading"),window.location.assign("/create/"+o))}),""!==o&&e(".btn-move-prompt").removeClass("is-hidden");var n=_.lastIndexOf(o,"/")+1;e(".btn-move-prompt").on("click",function(t){e("#txt-move-prompt").val(o),e("#modal-move-prompt").toggleClass("is-active"),setInputSelection(e("#txt-move-prompt").get(0),n,o.length),e("#txt-move-prompt").removeClass("is-danger").next().addClass("is-hidden")}),e("#txt-move-prompt").on("keypress",function(t){13===t.which&&e(".btn-move-go").trigger("click")}),e(".btn-move-go").on("click",function(a){var n=makeSafePath(e("#txt-move-prompt").val());_.isEmpty(n)||n===o||"home"===n?e("#txt-move-prompt").addClass("is-danger").next().removeClass("is-hidden"):(e("#txt-move-prompt").parent().addClass("is-loading"),e.ajax(window.location.href,{data:{move:n},dataType:"json",method:"PUT"}).then(function(e,o,a){e.ok?window.location.assign("/"+n):t.pushError("Something went wrong",e.error)},function(e,o,a){t.pushError("Something went wrong","Save operation failed.")}))})}(),e("#page-type-create").length){var n;!function(){var a=e("#page-type-create").data("entrypath");e(".btn-create-discard").on("click",function(t){e("#modal-create-discard").toggleClass("is-active")}),1===e("#mk-editor").length&&!function(){var a=!1;Vue.filter("filesize",function(e){return _.toUpper(filesize(e))});var i=new Vue({el:"#modal-editor-image",data:{isLoading:!1,isLoadingText:"",newFolderName:"",newFolderShow:!1,newFolderError:!1,fetchFromUrlURL:"",fetchFromUrlShow:!1,folders:[],currentFolder:"",currentImage:"",currentAlign:"left",images:[],uploadSucceeded:!1,postUploadChecks:0,deleteImageShow:!1,deleteImageId:0,deleteImageFilename:""},methods:{open:function(){a=!0,e("#modal-editor-image").slideDown(),i.refLine truncated
+"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function setInputSelection(e,t,a){if(e.focus(),"undefined"!=typeof e.selectionStart)e.selectionStart=t,e.selectionEnd=a;else if(document.selection&&document.selection.createRange){e.select();var o=document.selection.createRange();o.collapse(!0),o.moveEnd("character",a),o.moveStart("character",t),o.select()}}function makeSafePath(e){var t=_.split(_.trim(e),"/");return t=_.map(t,function(e){return _.kebabCase(_.deburr(_.trim(e)))}),_.join(_.filter(t,function(e){return!_.isEmpty(e)}),"/")}var _createClass=function(){function e(e,t){for(var a=0;a<t.length;a++){var o=t[a];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,a,o){return a&&e(t.prototype,a),o&&e(t,o),t}}();jQuery(document).ready(function(e){e("a").smoothScroll({speed:400,offset:-70});new Sticky(".stickyscroll");e(window).bind("beforeunload",function(){e("#notifload").addClass("active")}),e(document).ajaxSend(function(){e("#notifload").addClass("active")}).ajaxComplete(function(){e("#notifload").removeClass("active")});var t=new Alerts;alertsData&&_.forEach(alertsData,function(e){t.push(e)});var a=io(ioHost);if(e("#search-input").length){e("#search-input").focus(),e(".searchresults").css("display","block");var o=new Vue({el:"#header-container",data:{searchq:"",searchres:[],searchsuggest:[],searchload:0,searchactive:!1,searchmoveidx:0,searchmovekey:"",searchmovearr:[]},watch:{searchq:function(e,t){o.searchmoveidx=0,e.length>=3?(o.searchactive=!0,o.searchload++,a.emit("search",{terms:e},function(e){o.searchres=e.match,o.searchsuggest=e.suggest,o.searchmovearr=_.concat([],o.searchres,o.searchsuggest),o.searchload>0&&o.searchload--})):(o.searchactive=!1,o.searchres=[],o.searchsuggest=[],o.searchmovearr=[],o.searchload=0)},searchmoveidx:function(e,t){e>0?o.searchmovekey=o.searchmovearr[e-1]?"res."+o.searchmovearr[e-1]._id:"sug."+o.searchmovearr[e-1]:o.searchmovekey=""}},methods:{useSuggestion:function(e){o.searchq=e},closeSearch:function(){o.searchq=""},moveSelectSearch:function(){if(!(o.searchmoveidx<1)){var e=o.searchmoveidx-1;o.searchmovearr[e]?window.location.assign("/"+o.searchmovearr[e]._id):o.searchq=o.searchmovearr[e]}},moveDownSearch:function(){o.searchmoveidx<o.searchmovearr.length&&o.searchmoveidx++},moveUpSearch:function(){o.searchmoveidx>0&&o.searchmoveidx--}}});e("main").on("click",o.closeSearch)}if(e("#page-type-view").length&&!function(){var a="home"!==e("#page-type-view").data("entrypath")?e("#page-type-view").data("entrypath"):"",o=a+"/new-page";e(".btn-create-prompt").on("click",function(t){e("#txt-create-prompt").val(o),e("#modal-create-prompt").toggleClass("is-active"),setInputSelection(e("#txt-create-prompt").get(0),a.length+1,o.length),e("#txt-create-prompt").removeClass("is-danger").next().addClass("is-hidden")}),e("#txt-create-prompt").on("keypress",function(t){13===t.which&&e(".btn-create-go").trigger("click")}),e(".btn-create-go").on("click",function(t){var a=makeSafePath(e("#txt-create-prompt").val());_.isEmpty(a)?e("#txt-create-prompt").addClass("is-danger").next().removeClass("is-hidden"):(e("#txt-create-prompt").parent().addClass("is-loading"),window.location.assign("/create/"+a))}),""!==a&&e(".btn-move-prompt").removeClass("is-hidden");var n=_.lastIndexOf(a,"/")+1;e(".btn-move-prompt").on("click",function(t){e("#txt-move-prompt").val(a),e("#modal-move-prompt").toggleClass("is-active"),setInputSelection(e("#txt-move-prompt").get(0),n,a.length),e("#txt-move-prompt").removeClass("is-danger").next().addClass("is-hidden")}),e("#txt-move-prompt").on("keypress",function(t){13===t.which&&e(".btn-move-go").trigger("click")}),e(".btn-move-go").on("click",function(o){var n=makeSafePath(e("#txt-move-prompt").val());_.isEmpty(n)||n===a||"home"===n?e("#txt-move-prompt").addClass("is-danger").next().removeClass("is-hidden"):(e("#txt-move-prompt").parent().addClass("is-loading"),e.ajax(window.location.href,{data:{move:n},dataType:"json",method:"PUT"}).then(function(e,a,o){e.ok?window.location.assign("/"+n):t.pushError("Something went wrong",e.error)},function(e,a,o){t.pushError("Something went wrong","Save operation failed.")}))})}(),e("#page-type-create").length){var n;!function(){var o=e("#page-type-create").data("entrypath");e(".btn-create-discard").on("click",function(t){e("#modal-create-discard").toggleClass("is-active")}),1===e("#mk-editor").length&&!function(){var o=!1;Vue.filter("filesize",function(e){return _.toUpper(filesize(e))});var i=new Vue({el:"#modal-editor-image",data:{isLoading:!1,isLoadingText:"",newFolderName:"",newFolderShow:!1,newFolderError:!1,fetchFromUrlURL:"",fetchFromUrlShow:!1,folders:[],currentFolder:"",currentImage:"",currentAlign:"left",images:[],uploadSucceeded:!1,postUploadChecks:0,renameImageShow:!1,renameImageId:"",renameImageFilename:"",deleteImageShow:!1,deleteImageId:"",deleteImageFilename:""},methods:{opeLine truncated

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
+		// RENAME IMAGE
-		 *
+		// -------------------------------------------
-		 * @param      {string}  fldName  The folder name
+
-		 * @return     {Void}  Void
+		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,16 +241,12 @@ 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;
@@ -163,41 +254,53 @@ let vueImage = new Vue({
 							vueImage.isLoading = false;
 						}
 						vueImage.attachContextMenus();
+						resolve(true);
+					});
 				});
 			});
 		},
 
-		/**
+		waitChangeComplete: (oldAmount, expectChange) => {
-		 * Select an image
+
-		 *
+			expectChange = (_.isBoolean(expectChange)) ? expectChange : true;
-		 * @param      {String}  imageId  The image identifier
+
-		 * @return     {Void}  Void
+			vueImage.postUploadChecks++;
-		 */
+			vueImage.isLoadingText = 'Processing...';
-		selectImage: (imageId) => {
+
-			vueImage.currentImage = imageId;
+			Vue.nextTick(() => {
+				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);
+					}
+				});
+			});
+
 		},
 
-		/**
+		// -------------------------------------------
-		 * Set image alignment
+		// IMAGE CONTEXT MENU
-		 *
+		// -------------------------------------------
-		 * @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
-		 */
 		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({
+			return git.commitUploads('Deleted/Renamed ' + p);
-				folder: 'f:' + pInfo.folder,
-				filename: pInfo.filename
-			}).then(() => {
-				return git.commitUploads('Deleted ' + 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