@nolwenture/formik-jsonschema-form 0.21.3 → 0.22.0

package/dist/FileUploadContext.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { AxiosProgressEvent } from "axios";
+export type FileUploadContext<T> = {
+    uploadFile: (x: {
+        data: FormData;
+        onUploadProgress?: (progressEvent: AxiosProgressEvent) => void;
+    }) => Promise<T>;
+    fetchFile: (value: T) => Promise<{
+        name: string;
+    }>;
+    removeFile: (fileName: string) => Promise<{
+        success: boolean;
+        message?: undefined;
+    } | {
+        success: boolean;
+        message: string;
+    }>;
+};
+export declare const FileUploadContext: import("react").Context<FileUploadContext<any>>;

package/dist/FileUploadContext.js

@@ -0,0 +1,12 @@
+import { createContext } from "react";
+export const FileUploadContext = createContext({
+    uploadFile: () => {
+        console.error("Lacking upload from FileUploadContext");
+        return Promise.reject();
+    },
+    fetchFile: (value) => Promise.resolve(value),
+    removeFile: () => {
+        console.error("Lacking remove from FileUploadContext");
+        return Promise.reject();
+    },
+});

package/dist/Form.stories.d.ts

@@ -14,3 +14,4 @@ export declare const WithConditions: Story;
 export declare const WithRefAndDefinitions: Story;
 export declare const MultipleChoice: Story;
 export declare const Collapsible: Story;
+export declare const FileUploadForm: Story;

package/dist/Form.stories.js

@@ -25,6 +25,16 @@ import { Formik, useFormikContext } from "formik";
 import { InfoFieldButton, SearchableMultiTagSelectField, } from "./styledComponents";
 import { completeSchema, completeUiSchema, simpleSchema, simpleUiSchema, generatedSchema, requiredInputSchema, requiredInputUiSchema, conditionsSchema, conditionsUiSchema, refDefSchema, refDefUiSchema, multipleChoiceSchema, multipleChoiceUiSchema, collapsibleSchema, collapsibleUiSchema, } from "./sampleData";
 import { Form, styledComponents } from "./";
+import { fileUploadSchema, fileUploadUiSchema } from "./sampleData/fileUpload";
+import { FileUploadContext } from "./FileUploadContext";
+import { mockFetchFile, mockRemoveFile, mockUploadFile, } from "./fields/stories/FileUploadField.stories";
+const MockFileUploadProvider = ({ children, }) => {
+    return (_jsx(FileUploadContext.Provider, { value: {
+            uploadFile: mockUploadFile,
+            fetchFile: mockFetchFile,
+            removeFile: mockRemoveFile,
+        }, children: children }));
+};
 const meta = {
     title: "Form",
     component: Form,
@@ -35,11 +45,11 @@ const meta = {
     },
     render: (_a) => {
         var args = __rest(_a, []);
-        return (_jsx(Formik, { initialValues: {}, onSubmit: (values, formikHelpers) => __awaiter(void 0, void 0, void 0, function* () {
-                action("onSubmit(_, formHelper)")(formikHelpers);
-                action("onSubmit(values)")(values);
-                formikHelpers.setSubmitting(false);
-            }), children: _jsx(Form, Object.assign({}, args)) }));
+        return (_jsx(MockFileUploadProvider, { children: _jsx(Formik, { initialValues: {}, onSubmit: (values, formikHelpers) => __awaiter(void 0, void 0, void 0, function* () {
+                    action("onSubmit(_, formHelper)")(formikHelpers);
+                    action("onSubmit(values)")(values);
+                    formikHelpers.setSubmitting(false);
+                }), children: _jsx(Form, Object.assign({}, args)) }) }));
     },
 };
 export default meta;
@@ -202,3 +212,9 @@ export const Collapsible = {
         uiSchema: collapsibleUiSchema,
     },
 };
+export const FileUploadForm = {
+    args: {
+        schema: fileUploadSchema,
+        uiSchema: fileUploadUiSchema,
+    },
+};

package/dist/fields/FileUploadField.d.ts

@@ -0,0 +1,3 @@
+import { FieldProps } from "../types";
+import React from "react";
+export declare const FileUploadField: React.FC<FieldProps>;

package/dist/fields/FileUploadField.js

@@ -0,0 +1,70 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useState } from "react";
+import { FormRegistry } from "../Form";
+import { useExtractUiSchema, useSetDefault } from "../hooks";
+import { getIn, useFormikContext } from "formik";
+import { FileUploadContext } from "../FileUploadContext";
+export const FileUploadField = (props) => {
+    const { templates: { FieldTemplate }, components: { FileUploadField }, } = useContext(FormRegistry);
+    useSetDefault(props);
+    const { name, uiSchema } = props;
+    const { props: inputProps } = useExtractUiSchema(uiSchema);
+    const { setFieldValue, values } = useFormikContext();
+    const value = getIn(values, name);
+    const { uploadFile, fetchFile, removeFile } = useContext(FileUploadContext);
+    const [uploadedFile, setUploadedFile] = useState(null);
+    useEffect(() => {
+        (() => __awaiter(void 0, void 0, void 0, function* () { return setUploadedFile(yield fetchFile(value)); }))();
+    }, [value]);
+    const [uploadProgress, setUploadProgress] = useState(0);
+    const handleFileUpload = (file, setFieldValue) => __awaiter(void 0, void 0, void 0, function* () {
+        const formData = new FormData();
+        formData.append("file", file);
+        try {
+            // Simulate slower upload progress with manual updates in order to show bar at all for fast uploads
+            let fakeProgress = 0;
+            const interval = setInterval(() => {
+                fakeProgress += 10;
+                if (fakeProgress <= 100) {
+                    setUploadProgress(fakeProgress);
+                }
+                else {
+                    clearInterval(interval);
+                }
+            }, 100);
+            const result = yield uploadFile({
+                data: formData,
+                onUploadProgress: (progressEvent) => {
+                    const totalLength = progressEvent.total;
+                    if (totalLength !== null && totalLength !== undefined) {
+                        const progress = Math.round((progressEvent.loaded * 100) / totalLength);
+                        if (progress === 100) {
+                            setUploadProgress(progress);
+                        }
+                    }
+                },
+            });
+            setFieldValue(name, result);
+        }
+        catch (error) {
+            console.error("File upload failed", error);
+        }
+    });
+    const handleRemoveFile = (setFieldValue) => __awaiter(void 0, void 0, void 0, function* () {
+        if (uploadedFile === null || uploadedFile === void 0 ? void 0 : uploadedFile.name) {
+            yield removeFile(uploadedFile.name);
+            setUploadProgress(0);
+            setFieldValue(name, null);
+        }
+    });
+    return (_jsx(FieldTemplate, Object.assign({}, props, { children: _jsx(FileUploadField, Object.assign({}, inputProps, { name: name, value: value, handleRemoveFile: handleRemoveFile, uploadedFile: uploadedFile, setFieldValue: setFieldValue, handleFileUpload: handleFileUpload, uploadProgress: uploadProgress, removeButton: uiSchema["ui:removeButton"], uploadButtonText: uiSchema["ui:uploadButtonText"], infoText: uiSchema["ui:infoText"] })) })));
+};

package/dist/fields/index.d.ts

@@ -13,3 +13,4 @@ export * from "./SearchMultiTagSelectField";
 export * from "./SearchableSelectField";
 export * from "./MultipleChoiceField";
 export * from "./TextAreaField";
+export * from "./FileUploadField";

package/dist/fields/index.js

@@ -13,3 +13,4 @@ export * from "./SearchMultiTagSelectField";
 export * from "./SearchableSelectField";
 export * from "./MultipleChoiceField";
 export * from "./TextAreaField";
+export * from "./FileUploadField";

package/dist/fields/stories/FileUploadField.stories.d.ts

@@ -0,0 +1,15 @@
+import { StoryObj } from "@storybook/react";
+import { FileUploadField } from "../FileUploadField";
+export declare const mockUploadFile: ({ data, onUploadProgress, }: {
+    data: FormData;
+    onUploadProgress?: ((progressEvent: any) => void) | undefined;
+}) => Promise<string>;
+export declare const mockFetchFile: (fileId: string) => Promise<{
+    name: string;
+}>;
+export declare const mockRemoveFile: (fileName: string) => Promise<{
+    success: boolean;
+}>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../../types").FieldProps>;
+export default _default;
+export declare const Default: StoryObj<typeof FileUploadField>;

package/dist/fields/stories/FileUploadField.stories.js

@@ -0,0 +1,66 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Formik, Form } from "formik";
+import { FileUploadField } from "../FileUploadField";
+import { FileUploadContext } from "../../FileUploadContext";
+let isFileUploaded = false;
+let mockFileName = "";
+export const mockUploadFile = (_a) => __awaiter(void 0, [_a], void 0, function* ({ data, onUploadProgress, }) {
+    const file = data.get("file");
+    mockFileName = (file === null || file === void 0 ? void 0 : file.name) || "unknown";
+    console.log("Mock uploadFile called with FormData:", data);
+    const mockFileId = (file === null || file === void 0 ? void 0 : file.name) || "mockFileId";
+    setTimeout(() => {
+        isFileUploaded = true;
+    }, 1000);
+    let progress = 0;
+    const interval = setInterval(() => {
+        progress += 10;
+        if (onUploadProgress) {
+            onUploadProgress({ loaded: progress, total: 100 });
+        }
+        if (progress >= 100)
+            clearInterval(interval);
+    }, 100);
+    return mockFileId;
+});
+export const mockFetchFile = (fileId) => __awaiter(void 0, void 0, void 0, function* () {
+    console.log("Mock fetchFile called with fileId:", fileId);
+    if (!isFileUploaded) {
+        return new Promise((resolve) => setTimeout(() => resolve({ name: mockFileName }), 0));
+    }
+    return new Promise((resolve) => setTimeout(() => resolve({ name: mockFileName }), 500));
+});
+export const mockRemoveFile = (fileName) => __awaiter(void 0, void 0, void 0, function* () {
+    console.log("Mock removeFile called with fileName:", fileName);
+    isFileUploaded = false;
+    mockFileName = "";
+    return { success: true };
+});
+export default {
+    title: "Fields/FileUploadField",
+    component: FileUploadField,
+    decorators: [
+        (Story) => (_jsx(FileUploadContext.Provider, { value: {
+                uploadFile: mockUploadFile,
+                fetchFile: mockFetchFile,
+                removeFile: mockRemoveFile,
+            }, children: _jsx(Formik, { initialValues: {}, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) }) })),
+    ],
+};
+export const Default = {
+    args: {
+        name: "file",
+        schema: { type: "object" },
+        uiSchema: {},
+    },
+    play: (_b) => __awaiter(void 0, [_b], void 0, function* ({ canvasElement }) { }),
+};

package/dist/sampleData/fileUpload.d.ts

@@ -0,0 +1,7 @@
+import type { Schema, UiSchema } from "../types";
+export type FileUploadDataType = {
+    file: object;
+    fileArray: object[];
+};
+export declare const fileUploadSchema: Schema;
+export declare const fileUploadUiSchema: UiSchema;

package/dist/sampleData/fileUpload.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const fileUploadSchema = {
+    title: "File Upload Form",
+    properties: {
+        file: { type: "object", title: "Single upload field" },
+        fileArray: { type: "array", additionalItems: { type: "object" } },
+    },
+};
+export const fileUploadUiSchema = {
+    "ui:description": "File upload form with on single field and one array field for uploads",
+    file: {
+        "ui:field": "FileUploadField",
+        "ui:removeButton": {
+            content: _jsx("span", { children: "-" }),
+            props: {
+                style: {
+                    height: "25px",
+                    width: "25px",
+                    background: "red",
+                    borderRadius: "50%",
+                    display: "inline-block",
+                    border: "unset",
+                    padding: "unset",
+                    color: "white",
+                    fontWeight: "bolder",
+                    textAlign: "center",
+                    lineHeight: "1.4em",
+                },
+            },
+        },
+    },
+    fileArray: {
+        items: {
+            "ui:field": "FileUploadField",
+            "ui:uploadButtonText": "Add?",
+            "ui:infoText": "There's nothing here",
+        },
+    },
+};

package/dist/styledComponents.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="hoist-non-react-statics" />
-import type { ClickableProps, InfoFieldButtonProps, MultipleChoiceFieldProps, ObjectFieldButtonProps, RadioButtonFieldProps, SelectFieldProps, TextAreaInputFieldProps, ToggleSwitchFieldProps } from "./types";
+import type { ClickableProps, InfoFieldButtonProps, MultipleChoiceFieldProps, ObjectFieldButtonProps, RadioButtonFieldProps, SelectFieldProps, TextAreaInputFieldProps, ToggleSwitchFieldProps, FileUploadFieldProps } from "./types";
 import * as formik from "formik";
 import React from "react";
 export declare const Form: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & React.RefAttributes<HTMLFormElement>, "ref"> & {
@@ -240,4 +240,31 @@ export declare const SearchInput: import("styled-components").IStyledComponent<"
 }, never>> & Omit<({ formikAs, ...props }: Omit<formik.FieldAttributes<any>, "as">) => import("react/jsx-runtime").JSX.Element, keyof React.Component<any, {}, any>>, keyof React.Component<any, {}, any>>;
 export declare const SearchClearButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
 export declare const SearchInputContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const FileUploadButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>;
+export declare const HiddenFileInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>;
+export declare const ProgressBarContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const ProgressBar: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $progress: number;
+}>>;
+export declare const ProgressText: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
+export declare const FileItemContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const RemoveButton: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>;
+export declare const FileInfoText: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
+export declare const FileUploadFieldContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const FileUploadField: {
+    ({ name, uploadedFile, handleFileUpload, value, setFieldValue, className, uploadProgress, handleRemoveFile, removeButton, uploadButtonText, infoText, }: FileUploadFieldProps): import("react/jsx-runtime").JSX.Element;
+    styles: {
+        FileUploadFieldFileUploadFieldContainerStyle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+        FileUploadFieldFileUploadButtonStyle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>;
+        FileUploadFieldHiddenFileInputStyle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>>;
+        FileUploadFieldFileInfoTextStyle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
+        FileUploadFieldFileItemContainerStyle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+        FileUploadFieldRemoveButtonStyle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>>;
+        FileUploadFieldProgressBarContainerStyle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+        FileUploadFieldProgressBarStyle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+            $progress: number;
+        }>>;
+        FileUploadFieldProgressTextStyle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
+    };
+};
 export {};

package/dist/styledComponents.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as formik from "formik";
 import { useState } from "react";
 import styled from "styled-components";
@@ -456,3 +456,77 @@ export const SearchClearButton = styled.span `
 export const SearchInputContainer = styled.div `
   display: flex;
 `;
+// --> FileUploadField
+export const FileUploadButton = styled.button `
+  background-color: #ccc;
+  color: black;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 14px;
+`;
+export const HiddenFileInput = styled.input `
+  display: none;
+`;
+export const ProgressBarContainer = styled.div `
+  width: 120px;
+  height: 20px;
+  border-radius: 2px;
+  background-color: #b1b2b5;
+  position: relative;
+  margin-left: 10px;
+`;
+export const ProgressBar = styled.div `
+  width: ${(props) => props.$progress}%;
+  height: 100%;
+  background-color: #548088;
+  border-radius: 2px;
+  transition: width 0.2s ease;
+`;
+export const ProgressText = styled.span `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: white;
+  font-weight: bold;
+`;
+export const FileItemContainer = styled.div `
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+`;
+export const RemoveButton = styled.button `
+  margin-left: 10px;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+`;
+export const FileInfoText = styled.span `
+  margin-left: 10px;
+  font-size: 14px;
+  color: #555;
+`;
+export const FileUploadFieldContainer = styled.div ``;
+export const FileUploadField = ({ name, uploadedFile, handleFileUpload, value, setFieldValue, className, uploadProgress, handleRemoveFile, removeButton, uploadButtonText, infoText, }) => {
+    var _a, _b;
+    const uiSchema = {};
+    return (_jsxs(FileUploadFieldContainer, { className: className, children: [_jsxs("div", { children: [_jsx(FileUploadButton, { type: "button", onClick: () => { var _a; return (_a = document.getElementById(name)) === null || _a === void 0 ? void 0 : _a.click(); }, children: uploadButtonText !== null && uploadButtonText !== void 0 ? uploadButtonText : "Choose File" }), _jsx(HiddenFileInput, { id: name, name: name, type: "file", onChange: (event) => {
+                            const file = event.currentTarget.files[0];
+                            if (file) {
+                                handleFileUpload(file, setFieldValue);
+                            }
+                        } }), !value ? (_jsx(FileInfoText, { children: infoText !== null && infoText !== void 0 ? infoText : "No file chosen" })) : null] }), uploadedFile && value && (_jsx(FileItemContainer, { children: uploadProgress === 100 ? (_jsxs(_Fragment, { children: [_jsx("span", { children: uploadedFile.name }), _jsx(RemoveButton, Object.assign({ type: "button", onClick: () => handleRemoveFile(setFieldValue) }, ((_a = removeButton === null || removeButton === void 0 ? void 0 : removeButton.props) !== null && _a !== void 0 ? _a : {}), { children: (_b = removeButton === null || removeButton === void 0 ? void 0 : removeButton.content) !== null && _b !== void 0 ? _b : "X" }))] })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: uploadedFile.name }), _jsxs(ProgressBarContainer, { children: [_jsx(ProgressBar, { "$progress": uploadProgress }), _jsxs(ProgressText, { children: [uploadProgress, "%"] })] })] })) }))] }));
+};
+FileUploadField.styles = {
+    FileUploadFieldFileUploadFieldContainerStyle: FileUploadFieldContainer,
+    FileUploadFieldFileUploadButtonStyle: FileUploadButton,
+    FileUploadFieldHiddenFileInputStyle: HiddenFileInput,
+    FileUploadFieldFileInfoTextStyle: FileInfoText,
+    FileUploadFieldFileItemContainerStyle: FileItemContainer,
+    FileUploadFieldRemoveButtonStyle: RemoveButton,
+    FileUploadFieldProgressBarContainerStyle: ProgressBarContainer,
+    FileUploadFieldProgressBarStyle: ProgressBar,
+    FileUploadFieldProgressTextStyle: ProgressText,
+};

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import { FormikErrors } from "formik";
 import type { JSONSchema7, JSONSchema7Definition } from "json-schema";
 import React, { MouseEventHandler } from "react";
 export type FormProps<T> = React.PropsWithChildren<{
@@ -155,6 +156,7 @@ export type ComponentsType = {
     SearchInput: React.FunctionComponent<any>;
     SearchClearButton: React.FunctionComponent<any>;
     SearchInputContainer: React.FunctionComponent<any>;
+    FileUploadField: React.FunctionComponent<any>;
 };
 export declare enum ObjectFieldButtonPurpose {
     ADD = 0,
@@ -265,4 +267,25 @@ export type AddButtonProps = {
     onClick: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
     disabled: boolean;
 };
+export type FileUploadFieldProps = {
+    className: string;
+    name: string;
+    uploadedFile: {
+        name: string;
+    } | null;
+    handleFileUpload: (file: File, setFieldValue: (field: string, value: any, shouldValidate?: boolean) => Promise<void | FormikErrors<any>>) => Promise<void>;
+    value: any;
+    setFieldValue: (field: string, value: any, shouldValidate?: boolean) => Promise<void | FormikErrors<any>>;
+    uploadProgress: number;
+    handleRemoveFile: (setFieldValue: any) => void;
+    removeButton?: {
+        content: React.ReactNode;
+        props: {
+            style?: React.CSSProperties;
+            [key: string]: any;
+        };
+    };
+    uploadButtonText?: string;
+    infoText?: string;
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "0.21.3",
+  "version": "0.22.0",
   "description": "Formik form generation from json schema",
   "author": "Antti Vikman <antti.vikman@nolwenture.com>",
   "contributors": [