Implement FileUpload component

CHANGELOG.md

@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 ## [Unreleased]
 
+### Added
+
+-   `<FileUpload />`
+    -   uploads files using `Uppy` library
+
 ## [24.1.0] - 2025-04-16
 
 ### Added

package.json

@@ -81,6 +81,9 @@
         "@codemirror/lang-yaml": "^6.1.2",
         "@codemirror/legacy-modes": "^6.4.2",
         "@mavrin/remark-typograf": "^2.2.0",
+        "@uppy/core": "^2.1.4",
+        "@uppy/react": "^2.1.2",
+        "@uppy/xhr-upload": "^2.0.7",
         "classnames": "^2.5.1",
         "codemirror": "^6.0.1",
         "color": "^4.2.3",

src/extensions/index.ts

@@ -1,2 +1,4 @@
 export * from "./codemirror/CodeMirror";
 export * from "./react-flow";
+export * from "./uppy/FileUpload";
+export * from "@uppy/core";

src/extensions/uppy/FileUpload.stories.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { FileUpload } from "./FileUpload";
+
+export default {
+    title: "Extensions/FileUpload",
+    component: FileUpload,
+} as Meta<typeof FileUpload>;
+
+const TemplateFull: StoryFn<typeof FileUpload> = (args) => <FileUpload {...args} />;
+
+export const BasicExample = TemplateFull.bind({});
+BasicExample.args = {
+    id: "fileupload",
+    onError: null,
+    onSuccess: null,
+    handleResponseData: null,
+    localeOptions: {
+        strings: {
+            dropHereOr: "Drop here or %{browse}",
+            browse: "browse",
+        },
+    },
+    resetForm: true,
+    autoProceed: true,
+    restrictions: {
+        maxFileSize: 1000000,
+        minNumberOfFiles: 1,
+        maxNumberOfFiles: 5,
+        allowedFileTypes: [".jpg", ".png"],
+    },
+};

src/extensions/uppy/FileUpload.tsx

@@ -0,0 +1,169 @@
+import React from "react";
+import Uppy, { Locale, Restrictions, UppyEventMap, UppyFile } from "@uppy/core";
+import { DragDrop, ProgressBar, useUppy } from "@uppy/react";
+import XHRUpload, { XHRUploadOptions } from "@uppy/xhr-upload";
+
+import { TestableComponent } from "../../components/interfaces";
+
+import "@uppy/core/dist/style.css";
+import "@uppy/drag-drop/dist/style.css";
+import "@uppy/progress-bar/dist/style.css";
+
+type eventNames = keyof UppyEventMap;
+
+export interface FileUploadProps extends TestableComponent {
+    /**
+     * upload instance id
+     */
+    id?: string;
+    /**
+     * upload error callback function
+     */
+    onError?: (responseText: string) => void;
+    /**
+     * upload success callback function
+     */
+    onSuccess?: (responseText: string) => void;
+    /**
+     * upload response callback function
+     */
+    handleResponseData?: (responseText: string) => void;
+    /**
+     * locale options, like button labels etc.
+     */
+    localeOptions?: Locale;
+    /**
+     * reset form after upload or in case of error/navigation steps
+     */
+    resetForm?: boolean;
+    /**
+     * auto proceed bolean
+     */
+    autoProceed?: boolean;
+    /**
+     * upload restrictions
+     */
+    restrictions?: Restrictions;
+    /**
+     * additional upload files
+     */
+    additionalFiles?: {
+        id: string;
+        name: string;
+        size: number;
+        data: Blob;
+    }[];
+    /**
+     * xhr upload options
+     */
+    xhrUploadOptions: XHRUploadOptions;
+    /**
+     * uppy events to register and unregister to
+     */
+    events?: { [key in eventNames]?: any };
+    /**
+     *  set uppy instance
+     */
+    setInstance?: (instance: Uppy) => void;
+}
+
+export { ProgressBar as UppyProgressBar, DragDrop } from "@uppy/react";
+
+export const FileUpload: React.FC<FileUploadProps> = ({
+    id,
+    onError,
+    onSuccess,
+    handleResponseData,
+    resetForm,
+    autoProceed = false,
+    restrictions,
+    additionalFiles,
+    xhrUploadOptions,
+    localeOptions,
+    events,
+    setInstance,
+    children,
+    ...rest
+}) => {
+    const uppy = useUppy(() => {
+        return new Uppy({
+            id,
+            autoProceed,
+            restrictions,
+            locale: localeOptions,
+        })
+            .on("upload-success", (_, response) => {
+                onSuccess?.(response.body);
+            })
+            .use(XHRUpload, {
+                ...xhrUploadOptions,
+                getResponseData: (responseText) => {
+                    handleResponseData?.(responseText);
+
+                    return responseText;
+                },
+                getResponseError: (responseText) => {
+                    uppy.reset();
+
+                    onError?.(responseText);
+                    return new Error(responseText);
+                },
+            });
+    });
+
+    React.useEffect(() => {
+        uppy && setInstance && setInstance(uppy);
+        const eventEntries = Object.entries(events ?? {}) as [keyof UppyEventMap, (file: UppyFile) => Promise<void>][];
+
+        const unregisterEvents = () => {
+            eventEntries.length && eventEntries.forEach(([event, handler]) => uppy.off(event, handler));
+        };
+
+        unregisterEvents();
+
+        eventEntries.length &&
+            eventEntries.forEach(([event, handler]) => {
+                uppy.on(event, handler);
+            });
+
+        return () => unregisterEvents();
+    }, [uppy, events]);
+
+    React.useEffect(() => {
+        if (resetForm) {
+            uppy.reset();
+        }
+
+        return () => {
+            uppy.close();
+        };
+    }, [resetForm, uppy]);
+
+    React.useEffect(() => {
+        if (additionalFiles) {
+            additionalFiles.forEach((file) => {
+                uppy.addFile({
+                    name: file.name,
+                    data: file.data,
+                    size: file.size,
+                    id: file.id,
+                });
+            });
+        }
+    }, [additionalFiles, uppy]);
+
+    if (!uppy) return null;
+
+    return (
+        <div {...rest}>
+            {children ? (
+                children
+            ) : (
+                <>
+                    <DragDrop uppy={uppy} />
+                    <ProgressBar uppy={uppy} />
+                </>
+            )}
+        </div>
+    );
+};