chunk upload and multipart upload beta.1

resources/js/components/FilesView/FileBrowser.vue

@@ -238,6 +238,7 @@
         flex: 0 0 100%;
         @include transition(150ms);
         position: relative;
+        scroll-behavior: smooth;
 
         &.is-fileinfo-visible {
             flex: 0 1 100%;

resources/js/components/FilesView/UploadProgress.vue

@@ -2,24 +2,39 @@
     <transition name="info-panel">
         <div v-if="uploadingFilesCount" class="upload-progress">
             <div class="progress-title">
-				<span>{{ $t('uploading.progress', {current:uploadingFilesCount.current, total: uploadingFilesCount.total, progress: uploadingFileProgress}) }}</span>
+				<span v-if="isProcessingFile">
+                    <refresh-cw-icon size="12" class="sync-alt"></refresh-cw-icon>
+                    {{ $t('uploading.processing_file') }}
+                </span>
+				<span v-if="!isProcessingFile && uploadingFilesCount.total === 1">
+                    {{ $t('uploading.progress_single_upload', {progress: uploadingFileProgress}) }}
+                </span>
+				<span v-if="!isProcessingFile && uploadingFilesCount.total > 1">
+                    {{ $t('uploading.progress', {current:uploadingFilesCount.current, total: uploadingFilesCount.total, progress: uploadingFileProgress}) }}
+                </span>
             </div>
-            <ProgressBar :progress="uploadingFileProgress"/>
+            <ProgressBar :progress="uploadingFileProgress" />
         </div>
     </transition>
 </template>
 
 <script>
     import ProgressBar from '@/components/FilesView/ProgressBar'
+    import { RefreshCwIcon } from 'vue-feather-icons'
     import {mapGetters} from 'vuex'
 
     export default {
         name: 'UploadProgress',
         components: {
+            RefreshCwIcon,
             ProgressBar,
         },
         computed: {
-            ...mapGetters(['uploadingFileProgress', 'uploadingFilesCount'])
+            ...mapGetters([
+                'uploadingFileProgress',
+                'uploadingFilesCount',
+                'isProcessingFile',
+            ])
         }
     }
 </script>
@@ -28,6 +43,24 @@
     @import '@assets/vue-file-manager/_variables';
     @import '@assets/vue-file-manager/_mixins';
 
+    .sync-alt {
+        animation: spin 1s linear infinite;
+        margin-right: 5px;
+
+        polyline, path {
+            stroke: $theme;
+        }
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
     .info-panel-enter-active,
     .info-panel-leave-active {
         transition: all 0.3s ease;

resources/js/helpers.js

@@ -73,28 +73,31 @@ const Helpers = {
             this.$store.dispatch('createFolder', folderName)
         }
 
-        Vue.prototype.$uploadFiles = async function (files) {
-            // Prevent submit empty files
-            if (files && files.length == 0) return
+        Vue.prototype.$handleUploading = async function (files, parent_id) {
 
-            let fileCount = files ? files.length : 0
-            let fileCountSucceed = 1
+            let fileBuffer = []
 
+            // Append the file list to fileBuffer array
+            Array.prototype.push.apply(fileBuffer, files);
+
+            let fileSucceed = 0
+
+            // Update files count in progressbar
             store.commit('UPDATE_FILE_COUNT_PROGRESS', {
-                current: fileCountSucceed,
-                total: fileCount
+                current: fileSucceed,
+                total: files.length
             })
 
+            // Reset upload progress to 0
             store.commit('UPLOADING_FILE_PROGRESS', 0)
 
             // Get parent id
-            const rootFolder = this.$store.getters.currentFolder
-                ? this.$store.getters.currentFolder.unique_id
-                : 0
+            let parentFolder = this.$store.getters.currentFolder ? this.$store.getters.currentFolder.unique_id : 0
+            let rootFolder = parent_id ? parent_id : parentFolder
 
-            for (var i = files.length - 1; i >= 0; i--) {
-
-                let file = files[i],
+            // Upload files
+            do {
+                let file = fileBuffer.shift(),
                     chunks = []
 
                 // Calculate ceils
@@ -108,21 +111,23 @@ const Helpers = {
                     ));
                 }
 
-                // Set form Data
-                let formData = new FormData()
-                let uploadedSize = 0
+                // Set Data
+                let formData = new FormData(),
+                    uploadedSize = 0,
+                    isNotGeneralError = true
 
                 do {
-                    let isLast = chunks.length === 1
-                    let chunk = chunks.shift()
-                    let attempts = 0
+                    let isLast = chunks.length === 1,
+                        chunk = chunks.shift(),
+                        attempts = 0,
+                        filename = Array(16).fill(0).map(x => Math.random().toString(36).charAt(2)).join('') + '-' + file.name + '.part'
 
                     // Set form data
-                    formData.set('is_last', isLast);
-                    formData.set('file', chunk, `${file.name}.part`);
+                    formData.set('file', chunk, filename);
                     formData.set('parent_id', rootFolder)
+                    formData.set('is_last', isLast);
 
-                    // Upload data
+                    // Upload chunks
                     do {
                         await store.dispatch('uploadFiles', {
                             form: formData,
@@ -130,35 +135,39 @@ const Helpers = {
                             totalUploadedSize: uploadedSize
                         }).then(() => {
                             uploadedSize = uploadedSize + chunk.size
-                        }).catch(() => {
+                        }).catch((error) => {
 
+                            // Count attempts
                             attempts++
 
-                            if (attempts === 3) {
-                                events.$emit('alert:open', {
-                                    title: this.$t('popup_error.title'),
-                                    message: this.$t('popup_error.message'),
-                                })
-                            }
-                        })
-                    } while (attempts !== 0 && attempts !== 3)
+                            // Break uploading proccess
+                            if (error.response.status === 500)
+                                isNotGeneralError = false
 
-                } while (chunks.length !== 0)
+                            // Show Error
+                            if (attempts === 3)
+                                this.$isSomethingWrong()
+                        })
+                    } while (isNotGeneralError && attempts !== 0 && attempts !== 3)
+
+                } while (isNotGeneralError && chunks.length !== 0)
+
+                fileSucceed++
 
                 // Progress file log
                 store.commit('UPDATE_FILE_COUNT_PROGRESS', {
-                    current: fileCountSucceed,
-                    total: fileCount
+                    current: fileSucceed,
+                    total: files.length
                 })
 
-                // Uploading finished
-                if (fileCount === fileCountSucceed) {
-                    store.commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
-                } else {
-                    // Add uploaded file
-                    fileCountSucceed++
-                }
-            }
+            } while (fileBuffer.length !== 0)
+
+            store.commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
+        }
+
+        Vue.prototype.$uploadFiles = async function (files) {
+
+            this.$handleUploading(files, undefined)
         }
 
         Vue.prototype.$uploadExternalFiles = async function (event, parent_id) {
@@ -167,44 +176,9 @@ const Helpers = {
             if (event.dataTransfer.items.length == 0) return
 
             // Get files
-            const files = [...event.dataTransfer.items].map(item => item.getAsFile());
+            let files = [...event.dataTransfer.items].map(item => item.getAsFile());
 
-            let fileCountSucceed = 1
-
-            store.commit('UPDATE_FILE_COUNT_PROGRESS', {
-                current: fileCountSucceed,
-                total: files.length
-            })
-
-            for (var i = files.length - 1; i >= 0; i--) {
-
-                let formData = new FormData()
-
-                // Append data
-                formData.append('file', files[i])
-
-                // Append form data
-                formData.append('parent_id', parent_id)
-
-                // Upload data
-                await store.dispatch('uploadFiles', formData).then(() => {
-                    // Progress file log
-                    store.commit('UPDATE_FILE_COUNT_PROGRESS', {
-                        current: fileCountSucceed,
-                        total: files.length
-                    })
-                    // Progress file log
-                    store.commit('INCREASE_FOLDER_ITEM', parent_id)
-
-                    // Uploading finished
-                    if (files.length === fileCountSucceed) {
-                        store.commit('UPDATE_FILE_COUNT_PROGRESS', undefined)
-                    } else {
-                        // Add uploaded file
-                        fileCountSucceed++
-                    }
-                })
-            }
+            this.$handleUploading(files, parent_id)
         }
 
         Vue.prototype.$downloadFile = function (url, filename) {

resources/js/i18n/lang/cn.json

@@ -680,7 +680,9 @@
 		"href": "Please confirm your payment."
 	},
 	"uploading": {
-		"progress": "上传文件 {current}/{total}"
+		"processing_file": "Processing File...",
+		"progress_single_upload": "上传文件 {progress}%",
+		"progress": "上传文件 {progress}% - {current}/{total}"
 	},
 	"user_add_card": {
 		"default_description": "",

resources/js/i18n/lang/en.json

@@ -680,6 +680,8 @@
 		"href": "Please confirm your payment."
 	},
 	"uploading": {
+		"processing_file": "Processing File...",
+		"progress_single_upload": "Uploading File {progress}%",
 		"progress": "Uploading File {progress}% - {current}/{total}"
 	},
 	"user_add_card": {

resources/js/i18n/lang/sk.json

@@ -680,7 +680,9 @@
 		"href": "Prosím potvrďte Vašu platbu."
 	},
 	"uploading": {
-		"progress": "Nahrávam súbory {current}/{total}"
+		"processing_file": "Spracuvávam súbor...",
+		"progress_single_upload": "Nahrávam súbor {progress}%",
+		"progress": "Nahrávam súbory {progress}% - {current}/{total}"
 	},
 	"user_add_card": {
 		"default_description": "Vaša karta bude uložená a použitá pre platbu ako prvá.",

resources/js/store/modules/fileBrowser.js

@@ -8,6 +8,7 @@ const defaultState = {
     fileInfoDetail: undefined,
     currentFolder: undefined,
     uploadingFileProgress: 0,
+    isProcessingFile: false,
     navigation: undefined,
     isSearching: false,
     browseHistory: [],
@@ -285,11 +286,15 @@ const mutations = {
     STORE_CURRENT_FOLDER(state, folder) {
         state.currentFolder = folder
     },
+    PROCESSING_FILE(state, status) {
+        state.isProcessingFile = status
+    }
 }
 
 const getters = {
     uploadingFileProgress: state => state.uploadingFileProgress,
     uploadingFilesCount: state => state.uploadingFilesCount,
+    isProcessingFile: state => state.isProcessingFile,
     fileInfoDetail: state => state.fileInfoDetail,
     currentFolder: state => state.currentFolder,
     browseHistory: state => state.browseHistory,

resources/js/store/modules/fileFunctions.js

@@ -42,6 +42,8 @@ const actions = {
             .then(response => {
                 commit('ADD_NEW_FOLDER', response.data)
 
+                events.$emit('scrollTop')
+
                 if ( getters.currentFolder.location !== 'public' ) {
                     dispatch('getAppData')
                 }
@@ -87,14 +89,17 @@ const actions = {
                     },
                     onUploadProgress: event => {
 
-                        let loaded = totalUploadedSize + event.loaded
+                        var percentCompleted = Math.floor(((totalUploadedSize + event.loaded) / fileSize) * 100)
 
-                        var percentCompleted = Math.floor((loaded * 100) / fileSize)
+                        commit('UPLOADING_FILE_PROGRESS', percentCompleted >= 100 ? 100 : percentCompleted)
 
-                        commit('UPLOADING_FILE_PROGRESS', percentCompleted)
+                        if (percentCompleted >= 100) {
+                            commit('PROCESSING_FILE', true)
+                        }
                     }
                 })
                 .then(response => {
+                    commit('PROCESSING_FILE', false)
 
                     // Check if user is in uploading folder, if yes, than show new file
                     if (response.data.folder_id == getters.currentFolder.unique_id)
@@ -103,6 +108,8 @@ const actions = {
                     resolve(response)
                 })
                 .catch(error => {
+                    commit('PROCESSING_FILE', false)
+
                     reject(error)
 
                     switch (error.response.status) {