feat(website): show a meaningful error if uploaded file is too large

backend/src/main/resources/application.properties

@@ -6,8 +6,8 @@ springdoc.default-consumes-media-type=application/json
 springdoc.api-docs.path=/api-docs
 springdoc.swagger-ui.operationsSorter=alpha
 server.forward-headers-strategy=framework
-spring.servlet.multipart.max-file-size=5000MB
-spring.servlet.multipart.max-request-size=5000MB
+spring.servlet.multipart.max-file-size=200MB
+spring.servlet.multipart.max-request-size=200MB
 
 
 server.compression.enabled=true

website/src/components/Submission/DataUploadForm.tsx

@@ -37,6 +37,9 @@ type DataUploadFormProps = {
 
 const logger = getClientLogger('DataUploadForm');
 
+// This should be the same value as defined in the backend.
+const MAX_UPLOAD_SIZE = '800 MB';
+
 const DataUseTerms = ({
     dataUseTermsType,
     setDataUseTermsType,
@@ -436,6 +439,12 @@ function handleError(onError: (message: string) => void, action: Action) {
                 case 400:
                     onError('Failed to submit sequence entries: ' + error.response.data.detail);
                     return;
+                case 413:
+                    onError(
+                        `The uploaded file exceeds the maximum allowed size of ${MAX_UPLOAD_SIZE}. Please compress ` +
+                            'the file or split it into smaller submissions.',
+                    );
+                    return;
                 case 422:
                     onError('The submitted file content was invalid: ' + error.response.data.detail);
                     return;

website/src/services/backendApi.ts

@@ -1,7 +1,12 @@
 import { makeApi, makeEndpoint } from '@zodios/core';
 import z from 'zod';
 
-import { authorizationHeader, notAuthorizedError, withOrganismPathSegment } from './commonApiTypes.ts';
+import {
+    authorizationHeader,
+    notAuthorizedError,
+    payloadTooLargeError,
+    withOrganismPathSegment,
+} from './commonApiTypes.ts';
 import {
     accessions,
     accessionVersion,
@@ -37,6 +42,7 @@ const submitEndpoint = makeEndpoint({
         { status: 400, schema: problemDetail },
         { status: 422, schema: problemDetail },
         notAuthorizedError,
+        payloadTooLargeError,
     ],
 });
 
@@ -59,6 +65,7 @@ const reviseEndpoint = makeEndpoint({
         { status: 400, schema: problemDetail },
         { status: 422, schema: problemDetail },
         notAuthorizedError,
+        payloadTooLargeError,
     ],
 });
 

website/src/services/commonApiTypes.ts

@@ -23,3 +23,10 @@ export const notAuthorizedError = makeErrors([
 ])[0];
 
 export const conflictError = { status: 409, schema: problemDetail };
+
+export const payloadTooLargeError = makeErrors([
+    {
+        status: 413,
+        schema: z.never(),
+    },
+])[0];