fix(media): Show an specific error message when file is too big

Signed-off-by: Lautaro Alvarez <autaro@grava.digital>

frontend/CHANGELOG.md

@@ -79,6 +79,7 @@ SPDX-License-Identifier: CC-BY-SA-4.0
 - Code blocks with `plantuml` as language are rendered as [PlantUML](https://plantuml.com/) diagram using a configured render server.
 - File based motd that supports markdown without html.
 - New notes can be created with a pre-given content when accessing `/new?content=Example%20content`.
+- Custom error message if you try to upload a big image and it exceed the maximum allowed.
 
 ### Changed
 

frontend/cypress/e2e/fileUpload.spec.ts

@@ -69,27 +69,60 @@ describe('File upload', () => {
     })
   })
 
-  it('fails', () => {
+  describe('fails', () => {
-    cy.getByCypressId('editor-pane').should('have.attr', 'data-cypress-editor-ready', 'true')
+    it('with 400 - generic error', () => {
-    cy.intercept(
+      cy.getByCypressId('editor-pane').should('have.attr', 'data-cypress-editor-ready', 'true')
-      {
+      cy.intercept(
-        method: 'POST',
+        {
-        url: '/api/private/media'
+          method: 'POST',
-      },
+          url: '/api/private/media'
-      {
+        },
-        statusCode: 400
+        {
-      }
+          statusCode: 400
-    )
+        }
-    cy.getByCypressId('toolbar.uploadImage').should('be.visible')
+      )
-    cy.getByCypressId('toolbar.uploadImage.input').selectFile(
+      cy.getByCypressId('toolbar.uploadImage').should('be.visible')
-      {
+      cy.getByCypressId('toolbar.uploadImage.input').selectFile(
-        contents: '@demoImage',
+        {
-        fileName: 'demo.png',
+          contents: '@demoImage',
-        mimeType: 'image/png'
+          fileName: 'demo.png',
-      },
+          mimeType: 'image/png'
-      { force: true }
+        },
-    )
+        { force: true }
-    cy.get('.cm-line').contains('![upload of demo.png failed]()')
+      )
+      cy.get('.cm-line')
+        .should(($el) => {
+          expect($el.text().trim()).equal('')
+        })
+      cy.getByCypressId('notification-toast').should('be.visible')
+    })
+
+    it('with 413 - file size error', () => {
+      cy.getByCypressId('editor-pane').should('have.attr', 'data-cypress-editor-ready', 'true')
+      cy.intercept(
+        {
+          method: 'POST',
+          url: '/api/private/media'
+        },
+        {
+          statusCode: 413
+        }
+      )
+      cy.getByCypressId('toolbar.uploadImage').should('be.visible')
+      cy.getByCypressId('toolbar.uploadImage.input').selectFile(
+        {
+          contents: '@demoImage',
+          fileName: 'demo.png',
+          mimeType: 'image/png'
+        },
+        { force: true }
+      )
+      cy.get('.cm-line')
+        .should(($el) => {
+          expect($el.text().trim()).equal('')
+        })
+      cy.getByCypressId('notification-toast').should('be.visible')
+    })
   })
 
   it('lets text paste still work', () => {

frontend/locales/en.json

@@ -228,7 +228,8 @@
         "withDescription": "Uploading file {{fileName}} - {{description}}"
       },
       "dropImage": "Drop Image to insert",
-      "failed": "Error while uploading {{fileName}}"
+      "failed": "Error while uploading {{fileName}}",
+      "failed_size_too_large": "Error when uploading {{fileName}}.\nFile size exceeds the allowed limit"
     },
     "untitledNote": "Untitled",
     "placeholder": "← Start by entering a title here\n===\nVisit {{host}}cheatsheet if you don't know what to do.\nLet the ideas grow :)",

frontend/src/components/editor-page/editor-pane/hooks/use-handle-upload.tsx

@@ -16,6 +16,7 @@ import type { EditorView } from '@codemirror/view'
 import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useBaseUrl } from '../../../../hooks/common/use-base-url'
+import type { ApiError } from 'next/dist/server/api-utils'
 
 /**
  * @param view the codemirror instance that is used to insert the Markdown code
@@ -68,11 +69,14 @@ export const useHandleUpload = (): handleUploadSignature => {
             undefined
           ])
         })
-        .catch((error: Error) => {
+        .catch((error: ApiError) => {
-          showErrorNotification('editor.upload.failed', { fileName: file.name })(error)
+          if (error.statusCode === 413) {
-          const replacement = `![upload of ${file.name} failed]()`
+            showErrorNotification('editor.upload.failed_size_too_large', { fileName: file.name })(error)
+          } else {
+            showErrorNotification('editor.upload.failed', { fileName: file.name })(error)
+          }
           changeContent(({ markdownContent }) => [
-            replaceInContent(markdownContent, uploadPlaceholder, replacement),
+            replaceInContent(markdownContent, uploadPlaceholder, '\n'),
             undefined
           ])
         })