feat(ui): add max. file size check before upload attachment

composables/masto/publish.ts

@@ -154,7 +154,13 @@ export type MediaAttachmentUploadError = [filename: string, message: string]
 
 export function useUploadMediaAttachment(draft: Ref<Draft>) {
   const { client } = useMasto()
-  const { t } = useI18n()
+  const { t, locale } = useI18n()
+  const formatter = computed(() => Intl.NumberFormat(locale.value, {
+    style: 'unit',
+    unit: 'megabyte',
+    unitDisplay: 'narrow',
+    maximumFractionDigits: 0,
+  }))
 
   const isUploading = ref<boolean>(false)
   const isExceedingAttachmentLimit = ref<boolean>(false)
@@ -224,8 +230,22 @@ export function useUploadMediaAttachment(draft: Ref<Draft>) {
     // TODO: display some kind of message if too many media are selected
     // DONE
     const limit = currentInstance.value!.configuration?.statuses.maxMediaAttachments || 4
+    const maxVideoSize = currentInstance.value!.configuration?.mediaAttachments.videoSizeLimit || 0
+    const maxImageSize = currentInstance.value!.configuration?.mediaAttachments.imageSizeLimit || 0
     for (const file of files.slice(0, limit)) {
       if (draft.value.attachments.length < limit) {
+        if (file.type.startsWith('image/')) {
+          if (file.size > maxImageSize) {
+            failedAttachments.value = [...failedAttachments.value, [file.name, t('state.attachments_limit_image_error', [formatter.value.format(maxImageSize / (1024 * 1024))])]]
+            continue
+          }
+        }
+        else {
+          if (file.size > maxVideoSize) {
+            failedAttachments.value = [...failedAttachments.value, [file.name, t('state.attachments_limit_video_error', [formatter.value.format(maxVideoSize / (1024 * 1024))])]]
+            continue
+          }
+        }
         isExceedingAttachmentLimit.value = false
         try {
           const attachment = await client.value.v1.media.create({

locales/en.json

@@ -592,6 +592,8 @@
   "state": {
     "attachments_exceed_server_limit": "The number of attachments exceeded the limit per post.",
     "attachments_limit_error": "Limit per post exceeded",
+    "attachments_limit_image_error": "Maximum image size exceeded: {0}",
+    "attachments_limit_video_error": "Maximum video size exceeded: {0}",
     "edited": "(Edited)",
     "editing": "Editing",
     "loading": "Loading...",

locales/es-419.json

@@ -184,6 +184,9 @@
       "label": "Usuarios en línea"
     }
   },
+  "state": {
+    "attachments_limit_video_error": "Tamaño máximo de video excedido: {0}"
+  },
   "status": {
     "spoiler_show_less": "Menos"
   },

locales/es.json

@@ -592,6 +592,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",
+    "attachments_limit_image_error": "Tamaño máximo de imagen excedido: {0}",
+    "attachments_limit_video_error": "Tamaño máximo de vídeo excedido: {0}",
     "edited": "(Editado)",
     "editing": "Editando",
     "loading": "Cargando...",
@@ -708,7 +710,7 @@
   "tooltip": {
     "add_content_warning": "Añadir advertencia de contenido",
     "add_emojis": "Agregar emojis",
-    "add_media": "Añadir imágenes, video o audio",
+    "add_media": "Añadir imágenes, vídeo o audio",
     "add_publishable_content": "Publicar contenido",
     "change_content_visibility": "Cambiar visibilidad de contenido",
     "change_language": "Cambiar idioma",