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

chunk upload and multipart upload beta.1

Browse Source
This commit is contained in:
carodej
2020-07-29 12:29:30 +02:00
parent bf8db1be52
commit 18761eb5b3
18 changed files with 307 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
resources/js/components/FilesView/UploadProgress.vue
View File

@@ -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;