CE-1955 Break file-input into its own component, w/ support for FILE_UPLOAD adornment type, to specify drag&drop

src/qqq/components/forms/DynamicForm.tsx

@@ -19,21 +19,16 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {AdornmentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/AdornmentType";
-import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
 import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
-import {colors, Icon} from "@mui/material";
 import Box from "@mui/material/Box";
-import Button from "@mui/material/Button";
 import Grid from "@mui/material/Grid";
-import Tooltip from "@mui/material/Tooltip";
-import {useFormikContext} from "formik";
 import QDynamicFormField from "qqq/components/forms/DynamicFormField";
 import DynamicSelect from "qqq/components/forms/DynamicSelect";
+import FileInputField from "qqq/components/forms/FileInputField";
 import MDTypography from "qqq/components/legacy/MDTypography";
 import HelpContent from "qqq/components/misc/HelpContent";
-import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React from "react";
-import React, {useState} from "react";
 
 interface Props
 {
@@ -50,28 +45,6 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
 {
    const {formFields, values, errors, touched} = formData;
 
-   const formikProps = useFormikContext();
-   const [fileName, setFileName] = useState(null as string);
-
-   const fileChanged = (event: React.FormEvent<HTMLInputElement>, field: any) =>
-   {
-      setFileName(null);
-      if (event.currentTarget.files && event.currentTarget.files[0])
-      {
-         setFileName(event.currentTarget.files[0].name);
-      }
-
-      formikProps.setFieldValue(field.name, event.currentTarget.files[0]);
-   };
-
-   const removeFile = (fieldName: string) =>
-   {
-      setFileName(null);
-      formikProps.setFieldValue(fieldName, null);
-      record?.values.delete(fieldName)
-      record?.displayValues.delete(fieldName)
-   };
-
    const bulkEditSwitchChanged = (name: string, value: boolean) =>
    {
       bulkEditSwitchChangeHandler(name, value);
@@ -82,11 +55,6 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
       <Box>
          <Box lineHeight={0}>
             <MDTypography variant="h5">{formLabel}</MDTypography>
-            {/* TODO - help text
-        <MDTypography variant="button" color="text">
-          Mandatory information
-        </MDTypography>
-        */}
          </Box>
          <Box mt={1.625}>
             <Grid container spacing={3}>
@@ -113,52 +81,34 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
 
                      const labelElement = <DynamicFormFieldLabel name={field.name} label={field.label} />;
 
+                     let itemXS = 12;
+                     let itemSM = 6;
+
+                     /////////////
+                     // files!! //
+                     /////////////
                      if (field.type === "file")
                      {
-                        const pseudoField = new QFieldMetaData({name: fieldName, type: QFieldType.BLOB});
+                        const fileUploadAdornment = field.fieldMetaData?.getAdornment(AdornmentType.FILE_UPLOAD);
-                        return (
+                        const width = fileUploadAdornment?.values?.get("width") ?? "half";
-                           <Grid item xs={12} sm={6} key={fieldName}>
-                              <Box mb={1.5}>
-                                 {labelElement}
-                                 {
-                                    record && record.values.get(fieldName) && <Box fontSize="0.875rem" pb={1}>
-                                       Current File:
-                                       <Box display="inline-flex" pl={1}>
-                                          {ValueUtils.getDisplayValue(pseudoField, record, "view")}
-                                          <Tooltip placement="bottom" title="Remove current file">
-                                             <Icon className="blobIcon" fontSize="small" onClick={(e) => removeFile(fieldName)}>delete</Icon>
-                                          </Tooltip>
-                                       </Box>
-                                    </Box>
-                                 }
-                                 <Box display="flex" alignItems="center">
-                                    <Button variant="outlined" component="label">
-                                       <span style={{color: colors.lightBlue[500]}}>Choose file to upload</span>
-                                       <input
-                                          id={fieldName}
-                                          name={fieldName}
-                                          type="file"
-                                          hidden
-                                          onChange={(event: React.FormEvent<HTMLInputElement>) => fileChanged(event, field)}
-                                       />
-                                    </Button>
-                                    <Box ml={1} fontSize={"1rem"}>
-                                       {fileName}
-                                    </Box>
-                                 </Box>
 
-                                 <Box mt={0.75}>
+                        if(width == "full")
-                                    <MDTypography component="div" variant="caption" color="error" fontWeight="regular">
+                        {
-                                       {errors[fieldName] && <span>You must select a file to proceed</span>}
+                           itemSM = 12;
-                                    </MDTypography>
+                        }
-                                 </Box>
+
-                              </Box>
+                        return (
+                           <Grid item xs={itemXS} sm={itemSM} key={fieldName}>
+                              {labelElement}
+                              <FileInputField field={field} record={record} errorMessage={errors[fieldName]} />
                            </Grid>
                         );
                      }
 
-                     // possible values!!
+                     ///////////////////////
-                     if (field.possibleValueProps)
+                     // possible values!! //
+                     ///////////////////////
+                     else if (field.possibleValueProps)
                      {
                         const otherValuesMap = field.possibleValueProps.otherValues ?? new Map<string, any>();
                         Object.keys(values).forEach((key) =>
@@ -167,7 +117,7 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
                         })
 
                         return (
-                           <Grid item xs={12} sm={6} key={fieldName}>
+                           <Grid item xs={itemXS} sm={itemSM} key={fieldName}>
                               {labelElement}
                               <DynamicSelect
                                  fieldPossibleValueProps={field.possibleValueProps}
@@ -184,10 +134,11 @@ function QDynamicForm({formData, formLabel, bulkEditMode, bulkEditSwitchChangeHa
                         );
                      }
 
-                     // todo? inputProps={{ autoComplete: "" }}
+                     ///////////////////////
-                     // todo? placeholder={password.placeholder}
+                     // everything else!! //
+                     ///////////////////////
                      return (
-                        <Grid item xs={12} sm={6} key={fieldName}>
+                        <Grid item xs={itemXS} sm={itemSM} key={fieldName}>
                            {labelElement}
                            <QDynamicFormField
                               id={field.name}

src/qqq/components/forms/FileInputField.tsx

@@ -0,0 +1,156 @@
+/*
+ * QQQ - Low-code Application Framework for Engineers.
+ * Copyright (C) 2021-2024.  Kingsrook, LLC
+ * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
+ * contact@kingsrook.com
+ * https://github.com/Kingsrook/
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+import {AdornmentType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/AdornmentType";
+import {QFieldMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldMetaData";
+import {QFieldType} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QFieldType";
+import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
+import {Button, colors, Icon} from "@mui/material";
+import Box from "@mui/material/Box";
+import Tooltip from "@mui/material/Tooltip";
+import {useFormikContext} from "formik";
+import MDTypography from "qqq/components/legacy/MDTypography";
+import ValueUtils from "qqq/utils/qqq/ValueUtils";
+import React, {useCallback, useState} from "react";
+import {useDropzone} from "react-dropzone";
+
+interface FileInputFieldProps
+{
+   field: any,
+   record?: QRecord,
+   errorMessage?: any
+}
+
+export default function FileInputField({field, record, errorMessage}: FileInputFieldProps): JSX.Element
+{
+   const [fileName, setFileName] = useState(null as string);
+
+   const formikProps = useFormikContext();
+
+   const fileChanged = (event: React.FormEvent<HTMLInputElement>, field: any) =>
+   {
+      setFileName(null);
+      if (event.currentTarget.files && event.currentTarget.files[0])
+      {
+         setFileName(event.currentTarget.files[0].name);
+      }
+
+      formikProps.setFieldValue(field.name, event.currentTarget.files[0]);
+   };
+
+   const onDrop = useCallback((acceptedFiles: any) =>
+   {
+      setFileName(null);
+      if (acceptedFiles.length && acceptedFiles[0])
+      {
+         setFileName(acceptedFiles[0].name);
+      }
+
+      formikProps.setFieldValue(field.name, acceptedFiles[0]);
+   }, []);
+   const {getRootProps, getInputProps, isDragActive} = useDropzone({onDrop});
+
+
+   const removeFile = (fieldName: string) =>
+   {
+      setFileName(null);
+      formikProps.setFieldValue(fieldName, null);
+      record?.values.delete(fieldName);
+      record?.displayValues.delete(fieldName);
+   };
+
+   const pseudoField = new QFieldMetaData({name: field.name, type: QFieldType.BLOB});
+
+   const fileUploadAdornment = field.fieldMetaData?.getAdornment(AdornmentType.FILE_UPLOAD);
+   const format = fileUploadAdornment?.values?.get("format") ?? "button";
+
+   return (
+      <Box mb={1.5}>
+         {
+            record && record.values.get(field.name) && <Box fontSize="0.875rem" pb={1}>
+               Current File:
+               <Box display="inline-flex" pl={1}>
+                  {ValueUtils.getDisplayValue(pseudoField, record, "view")}
+                  <Tooltip placement="bottom" title="Remove current file">
+                     <Icon className="blobIcon" fontSize="small" onClick={(e) => removeFile(field.name)}>delete</Icon>
+                  </Tooltip>
+               </Box>
+            </Box>
+         }
+
+         {
+            format == "button" &&
+               <Box display="flex" alignItems="center">
+                  <Button variant="outlined" component="label">
+                     <span style={{color: colors.lightBlue[500]}}>Choose file to upload</span>
+                     <input
+                        id={field.name}
+                        name={field.name}
+                        type="file"
+                        hidden
+                        onChange={(event: React.FormEvent<HTMLInputElement>) => fileChanged(event, field)}
+                     />
+                  </Button>
+                  <Box ml={1} fontSize={"1rem"}>
+                     {fileName}
+                  </Box>
+               </Box>
+         }
+
+         {
+            format == "dragAndDrop" &&
+            <>
+               <Box {...getRootProps()} sx={
+                  {
+                     display: "flex",
+                     alignItems: "center",
+                     justifyContent: "center",
+                     width: "100%",
+                     height: "300px",
+                     borderRadius: "2rem",
+                     backgroundColor: isDragActive ? colors.lightBlue[50] : "transparent",
+                     border: `2px ${isDragActive ? "solid" : "dashed"} ${colors.lightBlue[500]}`
+                  }}>
+                  <input {...getInputProps()} />
+                  <Box display="flex" alignItems="center" flexDirection="column">
+                     <Icon sx={{fontSize: "4rem !important", color: colors.lightBlue[500]}}>upload_file</Icon>
+                     <Box>Drag and drop a file</Box>
+                     <Box fontSize="1rem" m="0.5rem">or</Box>
+                     <Box border={`2px solid ${colors.lightBlue[500]}`} mt="0.25rem" padding="0.25rem 1rem" borderRadius="0.5rem" sx={{cursor: "pointer"}} fontSize="1rem">
+                        Browse files
+                     </Box>
+                  </Box>
+               </Box>
+               <Box fontSize={"1rem"} mt="0.25rem">
+                  {fileName}&nbsp;
+               </Box>
+            </>
+         }
+
+         <Box mt={0.75}>
+            <MDTypography component="div" variant="caption" color="error" fontWeight="regular">
+               {errorMessage && <span>{errorMessage}</span>}
+            </MDTypography>
+         </Box>
+      </Box>
+   );
+}