docs: restrict file size in client-side upload example

src/components/file-input/file-input.stories.mdx

@@ -165,6 +165,10 @@ to track upload progress on the server, or do not actually send the files to a s
 Note the use of a `ref` to store the `FileReader` object - this is not essential but avoids having to create a new `FileReader` object more than once in the
 lifecycle of the component.
 
+This example also contains validation to restrict the user from uploading large files - this is useful because storing a large file in memory may make the
+browser freeze or even crash. If your application needs to process large files on the client side then consider
+[reading the file into an ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsArrayBuffer) and processing that piece-by-piece.
+
 <Canvas>
   <Story name="tracking upload status on client side" story={stories.UploadStatusClient} />
 </Canvas>

src/components/file-input/file-input.stories.tsx

@@ -120,6 +120,7 @@ export const FileTypeValidation: ComponentStory<typeof FileInput> = () => {
 };
 
 export const UploadStatusClient: ComponentStory<typeof FileInput> = () => {
+  const [error, setError] = useState<string | undefined>();
   const [uploadStatus, setUploadStatus] = useState<
     FileUploadStatusProps | undefined
   >();
@@ -136,11 +137,21 @@ export const UploadStatusClient: ComponentStory<typeof FileInput> = () => {
 
   const onChange = (files: FileList) => {
     if (!files.length) {
+      setError(undefined);
       removeFile();
       return;
     }
     // as this is a single file input there will only ever be (at most) 1 file
     const fileUploaded = files[0];
+
+    // abandon with error if the file is too big
+    if (fileUploaded.size > 5 * 1024 * 1024) {
+      setError("This file is too big to be uploaded - maximum size 5MB");
+      return;
+    }
+
+    setError(undefined);
+
     const fileReader = getReader();
 
     const handleLoad = () => {
@@ -215,8 +226,10 @@ export const UploadStatusClient: ComponentStory<typeof FileInput> = () => {
   return (
     <FileInput
       label="Upload status example"
+      inputHint="Maximum size 5MB"
       onChange={onChange}
       uploadStatus={uploadStatus}
+      error={error}
     />
   );
 };