feat(dashboard): Improve error messages during file upload (#13991)

* feat(dashboard): Update error message for large files

Update error message for uploads of files that exceed their limit

Related https://github.com/medusajs/medusa/pull/13981

* Added changeset

.changeset/few-flowers-shake.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+Improve error messaging for file uploads

packages/admin/dashboard/src/i18n/translations/en.json

@@ -513,7 +513,7 @@
       "uploadImagesLabel": "Upload images",
       "uploadImagesHint": "Drag and drop images here or click to upload.",
       "invalidFileType": "'{{name}}' is not a supported file type. Supported file types are: {{types}}.",
-      "fileTooLarge": "'{{name}}' exceeds the maximum file size of {{size}}. Please upload a smaller file.",
+      "fileTooLarge": "One or more files exceed the maximum file size of {{size}}: {{name}}",
       "failedToUpload": "Failed to upload the added media. Please try again.",
       "deleteWarning_one": "You are about to delete {{count}} image. This action cannot be undone.",
       "deleteWarning_other": "You are about to delete {{count}} images. This action cannot be undone.",

packages/admin/dashboard/src/routes/products/common/components/upload-media-form-item/upload-media-form-item.tsx

@@ -70,7 +70,7 @@ export const UploadMediaFormItem = ({
       const fileSizeRejections = rejectedFiles.filter((f) => f?.reason === "size")
 
       if (fileSizeRejections.length) {
-        const fileNames = fileSizeRejections.map((f) => f.file.name).join(", ")
+        const fileNames = "\n" + fileSizeRejections.slice(0, 5).map((f) => f.file.name).join("\n")
         form.setError("media", {
           type: "file_too_large",
           message: t("products.media.fileTooLarge", {
@@ -124,7 +124,7 @@ export const UploadMediaFormItem = ({
                   onUploaded={onUploaded}
                 />
               </Form.Control>
-              <Form.ErrorMessage />
+              <Form.ErrorMessage className="whitespace-pre-line" />
             </div>
           </Form.Item>
         )