nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-05 18:23:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Čarodej
2022-06-23 11:44:23 +02:00
parent 0485672a47
commit e412f3b88b
11 changed files with 104 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
resources/js/components/EntriesView/FileBrowser.vue
View File

@@ -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) {
if (event.dataTransfer.items.length === 0) {
async dragFinish(data, event) {
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,13 +156,7 @@ 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
},

4
resources/js/components/RemoteUpload/RemoteUploadPopup.vue
View File

@@ -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',

35
resources/js/helpers/functionHelpers.js vendored
View File

@@ -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(),
})
})

6
resources/js/store/modules/fileFunctions.js vendored
View File

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

11
resources/js/views/Platform.vue
View File

@@ -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) {
this.$uploadDraggedFiles(event, this.currentFolder?.data.id)
async uploadDroppedItems(event) {
// 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)

11
resources/js/views/Shared.vue
View File

@@ -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) {
this.$uploadDraggedFiles(event, this.currentFolder?.data.id)
async uploadDroppedItems(event) {
// 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)

11
resources/js/views/UploadRequest.vue
View File

@@ -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) {
this.$uploadDraggedFiles(event, this.currentFolder?.data.id)
async uploadDroppedItems(event) {
// 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)