v2.3.4

Author: ctf0

README.md

@@ -66,7 +66,7 @@ new Vue({
 - dynamically hide [files](https://github.com/ctf0/Laravel-Media-Manager/wiki/Hide-Files-With-Extension)
 - dynamically hide [folders](https://github.com/ctf0/Laravel-Media-Manager/wiki/Hide-Folders)
 - toggle between `random names` & `original names` for uploaded files
-- download selected ***"including bulk selection"***
+- download selected ["including bulk selection"](https://github.com/ctf0/Laravel-Media-Manager/wiki/Download-Files-as-a-ZipFile)
 - directly copy selected file link
 - use manager [from modal with ease](https://github.com/ctf0/Laravel-Media-Manager/wiki/Use-The-Manager-From-A-Modal)
 - auto scroll to selected item when using (left/up, right/down, home, end)

logs/v2.3.3.txt

@@ -0,0 +1,17 @@
+# Edits
+
+- in image preview, click the name to copy its url.
+- move upload panel bg patterns to its own branch to minimize package size.
+- more cleanup.
+- uploading new items while the manager is already uploading is now disabled, also the call to update the files list will run only once at the end of the upload to minimize the load on the server.
+
+# Bulk Select
+
+- show total selected items size
+- show folders nested items count
+- fix not being able to manually deselect last item in bulk list
+- show items size when deleting + total if more than one
+- if you want you can now download a zip file with all the selected files instead of separate ones. https://github.com/ctf0/Laravel-Media-Manager/wiki/Download-Files-as-a-ZipFile
+
+- update readme
+- update assets

logs/v2.3.4.txt

@@ -8,6 +8,7 @@ import Restriction from './mixins/restriction'
 import Utilities from './mixins/utils'
 import Watchers from './mixins/watch'
 import Computed from './mixins/computed'
+import Download from './mixins/download'
 
 import Bounty from 'vue-bounty'
 
@@ -23,6 +24,7 @@ export default {
         Restriction,
         Utilities,
         Computed,
+        Download,
         Watchers
     ],
     props: [
@@ -75,7 +77,12 @@ export default {
             new_folder_name: null,
             new_filename: null,
             active_modal: null,
-            navDirection: ''
+
+            navDirection: null,
+            gradients: [
+                'linear-gradient(45deg,#6FE594,#27A47C)',
+                'linear-gradient(45deg,#F1467A,#FB949E)'
+            ]
         }
     },
     created() {
@@ -120,6 +127,7 @@ export default {
             let counter = 0
             let progress = 0
             let increaseBy = 0
+            let last = null
 
             new Dropzone('#new-upload', {
                 createImageThumbnails: false,
@@ -140,22 +148,24 @@ export default {
                 },
                 successmultiple(files, res) {
                     res.data.map((item) => {
-                        item.success
-                            ? manager.showNotif(`${manager.trans('upload_success')} "${item.message}"`)
-                            : manager.showNotif(item.message, 'danger')
+                        if (item.success) {
+                            manager.showNotif(`${manager.trans('upload_success')} "${item.message}"`)
+                            last = item.message
+                        } else {
+                            manager.showNotif(item.message, 'danger')
+                        }
                     })
-
-                    res.data.length
-                        ? manager.getFiles(manager.folders, null, res.data[res.data.length - 1].message)
-                        : manager.getFiles(manager.folders)
                 },
                 errormultiple(files, res) {
                     manager.showNotif(res, 'danger')
                 },
                 queuecomplete() {
                     manager.uploadStart = false
-                    manager.toggleUploadPanel()
                     manager.uploadProgress = 0
+
+                    last
+                        ? manager.getFiles(manager.folders, null, last)
+                        : manager.getFiles(manager.folders)
                 }
             })
         },
@@ -221,7 +231,7 @@ export default {
 
                         // file upload
                         if (keycode(e) == 'u') {
-                            this.toggleUploadPanel()
+                            this.$refs.upload.click()
                         }
                     }
                     /* end of no bulk selection */
@@ -311,8 +321,6 @@ export default {
                 this.selectedFileIs('folder')
                     ? this.folderWarning = true
                     : this.folderWarning = false
-
-                this.$refs.confirm_delete.innerText = this.selectedFile.name
             }
 
             if (this.bulkItemsCount) {

src/resources/assets/js/components/media.vue

@@ -13,8 +13,12 @@ export default {
 
             this.bulkList.splice(this.bulkList.indexOf(file), 1)
 
-            // select prev item
-            this.selectedFile = this.bulkList[this.bulkItemsCount - 1]
+            if (this.bulkItemsCount) {
+                // select prev item
+                this.selectedFile = this.bulkList[this.bulkItemsCount - 1]
+            } else {
+                this.resetInput(['selectedFile', 'currentFileIndex'])
+            }
         },
         selectFirstInBulkList() {
             let list = this.bulkList

src/resources/assets/js/components/mixins/bulk.js

@@ -1,48 +1,83 @@
 export default {
     computed: {
+        filesList() {
+            return this.$refs.filesList.$el.children
+        },
         allFiles() {
             if (this.filteredItemsCount) {
                 return this.filterdList
             }
 
             return this.files.items
         },
-        filteredItemsCount() {
-            if (typeof this.filterdList !== 'undefined' && this.filterdList.length > 0) {
-                return this.filterdList.length
-            }
-        },
         allItemsCount() {
             if (typeof this.allFiles !== 'undefined' && this.allFiles.length > 0) {
                 return this.allFiles.length
             }
         },
-        filesList() {
-            return this.$refs.filesList.$el.children
+        filteredItemsCount() {
+            if (typeof this.filterdList !== 'undefined' && this.filterdList.length > 0) {
+                return this.filterdList.length
+            }
         },
+
+        // bulk
         bulkItemsCount() {
             if (typeof this.bulkList !== 'undefined' && this.bulkList.length > 0) {
                 return this.bulkList.length
             }
         },
-        uploadPanelImg() {
-            if (this.uploadToggle) {
-                let list = this.uploadPanelImgList
-                let url = list[Math.floor(Math.random() * list.length)]
+        bulkItemsSize() {
+            let count = 0
 
-                return {
-                    'background-image': `url("${url}")`
+            this.bulkList.map((item) => {count += item.size})
+
+            return this.getFileSize(count)
+        },
+        bulkItemsChild() {
+            let bulk = this.bulkItemsCount
+
+            if (bulk) {
+                if (bulk == 1 && !this.selectedFileIs('folder')) {
+                    return
                 }
+
+                let count = 0
+
+                this.bulkList.map((item) => {
+                    let list = item.items
+
+                    if (list) {
+                        count += list
+                    }
+                })
+
+                return count
             }
         },
-
         // this is made so we can still use move/delete
         // incase we have multiple files selected
         // and one or more of them is locked
         bulkListFilter() {
             return this.lockedList.length
                 ? this.bulkList.filter((e) => {return !this.lockedList.includes(e.path)})
                 : this.bulkList
+        },
+
+        // upload panel
+        uploadPanelImg() {
+            if (this.uploadToggle) {
+                let imgs = this.uploadPanelImgList
+                let grds = this.gradients
+
+                let url = imgs[Math.floor(Math.random() * imgs.length)]
+                let color = grds[Math.floor(Math.random() * grds.length)]
+
+                return {
+                    '--gradient': color,
+                    'background-image': `url("${url}")`
+                }
+            }
         }
     }
 }

src/resources/assets/js/components/mixins/computed.js

@@ -0,0 +1,61 @@
+// for normal download
+require('./../../vendor/download.min')
+
+// for zip download
+const JSZip = require('jszip')
+const JSZipUtils = require('jszip-utils')
+const FileSaver = require('file-saver')
+
+export default {
+    methods: {
+        // download
+        saveFile(item) {
+            if (this.isBulkSelecting()) {
+                return typeof JSZip != 'undefined'
+                    ? this.zipFiles(this.bulkList)
+                    : this.downloadFiles(this.bulkList)
+            }
+
+            this.downloadFiles([item])
+            this.showNotif(`"${item.name}" ${this.trans('downloaded')}`)
+        },
+        downloadFiles(list) {
+            list.forEach((e) => {
+                downloadFile(e.path)
+            })
+            this.showNotif('All Done')
+        },
+        zipFiles(list) {
+            let zip = new JSZip()
+            let count = 0
+
+            let folders = this.folders
+            let folder_name = folders.length
+                ? folders[folders.length - 1]
+                : 'media_manager'
+
+            list.forEach((e) => {
+                JSZipUtils.getBinaryContent(e.path, (err, data) => {
+                    if (err) {
+                        console.error(err)
+                        this.showNotif(this.trans('ajax_error'), 'danger')
+                    }
+
+                    zip.file(e.name, data, {binary:true})
+                    count++
+
+                    if (count == list.length) {
+                        zip.generateAsync({
+                            type:'blob',
+                            compression: 'DEFLATE',
+                            platform: 'UNIX'
+                        }).then((content) => {
+                            FileSaver.saveAs(content, `${folder_name}.zip`)
+                            this.showNotif(`"${folder_name}.zip" ${this.trans('downloaded')}`)
+                        })
+                    }
+                })
+            })
+        }
+    }
+}

src/resources/assets/js/components/mixins/download.js

@@ -3,9 +3,13 @@ export default {
         /*                Main                */
         getFiles(folders = '/', prev_folder = null, prev_file = null) {
 
-            this.toggleLoading()
             this.noFiles('hide')
-            this.loadingFiles('show')
+
+            if (!this.loading_files) {
+                this.toggleLoading()
+                this.loadingFiles('show')
+            }
+
             this.resetInput(['searchFor', 'sortBy', 'currentFilterName', 'selectedFile', 'currentFileIndex'])
 
             if (folders !== '/') {
@@ -78,9 +82,9 @@ export default {
                     }
 
                     setTimeout(() => {
-                        this.toggleInfo = true
                         this.toggleLoading()
                         this.loadingFiles('hide')
+                        this.toggleInfo = true
                     }, 500)
 
                     // scroll to prev selected item

src/resources/assets/js/components/mixins/form.js

@@ -1,5 +1,3 @@
-require('./../../vendor/download.min')
-
 export default {
     methods: {
         isLastItem(item, list) {
@@ -153,20 +151,6 @@ export default {
         },
 
         /*                Ops                */
-        // download
-        saveFile(item) {
-            if (this.isBulkSelecting()) {
-                this.bulkList.forEach((e) => {
-                    downloadFile(e.path)
-                })
-
-                return this.showNotif('All Done')
-            }
-
-            downloadFile(item.path)
-            return this.showNotif(`"${item.name}" ${this.trans('downloaded')}`)
-        },
-
         // copy to clipboard
         copyLink(path) {
             this.linkCopied = true

src/resources/assets/js/components/mixins/utils.js

@@ -60,6 +60,14 @@ export default {
                 })
             }
         },
+        uploadStart(val) {
+            if (val) {
+                this.toggleUploadPanel()
+                this.toggleLoading()
+                this.noFiles('hide')
+                this.loadingFiles('show')
+            }
+        },
 
         // ls
         randomNames(val) {