Enhance media upload functionality: add abort signal support for uploadMedia, enabling cancellation of ongoing uploads. Implement cancel and cancelAll methods in upload store to manage queued and active uploads. Update UploadSnackbar to include cancel buttons for individual and all uploads. Enhance i18n with new cancellation strings.
This commit is contained in:
@@ -25,7 +25,8 @@ function barWidth(item: UploadItem): number {
|
||||
/** Глобальный индикатор загрузок: живёт вне страниц, поэтому загрузка идёт при любой навигации. */
|
||||
export function UploadSnackbar() {
|
||||
const { t } = useTranslation()
|
||||
const { items, active, minimized, skipped, toggleMinimize, dismiss } = useUploadStore()
|
||||
const { items, active, minimized, skipped, toggleMinimize, dismiss, cancel, cancelAll } =
|
||||
useUploadStore()
|
||||
|
||||
if (items.length === 0 && skipped === 0) return null
|
||||
|
||||
@@ -50,6 +51,16 @@ export function UploadSnackbar() {
|
||||
{minimized ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
</button>
|
||||
)}
|
||||
{active && (
|
||||
<button
|
||||
type="button"
|
||||
className="opacity-70 hover:opacity-100"
|
||||
title={t('admin.media.cancelAll')}
|
||||
onClick={cancelAll}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
{!active && (
|
||||
<button
|
||||
type="button"
|
||||
@@ -79,6 +90,19 @@ export function UploadSnackbar() {
|
||||
{item.status === 'uploading' && (
|
||||
<span className="ml-auto shrink-0 text-muted-foreground">{item.percent}%</span>
|
||||
)}
|
||||
{(item.status === 'queued' || item.status === 'uploading') && (
|
||||
<button
|
||||
type="button"
|
||||
className={cn(
|
||||
'shrink-0 opacity-70 hover:opacity-100',
|
||||
item.status === 'queued' && 'ml-auto',
|
||||
)}
|
||||
title={t('common.cancel')}
|
||||
onClick={() => cancel(item.id)}
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<div className="h-1 w-full overflow-hidden rounded bg-muted">
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user