refactor: editor-file.vue -> upload, move, delete

client/js/app.js

@@ -38,6 +38,7 @@ import join from 'lodash/join'
 import kebabCase from 'lodash/kebabCase'
 import last from 'lodash/last'
 import map from 'lodash/map'
+import nth from 'lodash/nth'
 import pullAt from 'lodash/pullAt'
 import reject from 'lodash/reject'
 import slice from 'lodash/slice'
@@ -101,6 +102,7 @@ const _ = {
   kebabCase,
   last,
   map,
+  nth,
   pullAt,
   reject,
   slice,

client/js/components/editor-file.vue

@@ -8,29 +8,29 @@
           .modal-content.is-expanded(v-show='isShown')
             header.is-green
               span {{ $t('editor.filetitle') }}
-              p.modal-notify(v-bind:class='{ "is-active": isLoading }')
+              p.modal-notify(:class='{ "is-active": isLoading }')
                 span {{ isLoadingText }}
                 i
             .modal-toolbar.is-green
-              a.button(v-on:click='newFolder')
+              a.button(@click='newFolder')
                 i.icon-folder2
                 span {{ $t('editor.newfolder') }}
               a.button#btn-editor-file-upload
                 i.icon-cloud-upload
                 span {{ $t('editor.fileupload') }}
                 label
-                  input(type='file', multiple)
+                  input(type='file', multiple, :disabled='isLoading', ref='editorFileUploadInput')
             section.is-gapless
               .columns.is-stretched
                 .column.is-one-quarter.modal-sidebar.is-green(style={'max-width':'350px'})
                   .model-sidebar-header {{ $t('editor.folders') }}
                   ul.model-sidebar-list
                     li(v-for='fld in folders')
-                      a(v-on:click='selectFolder(fld)', v-bind:class='{ "is-active": currentFolder === fld }')
+                      a(@click='selectFolder(fld)', :class='{ "is-active": currentFolder === fld }')
                         i.icon-folder2
                         span / {{ fld }}
                 .column.editor-modal-file-choices
-                  figure(v-for='fl in files', v-bind:class='{ "is-active": currentFile === fl._id }', v-on:click='selectFile(fl._id)', v-bind:data-uid='fl._id')
+                  figure(v-for='fl in files', :class='{ "is-active": currentFile === fl._id }', @click='selectFile(fl._id)', :data-uid='fl._id')
                     i(class='icon-file')
                     span: strong {{ fl.filename }}
                     span {{ fl.mime }}
@@ -39,49 +39,56 @@
                     i.icon-marquee-minus
                     | {{ $t('editor.filefolderempty') }}
             footer
-              a.button.is-grey.is-outlined(v-on:click='cancel') {{ $t('editor.discard') }}
+              a.button.is-grey.is-outlined(@click='cancel') {{ $t('editor.discard') }}
-              a.button.is-green(v-on:click='insertFileLink') {{ $t('editor.fileinsert') }}
+              a.button.is-green(@click='insertFileLink') {{ $t('editor.fileinsert') }}
 
+      transition(:duration="400")
         .modal.is-superimposed(v-show='newFolderShow')
           transition(name='modal-background')
-          .modal-background
+            .modal-background(v-show='newFolderShow')
-        .modal-container(v-show='newFolderShow')
+          .modal-container
             transition(name='modal-content')
               .modal-content(v-show='newFolderShow')
                 header.is-light-blue {{ $t('modal.newfoldertitle') }}
                 section
                   label.label {{ $t('modal.newfoldername') }}
                   p.control.is-fullwidth
-                  input.input(type='text', v-bind:placeholder='$t("modal.newfoldernameplaceholder")', v-model='newFolderName', ref='editorFileNewFolderInput', v-on:keyup.enter='newFolderCreate', v-on:keyup.esc='newFolderDiscard')
+                    input.input(type='text', :placeholder='$t("modal.newfoldernameplaceholder")', v-model='newFolderName', ref='editorFileNewFolderInput', @keyup.enter='newFolderCreate', @keyup.esc='newFolderDiscard')
                     span.help.is-danger(v-show='newFolderError') {{ $t('modal.newfolderinvalid') }}
                 footer
-                a.button.is-grey.is-outlined(v-on:click='newFolderDiscard') {{ $t('modal.discard') }}
+                  a.button.is-grey.is-outlined(@click='newFolderDiscard') {{ $t('modal.discard') }}
-                a.button.is-light-blue(v-on:click='newFolderCreate') {{ $t('modal.create') }}
+                  a.button.is-light-blue(@click='newFolderCreate') {{ $t('modal.create') }}
 
+      transition(:duration="400")
         .modal.is-superimposed(v-show='renameFileShow')
-        .modal-background
+          transition(name='modal-background')
+            .modal-background(v-show='renameFileShow')
           .modal-container
-          .modal-content
+            transition(name='modal-content')
+              .modal-content(v-show='renameFileShow')
                 header.is-indigo {{ $t('modal.renamefiletitle') }}
                 section
                   label.label {{ $t('modal.renamefilename') }}
                   p.control.is-fullwidth
-                input.input#txt-editor-file-rename(type='text', v-bind:placeholder='$t("modal.renamefilenameplaceholder")', v-model='renameFileFilename', ref='editorFileRenameInput', v-on:keyup.enter='renameFileGo', v-on:keyup.esc='renameFileDiscard')
+                    input.input#txt-editor-file-rename(type='text', :placeholder='$t("modal.renamefilenameplaceholder")', v-model='renameFileFilename', ref='editorFileRenameInput', @keyup.enter='renameFileGo', @keyup.esc='renameFileDiscard')
                     span.help.is-danger.is-hidden {{ $t('modal.renamefileinvalid') }}
                 footer
-              a.button.is-grey.is-outlined(v-on:click='renameFileDiscard') {{ $t('modal.discard') }}
+                  a.button.is-grey.is-outlined(@click='renameFileDiscard') {{ $t('modal.discard') }}
-              a.button.is-light-blue(v-on:click='renameFileGo') {{ $t('modal.renamefile') }}
+                  a.button.is-light-blue(@click='renameFileGo') {{ $t('modal.renamefile') }}
 
+      transition(:duration="400")
         .modal.is-superimposed(v-show='deleteFileShow')
-        .modal-background
+          transition(name='modal-background')
+            .modal-background(v-show='deleteFileShow')
           .modal-container
-          .modal-content
+            transition(name='modal-content')
+              .modal-content(v-show='deleteFileShow')
                 header.is-red {{ $t('modal.deletefiletitle') }}
                 section
                   span {{ $t('modal.deletefilewarn') }} #[strong {{deleteFileFilename}}]?
                 footer
-              a.button.is-grey.is-outlined(v-on:click='deleteFileWarn(false)') {{ $t('modal.discard') }}
+                  a.button.is-grey.is-outlined(@click='deleteFileWarn(false)') {{ $t('modal.discard') }}
-              a.button.is-red(v-on:click='deleteFileGo')  {{ $t('modal.delete') }}
+                  a.button.is-red(@click='deleteFileGo')  {{ $t('modal.delete') }}
 </template>
 
 <script>
@@ -115,9 +122,11 @@
     },
     methods: {
       init () {
+        $(this.$refs.editorFileUploadInput).on('change', this.upload)
         this.refreshFolders()
       },
       cancel () {
+        $(this.$refs.editorFileUploadInput).off('change', this.upload)
         this.$store.dispatch('editorFile/close')
       },
       filesize (rawSize) {
@@ -240,6 +249,11 @@
           socket.emit('uploadsMoveFile', { uid, folder: fld }, (data) => {
             if (data.ok) {
               self.loadFiles()
+              self.$store.dispatch('alert', {
+                style: 'blue',
+                icon: 'arrow-right2',
+                msg: self.$t('editor.filemovesuccess')
+              })
             } else {
               self.isLoading = false
               self.$store.dispatch('alert', {
@@ -271,6 +285,11 @@
         this.$nextTick(() => {
           socket.emit('uploadsDeleteFile', { uid: this.deleteFileId }, (data) => {
             self.loadFiles()
+            self.$store.dispatch('alert', {
+              style: 'blue',
+              icon: 'trash2',
+              msg: self.$t('editor.filedeletesuccess')
+            })
           })
         })
       },
@@ -404,6 +423,79 @@
             }
           }
         })
+      },
+      upload() {
+        let self = this
+        let curFileAmount = this.files.length
+
+        $(this.$refs.editorFileUploadInput).simpleUpload('/uploads/file', {
+
+          name: 'binfile',
+          data: {
+            folder: self.currentFolder
+          },
+          limit: 20,
+          expect: 'json',
+          maxFileSize: 0,
+
+          init: (totalUploads) => {
+            self.uploadSucceeded = false
+            self.isLoadingText = 'Preparing to upload...'
+            self.isLoading = true
+          },
+
+          progress: (progress) => {
+            self.isLoadingText = 'Uploading...' + Math.round(progress) + '%'
+          },
+
+          success: (data) => {
+            if (data.ok) {
+              let failedUpls = self._.filter(data.results, ['ok', false])
+              if (failedUpls.length) {
+                self._.forEach(failedUpls, (u) => {
+                  self.$store.dispatch('alert', {
+                    style: 'red',
+                    icon: 'square-cross',
+                    msg: self.$t('editor.fileuploaderror', { err: u.msg })
+                  })
+                })
+                if (failedUpls.length < data.results.length) {
+                  self.uploadSucceeded = true
+                }
+              } else {
+                self.uploadSucceeded = true
+                self.$store.dispatch('alert', {
+                  style: 'blue',
+                  icon: 'cloud-upload',
+                  msg: self.$t('editor.fileuploadsuccess')
+                })
+              }
+            } else {
+              self.$store.dispatch('alert', {
+                style: 'red',
+                icon: 'square-cross',
+                msg: self.$t('editor.fileuploaderror', { err: data.msg })
+              })
+            }
+          },
+
+          error: (error) => {
+            self.$store.dispatch('alert', {
+              style: 'red',
+              icon: 'square-cross',
+              msg: self.$t('editor.fileuploaderror', { err: error.message })
+            })
+          },
+
+          finish: () => {
+            if (self.uploadSucceeded) {
+              self.waitChangeComplete(curFileAmount, true)
+            } else {
+              self.isLoading = false
+            }
+          }
+
+        })
       }
     },
     mounted() {

server/locales/en/browser.json

@@ -10,6 +10,7 @@
     "filedeleteaction": "Delete",
     "filedeleteloading": "Deleting file...",
     "filedeletedefault": "this file",
+    "filedeletesuccess": "File deleted successfully.",
     "fileerror": "Unable to fetch updated listing.",
     "filefolderempty": "This folder is empty.",
     "fileinsert": "Insert Link to File",
@@ -17,11 +18,14 @@
     "filemoveaction": "Move to...",
     "filemoveerror": "Move error: {{err}}",
     "filemoveloading": "Moving file...",
+    "filemovesuccess": "File moved successfully.",
     "fileprocessing": "Processing...",
     "filerenameaction": "Rename",
     "filesuccess": "File link has been inserted.",
     "filetitle": "Insert File",
     "fileupload": "Upload File",
+    "fileuploaderror": "Upload Error: {{err}}",
+    "fileuploadsuccess": "File(s) uploaded successfully.",
     "folders": "Folders",
     "foldersloading": "Fetching folders list...",
     "newfolder": "New Folder",