nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-05-14 09:15:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

Ability to cancel uploading progress via x button

Browse Source
This commit is contained in:
Peter Papp
2020-11-22 09:42:44 +01:00
parent 4e5afa4747
commit 16ab540298
4 changed files with 97 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/mix-manifest.json
+42 -2
View File
@@ -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"
}
resources/js/components/FilesView/UploadProgress.vue
+40 -2
View File
@@ -13,21 +13,28 @@
{{ $t('uploading.progress', {current:uploadingFilesCount.current, total: uploadingFilesCount.total, progress: uploadingFileProgress}) }}
</span>
</div>
<ProgressBar :progress="uploadingFileProgress" />
<div class="progress-wrapper">
<ProgressBar :progress="uploadingFileProgress" />
<span @click="cancelUpload" :title="$t('uploading.cancel')" class="cancel-icon">
<x-icon size="16" @click="cancelUpload"></x-icon>
</span>
</div>
</div>
</transition>
</template>
<script>
import ProgressBar from '@/components/FilesView/ProgressBar'
import { RefreshCwIcon } from 'vue-feather-icons'
import { RefreshCwIcon, XIcon } from 'vue-feather-icons'
import {mapGetters} from 'vuex'
import {events} from '@/bus'
export default {
name: 'UploadProgress',
components: {
RefreshCwIcon,
ProgressBar,
XIcon,
},
computed: {
...mapGetters([
@@ -35,6 +42,11 @@
'uploadingFilesCount',
'isProcessingFile',
])
},
methods: {
cancelUpload() {
events.$emit('cancel-upload')
}
}
}
</script>
@@ -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;
resources/js/i18n/lang/en.json
+1
View File
@@ -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}"
resources/js/store/modules/fileFunctions.js
Vendored
+14
View File
@@ -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) => {