use header component to select multiple files to download

frontend/src/api/files.js

@@ -58,7 +58,8 @@ export async function put (url, content = '') {
 }
 
 export function download (format, ...files) {
-  let url = `${baseURL}/api/raw`
+  const isSharing = store.getters['isSharing']
+  let url = isSharing ? `${baseURL}/api/public/dl/${store.state.shared.hash}` : `${baseURL}/api/raw`
 
   if (files.length === 1) {
     url += removePrefix(files[0]) + '?'
@@ -78,7 +79,9 @@ export function download (format, ...files) {
     url += `algo=${format}&`
   }
 
-  url += `auth=${store.state.jwt}`
+  if (!isSharing) {
+    url += `auth=${store.state.jwt}`
+  }
   window.open(url)
 }
 

frontend/src/api/utils.js

@@ -36,6 +36,8 @@ export async function fetchJSON (url, opts) {
 export function removePrefix (url) {
   if (url.startsWith('/files')) {
     url = url.slice(6)
+  } else if (store.getters['isSharing']) {
+    url = url.slice(7 + store.state.shared.hash.length)
   }
 
   if (url === '') url = '/'

frontend/src/components/Header.vue

@@ -28,7 +28,7 @@
         </div>
 
         <!-- This buttons are shown on a dropdown on mobile phones -->
-        <div id="dropdown" :class="{ active: showMore }">
+        <div class="dropdown" :class="{ active: showMore }">
           <div v-if="!isListing || !isMobile">
             <share-button v-show="showShareButton"></share-button>
             <rename-button v-show="showRenameButton"></rename-button>
@@ -49,6 +49,17 @@
           </button>
         </div>
       </template>
+      <template v-if="isSharing">
+        <!-- This buttons are shown on a dropdown on mobile phones -->
+        <div class="dropdown" :class="{ active: showMore }">
+          <download-button v-if="sharedSelectedCount > 0"></download-button>
+
+          <button @click="toggleSharedMultipleSelection" :aria-label="$t('buttons.selectMultiple')" :title="$t('buttons.selectMultiple')" class="action" >
+            <i class="material-icons">check_circle</i>
+            <span>{{ $t('buttons.select') }}</span>
+          </button>
+        </div>
+      </template>
 
       <div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
     </div>
@@ -110,14 +121,17 @@ export default {
       'isEditor',
       'isPreview',
       'isListing',
-      'isLogged'
+      'isLogged',
+      'isSharing',
+      'sharedSelectedCount'
     ]),
     ...mapState([
       'req',
       'user',
       'loading',
       'reload',
-      'multiple'
+      'multiple',
+      'shared'
     ]),
     logoURL: () => logoURL,
     isExecEnabled: () => enableExec,
@@ -156,7 +170,7 @@ export default {
         : this.user.perm.create)
     },
     showMore () {
-      return this.isFiles && this.$store.state.show === 'more'
+      return (this.isFiles || this.isSharing) && this.$store.state.show === 'more'
     },
     showOverlay () {
       return this.showMore
@@ -176,6 +190,10 @@ export default {
       this.$store.commit('multiple', !this.multiple)
       this.resetPrompts()
     },
+    toggleSharedMultipleSelection () {
+      this.$store.commit('sharedMultiple', !this.shared.multiple)
+      this.resetPrompts()
+    },
     resetPrompts () {
       this.$store.commit('closeHovers')
     }

frontend/src/components/buttons/Download.vue

@@ -3,6 +3,7 @@
     <i class="material-icons">file_download</i>
     <span>{{ $t('buttons.download') }}</span>
     <span v-if="selectedCount > 0" class="counter">{{ selectedCount }}</span>
+    <span v-else-if="isSharing && sharedSelectedCount > 0" class="counter">{{ sharedSelectedCount }}</span>
   </button>
 </template>
 
@@ -13,12 +14,12 @@ import { files as api } from '@/api'
 export default {
   name: 'download-button',
   computed: {
-    ...mapState(['req', 'selected']),
-    ...mapGetters(['isListing', 'selectedCount'])
+    ...mapState(['req', 'selected', 'shared']),
+    ...mapGetters(['isListing', 'selectedCount', 'isSharing', 'sharedSelectedCount'])
   },
   methods: {
     download: function () {
-      if (!this.isListing) {
+      if (!this.isListing && !this.isSharing) {
         api.download(null, this.$route.path)
         return
       }
@@ -28,6 +29,11 @@ export default {
         return
       }
 
+      if (this.sharedSelectedCount === 1 && !this.shared.req.items[this.shared.selected[0]].isDir) {
+        api.download(null, this.shared.req.items[this.shared.selected[0]].url)
+        return
+      }
+
       this.$store.commit('showHover', 'download')
     }
   }

frontend/src/components/prompts/Download.vue

@@ -25,12 +25,20 @@ import { files as api } from '@/api'
 export default {
   name: 'download',
   computed: {
-    ...mapState(['selected', 'req']),
-    ...mapGetters(['selectedCount'])
+    ...mapState(['selected', 'req', 'shared']),
+    ...mapGetters(['selectedCount', 'isSharing' ,'sharedSelectedCount'])
   },
   methods: {
     download: function (format) {
-      if (this.selectedCount === 0) {
+      if (this.isSharing) {
+        let files = []
+
+        for (let i of this.shared.selected) {
+          files.push(this.shared.req.items[i].url)
+        }
+
+        api.download(format, ...files)
+      } else if (this.selectedCount === 0) {
         api.download(format, this.$route.path)
       } else {
         let files = []

frontend/src/css/mobile.css

@@ -28,7 +28,7 @@
     height: 100%;
     background-color: rgba(0, 0, 0, 0.1);
   }
-  #dropdown {
+  .dropdown {
     position: fixed;
     top: 1em;
     right: 1em;
@@ -40,23 +40,23 @@
     transform-origin: top right;
     z-index: 99999;
   }
-  #dropdown > div {
+  .dropdown > div {
     display: block;
   }
-  #dropdown.active {
+  .dropdown.active {
     transform: scale(1);
   }
-  #dropdown .action {
+  .dropdown .action {
     display: flex;
     align-items: center;
     border-radius: 0;
     width: 100%;
   }
-  #dropdown .action span:not(.counter) {
+  .dropdown .action span:not(.counter) {
     display: inline-block;
     padding: .4em;
   }
-  #dropdown .counter {
+  .dropdown .counter {
     left: 2.25em;
   }
   #file-selection {

frontend/src/store/getters.js

@@ -4,6 +4,7 @@ const getters = {
   isListing: (state, getters) => getters.isFiles && state.req.isDir,
   isEditor: (state, getters) => getters.isFiles && (state.req.type === 'text' || state.req.type === 'textImmutable'),
   isPreview: state => state.previewMode,
+  isSharing: state =>  state.shared.loaded && state.route.name === 'Share',
   selectedCount: state => state.selected.length,
   progress : state => {
     if (state.upload.progress.length == 0) {

frontend/src/store/index.js

@@ -26,6 +26,9 @@ const state = {
   showConfirm: null,
   previewMode: false,
   shared: {
+    req: {},
+    hash: '',
+    loaded: false,
     selected: [],
     multiple: false
   }

frontend/src/store/mutations.js

@@ -27,8 +27,12 @@ const mutations = {
     state.show = 'success'
     state.showMessage = value
   },
-  setLoading: (state, value) => { state.loading = value },
-  setReload: (state, value) => { state.reload = value },
+  setLoading: (state, value) => {
+    state.loading = value
+  },
+  setReload: (state, value) => {
+    state.reload = value
+  },
   setUser: (state, value) => {
     if (value === null) {
       state.user = null
@@ -96,7 +100,10 @@ const mutations = {
   resetSharedSelected: (state) => {
     state.shared.selected = []
   },
-  sharedMultiple: (state, value) => (state.shared.multiple = value)
+  sharedMultiple: (state, value) => (state.shared.multiple = value),
+  updateSharedRequest: (state, value) => (state.shared.req = value),
+  setSharedHash: (state, value) => (state.shared.hash = value),
+  toggleSharedLoaded: (state, value) => (state.shared.loaded = value)
 }
 
 export default mutations

frontend/src/views/Share.vue

@@ -1,7 +1,7 @@
 <template>
-  <div v-if="loaded">
+  <div v-if="shared.loaded">
     <div id="breadcrumbs">
-      <router-link :to="'/share/' + hash" :aria-label="$t('files.home')" :title="$t('files.home')">
+      <router-link :to="'/share/' + shared.hash" :aria-label="$t('files.home')" :title="$t('files.home')">
         <i class="material-icons">home</i>
       </router-link>
 
@@ -13,13 +13,13 @@
     <div class="share">
       <div class="share__box share__box__info">
           <div class="share__box__header">
-            {{ file.isDir ? sharedSelectedCount > 0 ? $t('download.downloadSelected') : $t('download.downloadFolder') : $t('download.downloadFile') }}
+            {{ shared.req.isDir ? $t('download.downloadFolder') : $t('download.downloadFile') }}
           </div>
           <div class="share__box__element share__box__center share__box__icon">
             <i class="material-icons">{{ icon }}</i>
           </div>
           <div class="share__box__element">
-            <strong>{{ $t('prompts.displayName') }}</strong> {{ file.name }}
+            <strong>{{ $t('prompts.displayName') }}</strong> {{ shared.req.name }}
           </div>
           <div class="share__box__element">
             <strong>{{ $t('prompts.lastModified') }}:</strong> {{ humanTime }}
@@ -33,19 +33,13 @@
           <div class="share__box__element share__box__center">
             <qrcode-vue :value="fullLink" size="200" level="M"></qrcode-vue>
           </div>
-          <div v-if="file.isDir" class="share__box__element share__box__center">
-            <label>
-              <input type="checkbox" :checked="shared.multiple" @click="toggleMultipleSelection">
-              {{ $t('buttons.selectMultiple') }}
-            </label>
-          </div>
       </div>
-      <div v-if="file.isDir" class="share__box share__box__items">
-        <div class="share__box__header" v-if="file.isDir">
+      <div v-if="shared.req.isDir" class="share__box share__box__items">
+        <div class="share__box__header" v-if="shared.req.isDir">
           {{ $t('files.files') }}
         </div>
         <div id="listing" class="list">
-          <shared-item v-for="(item) in file.items.slice(0, this.showLimit)"
+          <shared-item v-for="(item) in shared.req.items.slice(0, this.showLimit)"
             :key="base64(item.name)"
             v-bind:index="item.index"
             v-bind:name="item.name"
@@ -55,9 +49,16 @@
             v-bind:type="item.type"
             v-bind:size="item.size">
           </shared-item>
-          <div v-if="file.items.length > showLimit" class="item">
+          <div v-if="shared.req.items.length > showLimit" class="item">
             <div>
-              <p class="name"> + {{ file.items.length - showLimit }} </p>
+              <p class="name"> + {{ shared.req.items.length - showLimit }} </p>
+            </div>
+          </div>
+
+          <div :class="{ active: $store.state.shared.multiple }" id="multiple-selection">
+            <p>{{ $t('files.multipleSelectionEnabled') }}</p>
+            <div @click="$store.commit('sharedMultiple', false)" tabindex="0" role="button" :title="$t('files.clear')" :aria-label="$t('files.clear')" class="action">
+              <i class="material-icons">clear</i>
             </div>
           </div>
         </div>
@@ -82,15 +83,16 @@ export default {
     QrcodeVue
   },
   data: () => ({
-    loaded: false,
     notFound: false,
-    file: null,
+    filePath: '',
     showLimit: 500
   }),
   watch: {
     '$route': 'fetchData'
   },
   created: async function () {
+    const hash = this.$route.params.pathMatch.split('/')[0]
+    this.setSharedHash(hash)
     await this.fetchData()
   },
   mounted () {
@@ -103,17 +105,14 @@ export default {
     ...mapState(['shared']),
     ...mapGetters(['sharedSelectedCount']),
     icon: function () {
-      if (this.file.isDir) return 'folder'
-      if (this.file.type === 'image') return 'insert_photo'
-      if (this.file.type === 'audio') return 'volume_up'
-      if (this.file.type === 'video') return 'movie'
+      if (this.shared.req.isDir) return 'folder'
+      if (this.shared.req.type === 'image') return 'insert_photo'
+      if (this.shared.req.type === 'audio') return 'volume_up'
+      if (this.shared.req.type === 'video') return 'movie'
       return 'insert_drive_file'
     },
-    hash: function () {
-      return this.$route.params.pathMatch.split('/')[0]
-    },
     path: function () {
-      let absoluteParts = this.file.path.split('/')
+      let absoluteParts = this.filePath.split('/')
       let urlParts = this.$route.params.pathMatch.split('/')
 
       absoluteParts.shift()
@@ -133,26 +132,20 @@ export default {
       return absoluteParts.slice(absoluteParts.length - len).join('/')
     },
     link: function () {
-      if (this.sharedSelectedCount === 0) return `${baseURL}/api/public/dl/${this.hash}/${this.path}`
-      if (this.sharedSelectedCount === 1) return `${baseURL}/api/public/dl/${this.hash}/${this.path}/${encodeURIComponent(this.file.items[this.shared.selected[0]].name)}`
-      let files = []
-      for (let s of this.shared.selected) {
-        files.push(encodeURIComponent(this.file.items[s].name))
-      }
-      return `${baseURL}/api/public/dl/${this.hash}/${this.path}/?files=${encodeURIComponent(files.join(','))}`
+      return `${baseURL}/api/public/dl/${this.shared.hash}/${this.path}`
     },
     fullLink: function () {
       return window.location.origin + this.link
     },
     humanSize: function () {
-      if (this.file.isDir) {
-        return this.file.items.length
+      if (this.shared.req.isDir) {
+        return this.shared.req.items.length
       }
 
-      return filesize(this.file.size)
+      return filesize(this.shared.req.size)
     },
     humanTime: function () {
-      return moment(this.file.modified).fromNow()
+      return moment(this.shared.req.modified).fromNow()
     },
     breadcrumbs () {
       let parts = this.path.split('/')
@@ -169,7 +162,7 @@ export default {
 
       for (let i = 0; i < parts.length; i++) {
         if (i === 0) {
-          breadcrumbs.push({ name: decodeURIComponent(parts[i]), url: '/share/' + this.hash + '/' + parts[i] + '/' })
+          breadcrumbs.push({ name: decodeURIComponent(parts[i]), url: '/share/' + this.shared.hash + '/' + parts[i] + '/' })
         } else  {
           breadcrumbs.push({ name: decodeURIComponent(parts[i]), url: breadcrumbs[i - 1].url + parts[i] + '/' })
         }
@@ -189,23 +182,25 @@ export default {
     }
   },
   methods: {
-    ...mapMutations([ 'resetSharedSelected' ]),
+    ...mapMutations([ 'resetSharedSelected', 'setSharedHash', 'updateSharedRequest', 'toggleSharedLoaded' ]),
     base64: function (name) {
       return window.btoa(unescape(encodeURIComponent(name)))
     },
     fetchData: async function () {
-      this.loaded = false
       this.notFound = false
+      this.$store.commit('toggleSharedLoaded', false)
       this.$store.commit('resetSharedSelected')
       this.$store.commit('sharedMultiple', false)
       try {
-        this.file = await api.getHash(encodeURIComponent(this.$route.params.pathMatch))
-        if (this.file.isDir) this.file.items = this.file.items.map((item, index) => {
+        let file = await api.getHash(encodeURIComponent(this.$route.params.pathMatch))
+        this.filePath = file.path
+        if (file.isDir) file.items = file.items.map((item, index) => {
           item.index = index
-          item.url = `/share/${this.hash}/${this.path}/${encodeURIComponent(item.name)}`
+          item.url = `/share/${this.shared.hash}/${this.path}/${encodeURIComponent(item.name)}`
           return item
         })
-        this.loaded = true
+        this.updateSharedRequest(file)
+        this.$store.commit('toggleSharedLoaded', true)
       } catch (e) {
         this.notFound = true
       }