- uploading fix

resources/js/App.vue

@@ -110,7 +110,7 @@ export default {
     },
     computed: {
         ...mapGetters([
-            'isLogged', 'isGuest', 'config', 'filesQueue'
+            'isLogged', 'isGuest', 'config', 'fileQueue'
         ]),
         isGuestLayout() {
             return (includes([
@@ -139,11 +139,6 @@ export default {
             )
         }
     },
-    watch: {
-        filesQueue() {
-            //this.$handleUploading()
-        }
-    },
     data() {
         return {
             isScaledDown: false

resources/js/components/FilesView/FileBrowser.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="file-content" id="file-content-id" :class="{ 'is-offset': filesQueue > 0, 'is-dragging': isDragging }"
+    <div class="file-content" id="file-content-id" :class="{ 'is-offset': filesInQueueTotal > 0, 'is-dragging': isDragging }"
          @dragover.prevent
          @drop.stop.prevent="dropUpload($event)"
          @dragover="dragEnter"
@@ -119,7 +119,7 @@
         },
         computed: {
             ...mapGetters([
-                'filesQueue',
+                'filesInQueueTotal',
                 'fileInfoVisible',
                 'fileInfoDetail',
                 'currentFolder',

resources/js/components/FilesView/UploadProgress.vue

@@ -1,7 +1,6 @@
 <template>
     <transition name="info-panel">
-        <!--<div v-if="filesQueue.length > 0" class="upload-progress">-->
-        <div class="upload-progress">
+        <div v-if="fileQueue.length > 0" class="upload-progress">
             <div class="progress-title">
 
                 <!--Is processing-->
@@ -10,14 +9,9 @@
                     {{ $t('uploading.processing_file') }}
                 </span>
 
-                <!--Single file upload-->
-				<span v-if="!isProcessingFile && filesQueue.length === 1">
-                    {{ $t('uploading.progress_single_upload', {progress: uploadingProgress}) }}
-                </span>
-
                 <!--Multi file upload-->
-				<span v-if="!isProcessingFile && filesQueue.length > 1">
-                    {{ $t('uploading.progress', {current:'x', total: filesQueue.length, progress: uploadingProgress}) }}
+				<span v-if="!isProcessingFile && fileQueue.length > 0">
+                    {{ $t('uploading.progress', {current:filesInQueueUploaded, total: filesInQueueTotal, progress: uploadingProgress}) }}
                 </span>
             </div>
             <div class="progress-wrapper">
@@ -45,9 +39,11 @@
         },
         computed: {
             ...mapGetters([
+                'filesInQueueUploaded',
+                'filesInQueueTotal',
                 'uploadingProgress',
                 'isProcessingFile',
-                'filesQueue',
+                'fileQueue',
             ])
         },
         methods: {

resources/js/helpers.js

@@ -78,11 +78,24 @@ const Helpers = {
 
         Vue.prototype.$uploadFiles = async function (files) {
 
-            if (files.length == 0) return
+           if (files.length == 0) return
 
            if (!this.$checkFileMimetype(files) || !this.$checkUploadLimit(files)) return
-           
-            this.$handleUploading(files, undefined)
+
+			// Push items to file queue
+			[...files].map(item => {
+				this.$store.commit('ADD_FILES_TO_QUEUE', {
+					parent_id: store.getters.currentFolder.unique_id,
+					file: item,
+				})
+			});
+
+			// Start uploading if uploading process isn't running
+			if (this.$store.getters.filesInQueueTotal == 0)
+				this.$handleUploading(store.getters.fileQueue[0])
+
+			// Increase total files in upload bar
+			this.$store.commit('INCREASE_FILES_IN_QUEUES_TOTAL', files.length)
         }
 
         Vue.prototype.$uploadExternalFiles = async function (event, parent_id) {
@@ -90,7 +103,7 @@ const Helpers = {
             // Prevent submit empty files
             if (event.dataTransfer.items.length === 0) return
 
-            // Push files to queue
+			// Push items to file queue
             [...event.dataTransfer.items].map(item => {
 				this.$store.commit('ADD_FILES_TO_QUEUE', {
 					parent_id: parent_id,
@@ -98,17 +111,18 @@ const Helpers = {
 				})
 			});
 
-            if (! this.$store.getters.uploadingProgress > 0) {
-				this.$handleUploading(
-					this.$store.getters.filesQueue.shift()
-				)
-			}
+            // Start uploading if uploading process isn't running
+            if (this.$store.getters.filesInQueueTotal == 0)
+				this.$handleUploading(this.$store.getters.fileQueue[0])
+
+			// Increase total files in upload bar
+			this.$store.commit('INCREASE_FILES_IN_QUEUES_TOTAL', [...event.dataTransfer.items].length)
         }
 
 		Vue.prototype.$handleUploading = async function (item) {
 
 			// Create ceil
-			let size = 128000000, // todo: chunksize doriesit
+			let size = store.getters.config.chunkSize,
 				chunksCeil = Math.ceil(item.file.size / size),
 				chunks = []
 

resources/js/store/modules/fileFunctions.js

@@ -8,7 +8,9 @@ import store from '../index'
 
 const defaultState = {
 	processingPopup: undefined,
-	filesQueue: [],
+	fileQueue: [],
+	filesInQueueTotal: 0,
+	filesInQueueUploaded: 0,
 
 	isProcessingFile: false,
 	uploadingProgress: 0
@@ -199,6 +201,9 @@ const actions = {
 
 					commit('PROCESSING_FILE', false)
 
+					// Remove first file from file queue
+					commit('SHIFT_FROM_FILE_QUEUE')
+
 					// Check if user is in uploading folder, if yes, than show new file
 					if (response.data.folder_id == getters.currentFolder.unique_id) {
 
@@ -207,15 +212,20 @@ const actions = {
 
 						// Reset file progress
 						commit('UPLOADING_FILE_PROGRESS', 0)
+
+						// Increase count in files in queue uploaded for 1
+						commit('INCREASE_FILES_IN_QUEUE_UPLOADED')
 					}
 
-					// TODO: handle new uploads if exist
-					if (getters.filesQueue.length > 0) {
-						Vue.prototype.$handleUploading(getters.filesQueue[0])
-						commit('SHIFT_FILE_FROM_QUEUE')
-						// todo: doriesit uploading ffile statistiky na frontende
+					// Start uploading next file if file queue is not empty
+					if (getters.fileQueue.length) {
+						Vue.prototype.$handleUploading(getters.fileQueue[0])
 					}
 
+					// Reset upload process
+					if (! getters.fileQueue.length)
+						commit('CLEAR_UPLOAD_PROGRESS')
+
 				})
 				.catch(error => {
 					reject(error)
@@ -242,7 +252,7 @@ const actions = {
 					})
 
 					commit('PROCESSING_FILE', false)
-					commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
+					commit('CLEAR_UPLOAD_PROGRESS')
 				})
 
 			// Cancel the upload request
@@ -251,7 +261,7 @@ const actions = {
 
 				// Hide upload progress bar
 				commit('PROCESSING_FILE', false)
-				commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
+				commit('CLEAR_UPLOAD_PROGRESS')
 			})
 		})
 	},
@@ -392,24 +402,37 @@ const mutations = {
 		state.processingPopup = status
 	},
 	ADD_FILES_TO_QUEUE(state, file) {
-		state.filesQueue.push(file)
+		state.fileQueue.push(file)
 	},
-	SHIFT_FILE_FROM_QUEUE(state) {
-		state.filesQueue.shift()
+	SHIFT_FROM_FILE_QUEUE(state) {
+		state.fileQueue.shift()
 	},
 	PROCESSING_FILE(state, status) {
 		state.isProcessingFile = status
 	},
 	UPLOADING_FILE_PROGRESS(state, percentage) {
 		state.uploadingProgress = percentage
+	},
+	INCREASE_FILES_IN_QUEUES_TOTAL(state, count) {
+		state.filesInQueueTotal += count
+	},
+	INCREASE_FILES_IN_QUEUE_UPLOADED(state) {
+		state.filesInQueueUploaded++
+	},
+	CLEAR_UPLOAD_PROGRESS(state) {
+		state.filesInQueueUploaded = 0
+		state.filesInQueueTotal = 0
+		state.fileQueue = []
 	}
 }
 
 const getters = {
+	filesInQueueUploaded: state => state.filesInQueueUploaded,
+	filesInQueueTotal: state => state.filesInQueueTotal,
 	uploadingProgress: state => state.uploadingProgress,
 	isProcessingFile: state => state.isProcessingFile,
 	processingPopup: state => state.processingPopup,
-	filesQueue: state => state.filesQueue
+	fileQueue: state => state.fileQueue
 }
 
 export default {