Add FinalFormFileSelect

packages/admin/admin-stories/src/admin/form/FileUpload.tsx

@@ -3,7 +3,6 @@ import { Card, CardContent, Grid } from "@mui/material";
 import { storiesOf } from "@storybook/react";
 import * as React from "react";
 import { Form } from "react-final-form";
-import { FormattedMessage } from "react-intl";
 
 function Story() {
     return (
@@ -27,10 +26,11 @@ function Story() {
                                     <CardContent>
                                         <Field
                                             name="uploadMultipleDisabled"
-                                            label="File upload (dropzone only, multiple disabled)"
+                                            label="File upload (dropzone only, multiple, max file size 5 MB)"
                                             dropzoneVariant="dropzoneOnly"
                                             component={FinalFormFileUpload}
-                                            multipleFiles={false}
+                                            maxSize={5}
+                                            multiple
                                         />
                                     </CardContent>
                                 </Card>
@@ -42,15 +42,8 @@ function Story() {
                                             name="uploadImages"
                                             label="File upload (button only, accept only images)"
                                             accept={{ "image/*": [] }}
-                                            maxSize={10}
                                             dropzoneVariant="buttonOnly"
                                             component={FinalFormFileUpload}
-                                            caption={
-                                                <FormattedMessage
-                                                    id="comet.finalformfileupload.maximumfilesize"
-                                                    defaultMessage="Maximum file size 10 MB"
-                                                />
-                                            }
                                         />
                                     </CardContent>
                                 </Card>

packages/admin/admin/src/form/FinalFormFileUpload.tsx

@@ -1,5 +1,5 @@
 import { Delete, Select } from "@comet/admin-icons";
-import { Button, Chip, ComponentsOverrides, FormHelperText, IconButton, Theme } from "@mui/material";
+import { Button, Chip, ComponentsOverrides, IconButton, Theme } from "@mui/material";
 import { createStyles, WithStyles, withStyles } from "@mui/styles";
 import clsx from "clsx";
 import * as React from "react";
@@ -72,8 +72,6 @@ const styles = ({ palette }: Theme) => {
 
 export interface FinalFormFileUploadProps extends FieldRenderProps<File[], HTMLInputElement> {
     dropzoneVariant: "dropzoneOnly" | "buttonOnly" | "default";
-    caption: React.ReactNode;
-    multipleFiles: boolean;
     accept: Accept;
     maxSize: number;
 }
@@ -82,11 +80,9 @@ const FinalFormFileUploadComponent: React.FunctionComponent<WithStyles<typeof st
     classes,
     disabled,
     dropzoneVariant,
-    caption,
-    multipleFiles = true,
     accept,
     maxSize = 50,
-    input: { name, onChange, value: fieldValue },
+    input: { onChange, value: fieldValue, multiple: multipleFiles },
 }) => {
     const onDrop = React.useCallback(
         (acceptedFiles: File[]) => {
@@ -103,7 +99,7 @@ const FinalFormFileUploadComponent: React.FunctionComponent<WithStyles<typeof st
 
     const maxFileSizeInBytes = maxSize * 1024 * 1024;
 
-    const { acceptedFiles, getRootProps, getInputProps, isDragReject } = useDropzone({
+    const { getRootProps, getInputProps, isDragReject } = useDropzone({
         onDrop,
         accept,
         disabled,
@@ -143,8 +139,7 @@ const FinalFormFileUploadComponent: React.FunctionComponent<WithStyles<typeof st
                     </Button>
                 )}
             </div>
-            {acceptedFiles.length > 0 && <div className={classes.fileList}>{files}</div>}
-            {caption && <FormHelperText>{caption}</FormHelperText>}
+            {fieldValue.length > 0 && <div className={classes.fileList}>{files}</div>}
         </div>
     );
 };