zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

feat: file upload error handling (#560)

zio/stable
Joaquín Sánchez 2022-12-26 06:25:35 +01:00 committed by GitHub
parent 0530c6004e
commit db7f82422e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 47 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
components/publish/PublishWidget.vue
View File

@ -54,6 +54,7 @@ const currentVisibility = $computed(() => {
}) })
let isUploading = $ref<boolean>(false) let isUploading = $ref<boolean>(false)
let failed = $ref<File[]>([])
async function handlePaste(evt: ClipboardEvent) { async function handlePaste(evt: ClipboardEvent) {
const files = evt.clipboardData?.files const files = evt.clipboardData?.files
@ -98,11 +99,19 @@ const masto = useMasto()
async function uploadAttachments(files: File[]) { async function uploadAttachments(files: File[]) {
isUploading = true isUploading = true
failed = []
for (const file of files) { for (const file of files) {
const attachment = await masto.mediaAttachments.create({ try {
file, const attachment = await masto.mediaAttachments.create({
}) file,
draft.attachments.push(attachment) })
draft.attachments.push(attachment)
}
catch (e) {
// TODO: add some human-readable error message, problem is that masto api will not return response code
console.error(e)
failed = [...failed, file]
}
} }
isUploading = false isUploading = false
} }
@ -220,6 +229,36 @@ defineExpose({
<div i-ri:loader-2-fill animate-spin /> <div i-ri:loader-2-fill animate-spin />
{{ $t('state.uploading') }} {{ $t('state.uploading') }}
</div> </div>
<div
v-else-if="failed.length > 0"
role="alert"
aria-describedby="upload-failed"
flex="~ col"
gap-1 text-sm pt-1 pl-2 pr-1 pb-2 text-red-600 dark:text-red-400
border="~ base rounded red-600 dark:red-400"
>
<head id="upload-failed" flex justify-between>
<div flex items-center gap-x-2 font-bold>
<div aria-hidden="true" i-ri:error-warning-fill />
<p>{{ $t('state.upload_failed') }}</p>
</div>
<CommonTooltip placement="bottom" :content="$t('action.clear_upload_failed')">
<button
flex rounded-4 p1
hover:bg-active cursor-pointer transition-100
:aria-label="$t('action.clear_upload_failed')"
@click="failed = []"
>
<span aria-hidden="true" w-1.75em h-1.75em i-ri:close-line />
</button>
</CommonTooltip>
</head>
<ol pl-2 sm:pl-1>
<li v-for="file in failed" :key="file.name">
{{ file.name }}
</li>
</ol>
</div>
<div v-if="draft.attachments.length" flex="~ col gap-2" overflow-auto> <div v-if="draft.attachments.length" flex="~ col gap-2" overflow-auto>
<PublishAttachment <PublishAttachment

2
locales/en-US.json
View File

@ -43,6 +43,7 @@
"bookmarked": "Bookmarked", "bookmarked": "Bookmarked",
"boost": "Boost", "boost": "Boost",
"boosted": "Boosted", "boosted": "Boosted",
"clear_upload_failed": "Clear file upload errors",
"close": "Close", "close": "Close",
"compose": "Compose", "compose": "Compose",
"edit": "Edit", "edit": "Edit",
@ -222,6 +223,7 @@
"edited": "(Edited)", "edited": "(Edited)",
"editing": "Editing", "editing": "Editing",
"loading": "Loading...", "loading": "Loading...",
"upload_failed": "Upload failed",
"uploading": "Uploading..." "uploading": "Uploading..."
}, },
"status": { "status": {

2
locales/es-ES.json
View File

@ -43,6 +43,7 @@
"bookmarked": "Guardado como marcador", "bookmarked": "Guardado como marcador",
"boost": "Retootear", "boost": "Retootear",
"boosted": "Retooteado", "boosted": "Retooteado",
"clear_upload_failed": "Limpiar errores de subida de archivos",
"close": "Cerrar", "close": "Cerrar",
"compose": "Redactar", "compose": "Redactar",
"edit": "Editar", "edit": "Editar",
@ -219,6 +220,7 @@
"edited": "(Editado)", "edited": "(Editado)",
"editing": "Editando", "editing": "Editando",
"loading": "Cargando...", "loading": "Cargando...",
"upload_failed": "Subida fallida",
"uploading": "Subiendo..." "uploading": "Subiendo..."
}, },
"status": { "status": {