feat(upload): enhance upload functionality with chunk management and cancellation support
- Updated Upload.vue to include cancelItem functionality in the upload queue. - Modified UploadQueue.vue to emit cancel events for individual items. - Enhanced UploadQueueItem.vue to display cancel button for ongoing uploads. - Added merge.ts for handling manifest creation and S3 operations for chunk uploads. - Introduced temp.html for testing multi-threaded chunk uploads with progress tracking. - Created AGENTS.md for comprehensive project documentation and guidelines.
This commit is contained in:
@@ -10,12 +10,13 @@ const props = defineProps<{
|
||||
|
||||
const emit = defineEmits<{
|
||||
remove: [id: string];
|
||||
cancel: [id: string];
|
||||
}>();
|
||||
|
||||
const statusLabel = computed(() => {
|
||||
switch (props.item.status) {
|
||||
case 'pending': return 'Pending';
|
||||
case 'uploading': return 'Uploading...';
|
||||
case 'uploading': return props.item.activeChunks ? `Uploading (${props.item.activeChunks} threads)` : 'Uploading...';
|
||||
case 'processing': return 'Processing...';
|
||||
case 'complete': return 'Completed';
|
||||
case 'error': return 'Failed';
|
||||
@@ -32,6 +33,10 @@ const statusColor = computed(() => {
|
||||
default: return 'bg-accent';
|
||||
}
|
||||
});
|
||||
|
||||
const canCancel = computed(() => {
|
||||
return props.item.status === 'uploading' || props.item.status === 'pending';
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -72,7 +77,16 @@ const statusColor = computed(() => {
|
||||
<span class="w-2 h-2 rounded-full animate-pulse" :class="statusColor"></span>
|
||||
{{ statusLabel }}
|
||||
</span>
|
||||
<span class="text-accent font-bold">{{ item.progress || 0 }}%</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
v-if="canCancel && !minimal"
|
||||
@click="emit('cancel', item.id)"
|
||||
class="text-[10px] px-2 py-0.5 bg-red-50 text-red-500 hover:bg-red-100 rounded transition"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<span class="text-accent font-bold">{{ item.progress || 0 }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-slate-100 rounded-full overflow-hidden relative">
|
||||
<div class="absolute inset-0 bg-accent/20 animate-pulse w-full"></div>
|
||||
|
||||
Reference in New Issue
Block a user