Fixed issue where Dragged & Dropped folder from desktop didn't start uploading

changelog.md

@@ -4,6 +4,8 @@
 - Fixed issue when after deleting user, the related subscription wasn't deleted
 - Fixed issue when you perform composer update with private repository
 - Fixed issue where change in sorting option will duplicate the content in file view
+- Fixed issue where Dragged & Dropped folder from desktop didn't start uploading
+
 ## Version 2.2.0.6
 #### Release date: 13. Jun 2022
 - Solved issue when user wasn't redirected into stripe checkout

package-lock.json

@@ -4035,6 +4035,11 @@
                 "assert-plus": "^1.0.0"
             }
         },
+        "datatransfer-files-promise": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/datatransfer-files-promise/-/datatransfer-files-promise-1.3.1.tgz",
+            "integrity": "sha512-xwh/RYaCTzUVyZr+rDKO28ew3Nbe4aP1HmEa1rNta9Uq1VNI2+ME0s1JKwsnUKXEpCWL+puGXkpJ6j+3vm/T8g=="
+        },
         "de-indent": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",

package.json

@@ -31,6 +31,7 @@
     "dependencies": {
         "@paypal/paypal-js": "^4.2.2",
         "@stripe/stripe-js": "^1.29.0",
+        "datatransfer-files-promise": "^1.3.1",
         "lodash": "^4.17.21",
         "node-sass": "^4.14.1",
         "pdfvuer": "^1.9.2",

public/mix-manifest.json

@@ -1,7 +1,7 @@
 {
     "/js/main.js": "/js/main.js",
-    "/chunks/request.js": "/chunks/request.js?id=a2cd9d852491726b",
+    "/chunks/request.js": "/chunks/request.js?id=3e30ce6a3153f3bb",
-    "/chunks/request-upload.js": "/chunks/request-upload.js?id=490153d6704438b3",
+    "/chunks/request-upload.js": "/chunks/request-upload.js?id=63c7dd97105fe29c",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=19a0784e59d768ec",
     "/chunks/status-check.js": "/chunks/status-check.js?id=d7b6d83b8c15d71c",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=e153c4e933c899fd",
@@ -9,13 +9,13 @@
     "/chunks/environment.js": "/chunks/environment.js?id=54c035b387c89b6f",
     "/chunks/app-setup.js": "/chunks/app-setup.js?id=6389439f07be022a",
     "/chunks/admin-account.js": "/chunks/admin-account.js?id=c04781f1fd5170cf",
-    "/chunks/shared.js": "/chunks/shared.js?id=2b324677f65f8002",
+    "/chunks/shared.js": "/chunks/shared.js?id=4cab7a726bac4333",
-    "/chunks/shared/browser.js": "/chunks/shared/browser.js?id=2036134c44f5c21a",
+    "/chunks/shared/browser.js": "/chunks/shared/browser.js?id=aa49572471fd6ebc",
     "/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=f03ab6659c6c1e9b",
     "/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=b0299d25bfaacea2",
     "/chunks/not-found.js": "/chunks/not-found.js?id=945e89891ea3a0c8",
     "/chunks/temporary-unavailable.js": "/chunks/temporary-unavailable.js?id=4d46688b815d1165",
-    "/chunks/admin.js": "/chunks/admin.js?id=73cab370662bae2a",
+    "/chunks/admin.js": "/chunks/admin.js?id=b27b5ca5c0345681",
     "/chunks/dashboard.js": "/chunks/dashboard.js?id=5ab55a12214433c8",
     "/chunks/invoices.js": "/chunks/invoices.js?id=799928609f57ca10",
     "/chunks/subscriptions.js": "/chunks/subscriptions.js?id=9784c1597a5d7e57",
@@ -58,18 +58,18 @@
     "/chunks/sign-up.js": "/chunks/sign-up.js?id=5ebb601c0fed5a4d",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=c1b4a00fb0061371",
     "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=3ebf7212f7c549c8",
-    "/chunks/settings.js": "/chunks/settings.js?id=6163c75d2e6f1f3c",
+    "/chunks/settings.js": "/chunks/settings.js?id=2539a10664d8c395",
     "/chunks/profile.js": "/chunks/profile.js?id=3e24bb5e1f52d4bb",
     "/chunks/settings-password.js": "/chunks/settings-password.js?id=1cf499fe8326b3c4",
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=ecfee7f7e98204f8",
     "/chunks/billing.js": "/chunks/billing.js?id=f016e8454a346fc6",
-    "/chunks/platform.js": "/chunks/platform.js?id=2d90a44386dc6c31",
+    "/chunks/platform.js": "/chunks/platform.js?id=856e4714fa59e048",
-    "/chunks/files.js": "/chunks/files.js?id=77289ebbd049d5ac",
+    "/chunks/files.js": "/chunks/files.js?id=ed32056a84ebfe7e",
-    "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=248310cdd67d62fb",
+    "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=f07642fb3979eae8",
-    "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=15fba3b663103c88",
+    "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=fe4ae4702518d194",
-    "/chunks/trash.js": "/chunks/trash.js?id=8fd377b5a83e1ff9",
+    "/chunks/trash.js": "/chunks/trash.js?id=1d72b50bf2aa7805",
-    "/chunks/team-folders.js": "/chunks/team-folders.js?id=58640d5e8a8c1900",
+    "/chunks/team-folders.js": "/chunks/team-folders.js?id=49ac1c0402b9b2f1",
-    "/chunks/shared-with-me.js": "/chunks/shared-with-me.js?id=e1cbcd3ce69f4d78",
+    "/chunks/shared-with-me.js": "/chunks/shared-with-me.js?id=68e221938e7f1188",
     "/chunks/invitation.js": "/chunks/invitation.js?id=21b5bc5ac116c97e",
     "/css/tailwind.css": "/css/tailwind.css",
     "/css/app.css": "/css/app.css"

resources/js/components/EntriesView/FileBrowser.vue

@@ -38,10 +38,11 @@
 </template>
 
 <script>
+import { getFilesFromDataTransferItems } from 'datatransfer-files-promise'
+import Spinner from '../UI/Others/Spinner'
 import ItemHandler from './ItemHandler'
 import { events } from '../../bus'
 import { mapGetters } from 'vuex'
-import Spinner from "../UI/Others/Spinner";
 import { debounce } from 'lodash'
 
 export default {
@@ -121,8 +122,19 @@ export default {
 
             // TODO: found issue on firefox
         },
-        dragFinish(data, event) {
+        async dragFinish(data, event) {
-            if (event.dataTransfer.items.length === 0) {
+
+			if (event.dataTransfer.files.length) {
+				// Check if user dropped folder with files
+				let files = await getFilesFromDataTransferItems(event.dataTransfer.items)
+
+				if (files.length !== 0 && event.dataTransfer.items.length === 0) {
+					const id = data.data.type !== 'folder' ? this.currentFolder?.data.id : data.data.id
+
+					// Upload folder with files
+					this.$uploadDraggedFolderOrFile(files, id)
+				}
+			} else {
                 // Prevent to drop on file or image
                 if (data.data.type !== 'folder' || this.draggingId === data) return
 
@@ -144,12 +156,6 @@ export default {
                         item: null,
                     })
                 }
-            } else {
-                // Get id from current folder
-                const id = data.data.type !== 'folder' ? this.currentFolder?.data.id : data.data.id
-
-                // Upload external file
-                this.$uploadDraggedFiles(event, id)
 			}
 
             this.isDragging = false

resources/js/components/RemoteUpload/RemoteUploadPopup.vue

@@ -121,8 +121,10 @@ export default {
 				.then(() => {
 					// If broadcasting is not set
 					if (!this.$store.getters.isBroadcasting) {
+						this.$store.commit('START_LOADING_VIEW')
+
 						// Reload data
-						this.$getDataByLocation()
+						this.$getDataByLocation(1)
 
 						events.$emit('toaster', {
 							type: 'success',

resources/js/helpers/functionHelpers.js

@@ -190,7 +190,38 @@ const FunctionHelpers = {
             })
 
             // Start uploading if uploading process isn't running
-            if (store.getters.filesInQueueTotal === 0) this.$handleUploading(store.getters.fileQueue[0])
+            if (store.getters.filesInQueueTotal === 0) {
+                this.$handleUploading(store.getters.fileQueue[0])
+            }
+
+            // Increase total files in upload bar
+            store.commit('INCREASE_FILES_IN_QUEUES_TOTAL', files.length)
+        }
+
+        Vue.prototype.$uploadDraggedFolderOrFile = async function (files, parent_id) {
+            files.map((file) => {
+                // Get file path
+                let filePath = file.filepath ? '/' + file.filepath : undefined
+
+                // Determine if we are uploading folder or file
+                if (filePath.split('/').length > 2) {
+                    store.commit('UPDATE_UPLOADING_FOLDER_STATE', true)
+                }
+
+                // Push file to the upload queue
+                if (file.name !== '.DS_Store') {
+                    store.commit('ADD_FILES_TO_QUEUE', {
+                        parent_id: parent_id || '',
+                        path: filePath,
+                        file: file,
+                    })
+                }
+            })
+
+            // Start uploading if uploading process isn't running
+            if (store.getters.filesInQueueTotal === 0) {
+                this.$handleUploading(store.getters.fileQueue[0])
+            }
 
             // Increase total files in upload bar
             store.commit('INCREASE_FILES_IN_QUEUES_TOTAL', files.length)
@@ -208,7 +239,7 @@ const FunctionHelpers = {
             if (event.dataTransfer.items.length === 0) return // Push items to file queue
             ;[...event.dataTransfer.items].map((item) => {
                 store.commit('ADD_FILES_TO_QUEUE', {
-                    parent_id: parent_id ? parent_id : '',
+                    parent_id: parent_id || '',
                     file: item.getAsFile(),
                 })
             })

resources/js/store/modules/fileFunctions.js

@@ -216,8 +216,10 @@ const actions = {
 
                             // Reload File data after folder uploading is finished
                             if (getters.isUploadingFolder) {
-                                // Reload files after upload is done
+                                commit('START_LOADING_VIEW')
-                                Vue.prototype.$getDataByLocation()
+
+                                // Reload files after folder upload is done
+                                Vue.prototype.$getDataByLocation(1)
 
                                 // Reload folder tree
                                 dispatch('getFolderTree')

resources/js/views/Platform.vue

@@ -56,6 +56,7 @@
 </template>
 
 <script>
+import { getFilesFromDataTransferItems } from 'datatransfer-files-promise'
 import FileSortingMobile from '../components/Menus/FileSortingMobile'
 import SidebarNavigation from '../components/Sidebar/SidebarNavigation'
 import FileFilterMobile from '../components/Menus/FileFilterMobile'
@@ -118,8 +119,14 @@ export default {
         }
     },
     methods: {
-		uploadDroppedItems(event) {
+		async uploadDroppedItems(event) {
-			this.$uploadDraggedFiles(event, this.currentFolder?.data.id)
+			// Check if user dropped folder with files
+			let files = await getFilesFromDataTransferItems(event.dataTransfer.items)
+
+			if (files.length !== 0) {
+				// Upload folder with files
+				this.$uploadDraggedFolderOrFile(files, this.currentFolder?.data.id)
+			}
 		},
         contextMenu(event, item) {
             events.$emit('context-menu:show', event, item)

resources/js/views/Shared.vue

@@ -64,6 +64,7 @@ import { mapGetters } from 'vuex'
 import { events } from '../bus'
 import DesktopSharepageToolbar from '../components/Layout/Toolbars/DesktopSharepageToolbar'
 import RemoteUploadPopup from "../components/RemoteUpload/RemoteUploadPopup";
+import {getFilesFromDataTransferItems} from "datatransfer-files-promise";
 
 export default {
     name: 'Shared',
@@ -95,8 +96,14 @@ export default {
         }
     },
     methods: {
-		uploadDroppedItems(event) {
+		async uploadDroppedItems(event) {
-			this.$uploadDraggedFiles(event, this.currentFolder?.data.id)
+			// Check if user dropped folder with files
+			let files = await getFilesFromDataTransferItems(event.dataTransfer.items)
+
+			if (files.length !== 0) {
+				// Upload folder with files
+				this.$uploadDraggedFolderOrFile(files, this.currentFolder?.data.id)
+			}
 		},
         contextMenu(event, item) {
             events.$emit('context-menu:show', event, item)

resources/js/views/UploadRequest.vue

@@ -56,6 +56,7 @@ import DragUI from '../components/UI/Others/DragUI'
 import { mapGetters } from 'vuex'
 import { events } from '../bus'
 import RemoteUploadPopup from "../components/RemoteUpload/RemoteUploadPopup";
+import {getFilesFromDataTransferItems} from "datatransfer-files-promise";
 
 export default {
     name: 'UploadRequest',
@@ -87,8 +88,14 @@ export default {
         }
     },
     methods: {
-		uploadDroppedItems(event) {
+		async uploadDroppedItems(event) {
-			this.$uploadDraggedFiles(event, this.currentFolder?.data.id)
+			// Check if user dropped folder with files
+			let files = await getFilesFromDataTransferItems(event.dataTransfer.items)
+
+			if (files.length !== 0) {
+				// Upload folder with files
+				this.$uploadDraggedFolderOrFile(files, this.currentFolder?.data.id)
+			}
 		},
         contextMenu(event, item) {
             events.$emit('context-menu:show', event, item)