feat: file upload errors (#671)

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
This commit is contained in:
Joaquín Sánchez 2023-01-01 19:11:50 +01:00 committed by GitHub
parent e596953ada
commit 29fe2a10ac
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 7 deletions

View file

@ -5,6 +5,8 @@ import { useDropZone } from '@vueuse/core'
import { EditorContent } from '@tiptap/vue-3'
import type { Draft } from '~/types'
type FileUploadError = [filename: string, message: string]
const {
draftKey,
initial = getDefaultDraft() as never /* Bug of vue-core */,
@ -57,7 +59,7 @@ const currentVisibility = $computed(() => {
let isUploading = $ref<boolean>(false)
let isExceedingAttachmentLimit = $ref<boolean>(false)
let failed = $ref<File[]>([])
let failed = $ref<FileUploadError[]>([])
async function handlePaste(evt: ClipboardEvent) {
const files = evt.clipboardData?.files
@ -109,12 +111,12 @@ async function uploadAttachments(files: File[]) {
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]
failed = [...failed, [file.name, (e as Error).message]]
}
}
else {
isExceedingAttachmentLimit = true
failed = [...failed, file]
failed = [...failed, [file.name, t('state.attachments_limit_error')]]
}
}
isUploading = false
@ -233,7 +235,7 @@ defineExpose({
<div
v-else-if="failed.length > 0"
role="alert"
aria-describedby="upload-failed"
:aria-describedby="isExceedingAttachmentLimit ? 'upload-failed uploads-per-post' : 'upload-failed'"
flex="~ col"
gap-1 text-sm
pt-1 ps-2 pe-1 pb-2
@ -256,12 +258,13 @@ defineExpose({
</button>
</CommonTooltip>
</head>
<div v-if="isExceedingAttachmentLimit" ps-2 sm:ps-1 text-small>
<div v-if="isExceedingAttachmentLimit" id="uploads-per-post" ps-2 sm:ps-1 text-small>
{{ $t('state.attachments_exceed_server_limit') }}
</div>
<ol ps-2 sm:ps-1>
<li v-for="file in failed" :key="file.name">
{{ file.name }}
<li v-for="error in failed" :key="error[0]" flex="~ col sm:row" gap-y-1 sm:gap-x-2>
<strong>{{ error[1] }}:</strong>
<span>{{ error[0] }}</span>
</li>
</ol>
</div>

View file

@ -261,6 +261,7 @@
},
"state": {
"attachments_exceed_server_limit": "The number of attachments exceeded the limit per post.",
"attachments_limit_error": "Limit per post exceeded",
"edited": "(Edited)",
"editing": "Editing",
"loading": "Loading...",

View file

@ -261,6 +261,7 @@
},
"state": {
"attachments_exceed_server_limit": "The number of attachments exceeded the limit per post.",
"attachments_limit_error": "Limit per post exceeded",
"edited": "(Edited)",
"editing": "Editing",
"loading": "Loading...",

View file

@ -251,6 +251,8 @@
}
},
"state": {
"attachments_exceed_server_limit": "Número máximo de archivos adjuntos por publicación excedido.",
"attachments_limit_error": "Límite por publicación excedido",
"edited": "(Editado)",
"editing": "Editando",
"loading": "Cargando...",