ファイルサイズが上限を超えたらエラートーストを出すように

public/config.js

@@ -107,7 +107,7 @@
     },
     isRootChannelSelectableAsParentChannel: false,
     showQrCodeButton: true,
-    tooLargeFileMessage: '大きい%sの共有にはDriveを使用してください',
+    tooLargeFileMessage: '大きいファイルの共有にはDriveを使用してください',
     showWidgetCopyButton: true,
     inlineReplyDisableChannels: ['#general', '#random'],
     iosPwaInfoLink: 'https://wiki.trap.jp/SysAd/docs/traQ-S/PWA'

src/components/Main/MainView/MessageElement/MessageEditor.vue

@@ -94,18 +94,24 @@ const useAttachmentsEditor = (
     if (isPosting.value) return
 
     isPosting.value = true
-    const attachmentFile = await getResizedFile(file)
-    const { data } = await apis.postFile(attachmentFile, props.channelId, {
-      /**
-       * https://github.com/axios/axios#request-config
-       */
-      onUploadProgress(e: ProgressEvent) {
-        progress.value = e.loaded / e.total
-      }
-    })
+    try {
+      const attachmentFile = await getResizedFile(file)
+      const { data } = await apis.postFile(attachmentFile, props.channelId, {
+        /**
+         * https://github.com/axios/axios#request-config
+         */
+        onUploadProgress(e: ProgressEvent) {
+          progress.value = e.loaded / e.total
+        }
+      })
 
-    const fileUrl = buildFilePathForPost(data.id)
-    text.value = text.value !== '' ? `${text.value}\n${fileUrl}` : fileUrl
+      const fileUrl = buildFilePathForPost(data.id)
+      text.value = text.value !== '' ? `${text.value}\n${fileUrl}` : fileUrl
+    } catch (err) {
+      if (err instanceof Error) {
+        addErrorToast(err.message)
+      }
+    }
     progress.value = 0
     isPosting.value = false
   }

src/components/Toast/AToast.vue

@@ -99,5 +99,6 @@ const iconName = computed(() => iconNameMap[props.toast.type])
 .text {
   margin: 4px;
   word-break: break-all;
+  white-space: pre-wrap;
 }
 </style>

src/composables/messageInputState/useMessageInputStateAttachment.ts

@@ -25,8 +25,8 @@ const useMessageInputStateAttachment = (
         file: attachmentFile
       })
     } catch (e) {
-      if (typeof e === 'string') {
-        onError(e)
+      if (e instanceof Error) {
+        onError(e.message)
       }
     }
   }

src/lib/resize/index.ts

@@ -74,28 +74,17 @@ const resize = async (
   }
 }
 
-const IMAGE_SIZE_LIMIT = 20 * 1000 * 1000 // 20MB
 const FILE_SIZE_LIMIT = 30 * 1000 * 1000 // 30MB
 
 const tooLargeFileMessage =
   window.traQConfig.tooLargeFileMessage ??
-  '大きい%sの共有には別のサービスを利用してください。'
+  '大きいファイルの共有には別のサービスを利用してください。'
 
-const IMAGE_MAX_SIZE_EXCEEDED_MESSAGE = `画像サイズは20MBまでです\n${tooLargeFileMessage.replace(
-  '%s',
-  '画像'
-)}`
-const FILE_MAX_SIZE_EXCEEDED_MESSAGE = `ファイルサイズは30MBまでです\n${tooLargeFileMessage.replace(
-  '%s',
-  'ファイル'
-)}`
+const FILE_MAX_SIZE_EXCEEDED_MESSAGE = `ファイルサイズは30MBまでです\n${tooLargeFileMessage}`
 
 export const getResizedFile = async (file: File) => {
   const fileType = mimeToFileType(file.type)
 
-  if (fileType === 'image' && file.size > IMAGE_SIZE_LIMIT) {
-    throw new Error(IMAGE_MAX_SIZE_EXCEEDED_MESSAGE)
-  }
   if (file.size > FILE_SIZE_LIMIT) {
     throw new Error(FILE_MAX_SIZE_EXCEEDED_MESSAGE)
   }

src/types/config.d.ts

@@ -95,8 +95,7 @@ export type Config = Readonly<{
   showQrCodeButton?: boolean
   /**
    * 大きなファイルサイズのファイルを送信した際に表示される補足メッセージ
-   * `%s`の部分には「画像」または「ファイル」が入る
-   * @default '大きい%sの共有には別のサービスを利用してください。'
+   * @default '大きいファイルの共有には別のサービスを利用してください。'
    */
   tooLargeFileMessage?: string
   /**