fix: display error if attachments exceed limit (#666)

components/publish/PublishWidget.vue

@@ -54,6 +54,7 @@ const currentVisibility = $computed(() => {
 })
 
 let isUploading = $ref<boolean>(false)
+let isExceedingAttachmentLimit = $ref<boolean>(false)
 let failed = $ref<File[]>([])
 
 async function handlePaste(evt: ClipboardEvent) {
@@ -92,8 +93,11 @@ async function uploadAttachments(files: File[]) {
   isUploading = true
   failed = []
   // TODO: display some kind of message if too many media are selected
+  // DONE
   const limit = currentInstance.value!.configuration.statuses.maxMediaAttachments || 4
   for (const file of files.slice(0, limit)) {
+    if (draft.attachments.length < limit) {
+      isExceedingAttachmentLimit = false
       try {
         const attachment = await masto.mediaAttachments.create({
           file,
@@ -106,6 +110,11 @@ async function uploadAttachments(files: File[]) {
         failed = [...failed, file]
       }
     }
+    else {
+      isExceedingAttachmentLimit = true
+      failed = [...failed, file]
+    }
+  }
   isUploading = false
 }
 
@@ -246,6 +255,9 @@ defineExpose({
               </button>
             </CommonTooltip>
           </head>
+          <div v-if="isExceedingAttachmentLimit" pl-2 sm:pl-1 text-small>
+            {{ $t('state.attachments_exceed_server_limit') }}
+          </div>
           <ol pl-2 sm:pl-1>
             <li v-for="file in failed" :key="file.name">
               {{ file.name }}

locales/en-GB.json

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

locales/en-US.json

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