wikijs/client/js/components/editor-file.vue

<template lang="pug">
  transition(:duration="400")
    .modal(v-show='isShown', v-cloak)
      transition(name='modal-background')
        .modal-background(v-show='isShown')
      .modal-container
        transition(name='modal-content')
          .modal-content.is-expanded(v-show='isShown')
            header.is-green
              span {{ (mode === 'file') ? $t('editor.filetitle') : $t('editor.imagetitle') }}
              p.modal-notify(:class='{ "is-active": isLoading }')
                span {{ isLoadingText }}
                i
            .modal-toolbar.is-green
              a.button(@click='newFolder')
                i.nc-icon-outline.files_folder-14
                span {{ $t('editor.newfolder') }}
              a.button#btn-editor-file-upload
                i.nc-icon-outline.arrows-1_cloud-upload-94
                span {{ (mode === 'file') ? $t('editor.fileupload') : $t('editor.imageupload') }}
                label
                  input(type='file', multiple, :disabled='isLoading', ref='editorFileUploadInput')
              a.button(v-if='mode === "image"', @click='fetchFromUrl')
                i.nc-icon-outline.arrows-1_cloud-download-93
                span Fetch from URL
            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(@click='selectFolder(fld)', :class='{ "is-active": currentFolder === fld }')
                        i.nc-icon-outline.files_folder-17
                        span / {{ fld }}
                  .model-sidebar-header(v-if='mode === "image"') Alignment
                  .model-sidebar-content(v-if='mode === "image"')
                    p.control.is-fullwidth
                      select(v-model='currentAlign')
                        option(value='left') {{ $t('editor.imagealignleft') }}
                        option(value='center') {{ $t('editor.imagealigncenter') }}
                        option(value='right') {{ $t('editor.imagealignright') }}
                        option(value='logo') {{ $t('editor.imagealignlogo') }}
                .column.editor-modal-choices.editor-modal-file-choices(v-if='mode === "file"')
                  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 }}
                    span {{ filesize(fl.filesize) }}
                  em(v-show='files.length < 1')
                    i.icon-marquee-minus
                    | {{ $t('editor.filefolderempty') }}
                .column.editor-modal-choices.editor-modal-image-choices(v-if='mode === "image"')
                  figure(v-for='img in files', v-bind:class='{ "is-active": currentFile === img._id }', v-on:click='selectFile(img._id)', v-bind:data-uid='img._id')
                    img(v-bind:src='"/uploads/t/" + img._id + ".png"')
                    span: strong {{ img.basename }}
                    span {{ filesize(img.filesize) }}
                  em(v-show='files.length < 1')
                    i.icon-marquee-minus
                    | {{ $t('editor.filefolderempty') }}
            footer
              a.button.is-grey.is-outlined(@click='cancel') {{ $t('editor.discard') }}
              a.button.is-green(@click='insertFileLink') {{ (mode === 'file') ? $t('editor.fileinsert') : $t('editor.imageinsert') }}

      transition(:duration="400")
        .modal.is-superimposed(v-show='newFolderShow')
          transition(name='modal-background')
            .modal-background(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', :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(@click='newFolderDiscard') {{ $t('modal.discard') }}
                  a.button.is-light-blue(@click='newFolderCreate') {{ $t('modal.create') }}

      transition(:duration="400")
        .modal.is-superimposed(v-show='fetchFromUrlShow')
          transition(name='modal-background')
            .modal-background(v-show='fetchFromUrlShow')
          .modal-container
            transition(name='modal-content')
              .modal-content(v-show='fetchFromUrlShow')
                header.is-light-blue Fetch Image from URL
                section
                  label.label Enter full URL path to the image:
                  p.control.is-fullwidth
                    input.input(type='text', placeholder='http://www.example.com/some-image.png', v-model='fetchFromUrlURL', ref='editorFileFetchInput', @keyup.enter='fetchFromUrlGo', @keyup.esc='fetchFromUrlDiscard')
                    span.help.is-danger.is-hidden This URL path is invalid!
                footer
                  a.button.is-grey.is-outlined(v-on:click='fetchFromUrlDiscard') Discard
                  a.button.is-light-blue(v-on:click='fetchFromUrlGo') Fetch

      transition(:duration="400")
        .modal.is-superimposed(v-show='renameFileShow')
          transition(name='modal-background')
            .modal-background(v-show='renameFileShow')
          .modal-container
            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', :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(@click='renameFileDiscard') {{ $t('modal.discard') }}
                  a.button.is-light-blue(@click='renameFileGo') {{ $t('modal.renamefile') }}

      transition(:duration="400")
        .modal.is-superimposed(v-show='deleteFileShow')
          transition(name='modal-background')
            .modal-background(v-show='deleteFileShow')
          .modal-container
            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(@click='deleteFileWarn(false)') {{ $t('modal.discard') }}
                  a.button.is-red(@click='deleteFileGo')  {{ $t('modal.delete') }}
</template>

<script>
/* global $, socket */

export default {
  name: 'editor-file',
  data () {
    return {
      isLoading: false,
      isLoadingText: '',
      newFolderName: '',
      newFolderShow: false,
      newFolderError: false,
      fetchFromUrlURL: '',
      fetchFromUrlShow: false,
      folders: [],
      currentFolder: '',
      currentFile: '',
      currentAlign: 'left',
      files: [],
      uploadSucceeded: false,
      postUploadChecks: 0,
      renameFileShow: false,
      renameFileId: '',
      renameFileFilename: '',
      deleteFileShow: false,
      deleteFileId: '',
      deleteFileFilename: ''
    }
  },
  computed: {
    isShown () {
      return this.$store.state.editorFile.shown
    },
    mode () {
      return this.$store.state.editorFile.mode
    }
  },
  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) {
      return this.$helpers.common.filesize(rawSize)
    },

    // -------------------------------------------
    // INSERT LINK TO FILE
    // -------------------------------------------

    selectFile(fileId) {
      this.currentFile = fileId
    },
    insertFileLink() {
      let selFile = this._.find(this.files, ['_id', this.currentFile])
      selFile.normalizedPath = (selFile.folder === 'f:') ? selFile.filename : selFile.folder.slice(2) + '/' + selFile.filename
      selFile.titleGuess = this._.startCase(selFile.basename)

      let textToInsert = ''

      if (this.mode === 'image') {
        textToInsert = '![' + selFile.titleGuess + '](/uploads/' + selFile.normalizedPath + ' "' + selFile.titleGuess + '")'
        switch (this.currentAlign) {
          case 'center':
            textToInsert += '{.align-center}'
            break
          case 'right':
            textToInsert += '{.align-right}'
            break
          case 'logo':
            textToInsert += '{.pagelogo}'
            break
        }
      } else {
        textToInsert = '[' + selFile.titleGuess + '](/uploads/' + selFile.normalizedPath + ' "' + selFile.titleGuess + '")'
      }

      this.$store.dispatch('editor/insert', textToInsert)
      this.$store.dispatch('alert', {
        style: 'blue',
        icon: 'ui-1_check-square-09',
        msg: (this.mode === 'file') ? this.$t('editor.filesuccess') : this.$t('editor.imagesuccess')
      })
      this.cancel()
    },

    // -------------------------------------------
    // NEW FOLDER
    // -------------------------------------------

    newFolder() {
      let self = this
      this.newFolderName = ''
      this.newFolderError = false
      this.newFolderShow = true
      this._.delay(() => { self.$refs.editorFileNewFolderInput.focus() }, 400)
    },
    newFolderDiscard() {
      this.newFolderShow = false
    },
    newFolderCreate() {
      let self = this
      let regFolderName = new RegExp('^[a-z0-9][a-z0-9-]*[a-z0-9]$')
      this.newFolderName = this._.kebabCase(this._.trim(this.newFolderName))

      if (this._.isEmpty(this.newFolderName) || !regFolderName.test(this.newFolderName)) {
        this.newFolderError = true
        return
      }

      this.newFolderDiscard()
      this.isLoadingText = this.$t('modal.newfolderloading')
      this.isLoading = true

      this.$nextTick(() => {
        socket.emit('uploadsCreateFolder', { foldername: self.newFolderName }, (data) => {
          self.folders = data
          self.currentFolder = self.newFolderName
          self.files = []
          self.isLoading = false
          self.$store.dispatch('alert', {
            style: 'blue',
            icon: 'files_folder-check',
            msg: self.$t('modal.newfoldersuccess', { name: self.newFolderName })
          })
        })
      })
    },

    // -------------------------------------------
    // FETCH FROM URL
    // -------------------------------------------

    fetchFromUrl() {
      let self = this
      this.fetchFromUrlURL = ''
      this.fetchFromUrlShow = true
      this._.delay(() => { self.$refs.editorFileFetchInput.focus() }, 400)
    },
    fetchFromUrlDiscard() {
      this.fetchFromUrlShow = false
    },
    fetchFromUrlGo() {
      let self = this
      this.fetchFromUrlDiscard()
      this.isLoadingText = 'Fetching image...'
      this.isLoading = true

      this.$nextTick(() => {
        socket.emit('uploadsFetchFileFromURL', { folder: self.currentFolder, fetchUrl: self.fetchFromUrlURL }, (data) => {
          if (data.ok) {
            self.waitChangeComplete(self.files.length, true)
          } else {
            self.isLoading = false
            self.$store.dispatch('alert', {
              style: 'red',
              icon: 'ui-2_square-remove-09',
              msg: self.$t('editor.fileuploaderror', { err: data.msg })
            })
          }
        })
      })
    },

    // -------------------------------------------
    // RENAME FILE
    // -------------------------------------------

    renameFile() {
      let self = this
      let c = this._.find(this.files, [ '_id', this.renameFileId ])
      this.renameFileFilename = c.basename || ''
      this.renameFileShow = true
      this._.delay(() => {
        self.$refs.editorFileRenameInput.select()
      }, 100)
    },
    renameFileDiscard() {
      this.renameFileShow = false
    },
    renameFileGo() {
      let self = this
      this.renameFileDiscard()
      this.isLoadingText = this.$t('modal.renamefileloading')
      this.isLoading = true

      this.$nextTick(() => {
        socket.emit('uploadsRenameFile', { uid: self.renameFileId, folder: self.currentFolder, filename: self.renameFileFilename }, (data) => {
          if (data.ok) {
            self.waitChangeComplete(self.files.length, false)
          } else {
            self.isLoading = false
            self.$store.dispatch('alert', {
              style: 'red',
              icon: 'ui-2_square-remove-09',
              msg: self.$t('modal.renamefileerror', { err: data.msg })
            })
          }
        })
      })
    },

    // -------------------------------------------
    // MOVE FILE
    // -------------------------------------------

    moveFile(uid, fld) {
      let self = this
      this.isLoadingText = this.$t('editor.filemoveloading')
      this.isLoading = true
      this.$nextTick(() => {
        socket.emit('uploadsMoveFile', { uid, folder: fld }, (data) => {
          if (data.ok) {
            self.loadFiles()
            self.$store.dispatch('alert', {
              style: 'blue',
              icon: 'files_check',
              msg: self.$t('editor.filemovesuccess')
            })
          } else {
            self.isLoading = false
            self.$store.dispatch('alert', {
              style: 'red',
              icon: 'ui-2_square-remove-09',
              msg: self.$t('editor.filemoveerror', { err: data.msg })
            })
          }
        })
      })
    },

    // -------------------------------------------
    // DELETE FILE
    // -------------------------------------------

    deleteFileWarn(show) {
      if (show) {
        let c = this._.find(this.files, [ '_id', this.deleteFileId ])
        this.deleteFileFilename = c.filename || this.$t('editor.filedeletedefault')
      }
      this.deleteFileShow = show
    },
    deleteFileGo() {
      let self = this
      this.deleteFileWarn(false)
      this.isLoadingText = this.$t('editor.filedeleteloading')
      this.isLoading = true
      this.$nextTick(() => {
        socket.emit('uploadsDeleteFile', { uid: this.deleteFileId }, (data) => {
          self.loadFiles()
          self.$store.dispatch('alert', {
            style: 'blue',
            icon: 'ui-1_trash',
            msg: self.$t('editor.filedeletesuccess')
          })
        })
      })
    },

    // -------------------------------------------
    // LOAD FROM REMOTE
    // -------------------------------------------

    selectFolder(fldName) {
      this.currentFolder = fldName
      this.loadFiles()
    },

    refreshFolders() {
      let self = this
      this.isLoadingText = this.$t('editor.foldersloading')
      this.isLoading = true
      this.currentFolder = ''
      this.currentImage = ''
      this.$nextTick(() => {
        socket.emit('uploadsGetFolders', { }, (data) => {
          self.folders = data
          self.loadFiles()
        })
      })
    },

    loadFiles(silent) {
      let self = this
      if (!silent) {
        this.isLoadingText = this.$t('editor.fileloading')
        this.isLoading = true
      }
      return new Promise((resolve, reject) => {
        self.$nextTick(() => {
          let loadAction = (self.mode === 'image') ? 'uploadsGetImages' : 'uploadsGetFiles'
          socket.emit(loadAction, { folder: self.currentFolder }, (data) => {
            self.files = data
            if (!silent) {
              self.isLoading = false
            }
            self.attachContextMenus()
            resolve(true)
          })
        })
      })
    },

    waitChangeComplete(oldAmount, expectChange) {
      let self = this
      expectChange = (this._.isBoolean(expectChange)) ? expectChange : true

      this.postUploadChecks++
      this.isLoadingText = this.$t('editor.fileprocessing')

      this.$nextTick(() => {
        self.loadFiles(true).then(() => {
          if ((self.files.length !== oldAmount) === expectChange) {
            self.postUploadChecks = 0
            self.isLoading = false
          } else if (self.postUploadChecks > 5) {
            self.postUploadChecks = 0
            self.isLoading = false
            self.$store.dispatch('alert', {
              style: 'red',
              icon: 'ui-2_square-remove-09',
              msg: self.$t('editor.fileerror')
            })
          } else {
            self._.delay(() => {
              self.waitChangeComplete(oldAmount, expectChange)
            }, 1500)
          }
        })
      })
    },

    // -------------------------------------------
    // IMAGE CONTEXT MENU
    // -------------------------------------------

    attachContextMenus() {
      let self = this
      let moveFolders = this._.map(this.folders, (f) => {
        return {
          name: (f !== '') ? f : '/ (root)',
          icon: 'nc-icon-outline files_folder-15',
          callback: (key, opt) => {
            let moveFileId = self._.toString($(opt.$trigger).data('uid'))
            let moveFileDestFolder = self._.nth(self.folders, key)
            self.moveFile(moveFileId, moveFileDestFolder)
          }
        }
      })

      $.contextMenu('destroy', '.editor-modal-choices > figure')
      $.contextMenu({
        selector: '.editor-modal-choices > figure',
        appendTo: '.editor-modal-choices',
        position: (opt, x, y) => {
          $(opt.$trigger).addClass('is-contextopen')
          let trigPos = $(opt.$trigger).position()
          let trigDim = { w: $(opt.$trigger).width() / 5, h: $(opt.$trigger).height() / 2 }
          opt.$menu.css({ top: trigPos.top + trigDim.h, left: trigPos.left + trigDim.w })
        },
        events: {
          hide: (opt) => {
            $(opt.$trigger).removeClass('is-contextopen')
          }
        },
        items: {
          rename: {
            name: self.$t('editor.filerenameaction'),
            icon: 'nc-icon-outline files_vector',
            callback: (key, opt) => {
              self.renameFileId = self._.toString(opt.$trigger[0].dataset.uid)
              self.renameFile()
            }
          },
          move: {
            name: self.$t('editor.filemoveaction'),
            icon: 'fa-folder-open-o',
            items: moveFolders
          },
          delete: {
            name: self.$t('editor.filedeleteaction'),
            icon: 'icon-trash2',
            callback: (key, opt) => {
              self.deleteFileId = self._.toString(opt.$trigger[0].dataset.uid)
              self.deleteFileWarn(true)
            }
          }
        }
      })
    },
    upload() {
      let self = this
      let curFileAmount = this.files.length
      let uplUrl = (self.mode === 'image') ? '/uploads/img' : '/uploads/file'

      $(this.$refs.editorFileUploadInput).simpleUpload(uplUrl, {

        name: (self.mode === 'image') ? 'imgfile' : 'binfile',
        data: {
          folder: self.currentFolder
        },
        limit: 20,
        expect: 'json',
        allowedExts: (self.mode === 'image') ? ['jpg', 'jpeg', 'gif', 'png', 'webp'] : undefined,
        allowedTypes: (self.mode === 'image') ? ['image/png', 'image/jpeg', 'image/gif', 'image/webp'] : undefined,
        maxFileSize: (self.mode === 'image') ? 3145728 : 0, // max 3 MB

        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: 'ui-2_square-remove-09',
                  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: 'arrows-1_cloud-upload-96',
                msg: self.$t('editor.fileuploadsuccess')
              })
            }
          } else {
            self.$store.dispatch('alert', {
              style: 'red',
              icon: 'ui-2_square-remove-09',
              msg: self.$t('editor.fileuploaderror', { err: data.msg })
            })
          }
        },

        error: (error) => {
          self.$store.dispatch('alert', {
            style: 'red',
            icon: 'ui-2_square-remove-09',
            msg: self.$t('editor.fileuploaderror', { err: error.message })
          })
        },

        finish: () => {
          if (self.uploadSucceeded) {
            self.waitChangeComplete(curFileAmount, true)
          } else {
            self.isLoading = false
          }
        }

      })
    }
  },
  mounted() {
    this.$root.$on('editorFile/init', this.init)
  }
}
</script>