diff --git a/public/mix-manifest.json b/public/mix-manifest.json index c6356717..11375e83 100644 --- a/public/mix-manifest.json +++ b/public/mix-manifest.json @@ -238,7 +238,7 @@ "/js/main.9efef46a124f1f10205b.hot-update.js": "/js/main.9efef46a124f1f10205b.hot-update.js", "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.js?id=312acc0ff7daa010eea5", "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js?id=e285e842f58178d681c4", - "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=45fda8f6cfee1ae1289f", + "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=b0d373762dad7e5a5cd8", "/chunks/trash.9efef46a124f1f10205b.hot-update.js": "/chunks/trash.9efef46a124f1f10205b.hot-update.js", "/js/main.21d38cf664bf36a3218d.hot-update.js": "/js/main.21d38cf664bf36a3218d.hot-update.js", "/js/main.c0bd185ce5cf6d0f42fe.hot-update.js": "/js/main.c0bd185ce5cf6d0f42fe.hot-update.js", @@ -376,5 +376,45 @@ "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.4e4f285fde330b6b2e84.hot-update.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.4e4f285fde330b6b2e84.hot-update.js", "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.2f298e484efb4f71881b.hot-update.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.2f298e484efb4f71881b.hot-update.js", "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.327ed92ac0a93c729277.hot-update.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.327ed92ac0a93c729277.hot-update.js", - "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.cfbff61e7d8187da97fe.hot-update.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.cfbff61e7d8187da97fe.hot-update.js" + "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.cfbff61e7d8187da97fe.hot-update.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.cfbff61e7d8187da97fe.hot-update.js", + "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.063c9d809091d3b03b45.hot-update.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.063c9d809091d3b03b45.hot-update.js", + "/js/main.2af15268139f3d5d425f.hot-update.js": "/js/main.2af15268139f3d5d425f.hot-update.js", + "/js/main.db1864c7590a00714661.hot-update.js": "/js/main.db1864c7590a00714661.hot-update.js", + "/js/main.f5f7470d0670c89820e3.hot-update.js": "/js/main.f5f7470d0670c89820e3.hot-update.js", + "/js/main.83046dba7c63ca517003.hot-update.js": "/js/main.83046dba7c63ca517003.hot-update.js", + "/js/main.345da81b6c99a3b79210.hot-update.js": "/js/main.345da81b6c99a3b79210.hot-update.js", + "/js/main.a92f6480bbfdb6e900db.hot-update.js": "/js/main.a92f6480bbfdb6e900db.hot-update.js", + "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.cd0ef3ed334a58702ae6.hot-update.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.cd0ef3ed334a58702ae6.hot-update.js", + "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.b3861f85fbbfb6f55cea.hot-update.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.b3861f85fbbfb6f55cea.hot-update.js", + "/js/main.13edb39bd81dba07a0ad.hot-update.js": "/js/main.13edb39bd81dba07a0ad.hot-update.js", + "/js/main.48cf14ab14d33c1ec24d.hot-update.js": "/js/main.48cf14ab14d33c1ec24d.hot-update.js", + "/js/main.31c63042f789a579a8fa.hot-update.js": "/js/main.31c63042f789a579a8fa.hot-update.js", + "/js/main.2a2a1e169611a088aa15.hot-update.js": "/js/main.2a2a1e169611a088aa15.hot-update.js", + "/js/main.b01f1175c75a766502ee.hot-update.js": "/js/main.b01f1175c75a766502ee.hot-update.js", + "/js/main.6a640aac55404f4a2da4.hot-update.js": "/js/main.6a640aac55404f4a2da4.hot-update.js", + "/js/main.efc9f431508297a1a7e0.hot-update.js": "/js/main.efc9f431508297a1a7e0.hot-update.js", + "/chunks/files~chunks/shared-files~chunks/shared-page.b9e1ee112eb86b424eb8.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.b9e1ee112eb86b424eb8.hot-update.js", + "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.14021c0c526b3d22ac47.hot-update.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.14021c0c526b3d22ac47.hot-update.js", + "/chunks/files~chunks/shared-files~chunks/shared-page.673ddbb6cc962608a577.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.673ddbb6cc962608a577.hot-update.js", + "/chunks/files~chunks/shared-files~chunks/shared-page.762c5199de568ddbc51c.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.762c5199de568ddbc51c.hot-update.js", + "/chunks/files~chunks/shared-files~chunks/shared-page.010685490b34aa7511d2.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.010685490b34aa7511d2.hot-update.js", + "/chunks/files~chunks/shared-files~chunks/shared-page.14b091496fe713067a26.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.14b091496fe713067a26.hot-update.js", + "/chunks/files~chunks/shared-files~chunks/shared-page.730f25c6b4c3573f5aae.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.730f25c6b4c3573f5aae.hot-update.js", + "/chunks/files~chunks/shared-files~chunks/shared-page.1150dfef325f8a1712b2.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.1150dfef325f8a1712b2.hot-update.js", + "/chunks/files~chunks/shared-files~chunks/shared-page.c2e90702d176aa4e5fc3.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.c2e90702d176aa4e5fc3.hot-update.js", + "/chunks/files~chunks/shared-files~chunks/shared-page.6ba206a8eba893de2c2e.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.6ba206a8eba893de2c2e.hot-update.js", + "/chunks/files~chunks/shared-files~chunks/shared-page.2978dd05123b6b997585.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.2978dd05123b6b997585.hot-update.js", + "/chunks/files~chunks/shared-files~chunks/shared-page.39e3a50f8b68ae76af6a.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.39e3a50f8b68ae76af6a.hot-update.js", + "/chunks/files~chunks/shared-files~chunks/shared-page.85f73134067faaf88a09.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.85f73134067faaf88a09.hot-update.js", + "/chunks/files~chunks/shared-files~chunks/shared-page.0934bc224d82cedee342.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.0934bc224d82cedee342.hot-update.js", + "/js/main.65f3d231619d974c1c58.hot-update.js": "/js/main.65f3d231619d974c1c58.hot-update.js", + "/js/main.743fc37782fbc6a41fee.hot-update.js": "/js/main.743fc37782fbc6a41fee.hot-update.js", + "/chunks/files~chunks/shared-files~chunks/shared-page.07df1e15d744d9098d9a.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.07df1e15d744d9098d9a.hot-update.js", + "/chunks/files~chunks/shared-files~chunks/shared-page.4063b94b73194d4c79c5.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.4063b94b73194d4c79c5.hot-update.js", + "/chunks/files~chunks/shared-files~chunks/shared-page.ff2ba845e5569e90d21a.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.ff2ba845e5569e90d21a.hot-update.js", + "/chunks/files~chunks/shared-files~chunks/shared-page.24116956c947ca91e9b3.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.24116956c947ca91e9b3.hot-update.js", + "/chunks/files~chunks/shared-files~chunks/shared-page.fe9b991e1ab48bde8d57.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.fe9b991e1ab48bde8d57.hot-update.js", + "/chunks/files~chunks/shared-files~chunks/shared-page.e7d96bedcda24ff8514b.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.e7d96bedcda24ff8514b.hot-update.js", + "/js/main.ca7473ea28decc85cc35.hot-update.js": "/js/main.ca7473ea28decc85cc35.hot-update.js", + "/chunks/files~chunks/shared-files~chunks/shared-page.32ad32f00c2b1b602349.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.32ad32f00c2b1b602349.hot-update.js" } diff --git a/resources/js/components/FilesView/UploadProgress.vue b/resources/js/components/FilesView/UploadProgress.vue index 07ea0c48..76134eb1 100644 --- a/resources/js/components/FilesView/UploadProgress.vue +++ b/resources/js/components/FilesView/UploadProgress.vue @@ -13,21 +13,28 @@ {{ $t('uploading.progress', {current:uploadingFilesCount.current, total: uploadingFilesCount.total, progress: uploadingFileProgress}) }} - +
+ + + + +
@@ -78,6 +90,22 @@ position: relative; z-index: 1; + .progress-wrapper { + display: flex; + + .cancel-icon { + cursor: pointer; + padding: 0 13px; + + &:hover { + + line { + stroke: $theme; + } + } + } + } + .progress-title { font-weight: 700; text-align: center; @@ -88,6 +116,16 @@ } } + @media only screen and (max-width: 690px) { + + .upload-progress { + + .progress-wrapper .cancel-icon { + padding: 0 9px; + } + } + } + @media (prefers-color-scheme: dark) { .progress-bar { background: $dark_mode_foreground; diff --git a/resources/js/i18n/lang/en.json b/resources/js/i18n/lang/en.json index 3c4320e0..982a5995 100644 --- a/resources/js/i18n/lang/en.json +++ b/resources/js/i18n/lang/en.json @@ -720,6 +720,7 @@ "href": "Please confirm your payment." }, "uploading": { + "cancel": "Cancel Uploading", "processing_file": "Processing File...", "progress_single_upload": "Uploading File {progress}%", "progress": "Uploading File {progress}% - {current}/{total}" diff --git a/resources/js/store/modules/fileFunctions.js b/resources/js/store/modules/fileFunctions.js index a1f8a873..a5aac190 100644 --- a/resources/js/store/modules/fileFunctions.js +++ b/resources/js/store/modules/fileFunctions.js @@ -111,8 +111,13 @@ const actions = { ? '/api/upload/public/' + router.currentRoute.params.token : '/api/upload' + // Create cancel token for axios cancelation + const CancelToken = axios.CancelToken; + const source = CancelToken.source(); + axios .post(route, form, { + cancelToken: source.token, headers: { 'Content-Type': 'application/octet-stream' }, @@ -174,6 +179,15 @@ const actions = { // Reset uploader commit('UPDATE_FILE_COUNT_PROGRESS', undefined) }) + + // Cancel the upload request + events.$on('cancel-upload', () => { + source.cancel(); + + // Hide upload progress bar + commit('PROCESSING_FILE', false) + commit('UPDATE_FILE_COUNT_PROGRESS', undefined) + }) }) }, restoreItem: ({commit, getters}, item) => {