From 29fe2a10acf2dc99f4c2ee10e38654de5150d3d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joaqu=C3=ADn=20S=C3=A1nchez?= <userquin@gmail.com>
Date: Sun, 1 Jan 2023 19:11:50 +0100
Subject: [PATCH] feat: file upload errors (#671)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
---
 components/publish/PublishWidget.vue | 17 ++++++++++-------
 locales/en-GB.json                   |  1 +
 locales/en-US.json                   |  1 +
 locales/es-ES.json                   |  2 ++
 4 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/components/publish/PublishWidget.vue b/components/publish/PublishWidget.vue
index e97601a9..05646bc0 100644
--- a/components/publish/PublishWidget.vue
+++ b/components/publish/PublishWidget.vue
@@ -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>
diff --git a/locales/en-GB.json b/locales/en-GB.json
index 847ef80c..6d12eb31 100644
--- a/locales/en-GB.json
+++ b/locales/en-GB.json
@@ -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...",
diff --git a/locales/en-US.json b/locales/en-US.json
index cd10875c..d6f90a7e 100644
--- a/locales/en-US.json
+++ b/locales/en-US.json
@@ -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...",
diff --git a/locales/es-ES.json b/locales/es-ES.json
index cd148177..8dbf9e34 100644
--- a/locales/es-ES.json
+++ b/locales/es-ES.json
@@ -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...",