Merge pull request #32 from qoretechnologies/feature/file-form-field

File upload field

Author: Foxhoundn

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqraft",
-  "version": "0.6.12",
+  "version": "0.7.0",
   "description": "ReQraft is a collection of React components and hooks that are used across Qore Technologies' products made using the ReQore component library from Qore.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -111,10 +111,12 @@
     "classnames": "^2.2.6",
     "cronstrue": "^2.50.0",
     "epoch-timeago": "^1.1.9",
+    "filesize": "^10.1.6",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "polished": "^4.2.2",
     "react-color": "^2.19.3",
+    "react-dropzone": "^14.3.5",
     "react-markdown": "^9.0.1",
     "react-use": "^17.4.0",
     "scheduler": "^0.23.0",

src/components/form/fields/file/File.stories.tsx

@@ -0,0 +1,60 @@
+import { StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { useState } from 'react';
+
+import { StoryMeta } from '../../../../types';
+import { ReqraftFileFormField } from './File';
+
+const meta = {
+  component: ReqraftFileFormField,
+  title: 'Components/Form/File',
+  args: {
+    onChange: fn(),
+  },
+  render(args) {
+    const [value, setValue] = useState(args.value);
+    return (
+      <ReqraftFileFormField
+        {...args}
+        value={value}
+        onChange={(value) => {
+          args.onChange?.(value);
+          setValue(value);
+        }}
+      />
+    );
+  },
+} as StoryMeta<typeof ReqraftFileFormField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const WithSpecifiedExtensions: Story = {
+  args: {
+    options: {
+      accept: {
+        'image/png': ['.png'],
+        'image/jpeg': ['.jpg', '.jpeg'],
+        'application/pdf': ['.pdf'],
+      },
+    },
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    options: {
+      accept: {
+        'image/png': ['.png'],
+        'image/jpeg': ['.jpg', '.jpeg'],
+        'application/pdf': ['.pdf'],
+      },
+    },
+    value: {
+      name: 'MyFile.pdf',
+      content: 'test',
+      size: 28736,
+    },
+  },
+};

src/components/form/fields/file/File.tsx

@@ -0,0 +1,134 @@
+import {
+  ReqoreButton,
+  ReqoreControlGroup,
+  ReqoreH4,
+  ReqoreIcon,
+  ReqoreP,
+  ReqorePanel,
+} from '@qoretechnologies/reqore';
+import { IReqoreButtonProps } from '@qoretechnologies/reqore/dist/components/Button';
+import { IReqorePanelProps } from '@qoretechnologies/reqore/dist/components/Panel';
+import { filesize } from 'filesize';
+import { reduce, size } from 'lodash';
+import { useCallback, useEffect, useMemo } from 'react';
+import { Accept, DropzoneOptions, useDropzone } from 'react-dropzone';
+
+export interface IReqraftFileFormFieldValue {
+  name: string;
+  content: string;
+  size?: number;
+}
+export interface IReqraftFileFormFieldProps extends Omit<IReqorePanelProps, 'onChange'> {
+  value: IReqraftFileFormFieldValue;
+  onChange(value: IReqraftFileFormFieldValue): void;
+  readonly?: boolean;
+  options?: DropzoneOptions;
+  valueButtonProps?: IReqoreButtonProps;
+}
+
+export const ReqraftFileFormField = ({
+  value,
+  onChange,
+  options = {},
+  valueButtonProps = {},
+  ...rest
+}: IReqraftFileFormFieldProps) => {
+  const contentStyle: React.CSSProperties = useMemo(
+    (): React.CSSProperties => ({
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }),
+    []
+  );
+
+  const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
+    disabled: rest.disabled || rest.readonly,
+    maxFiles: 1,
+
+    ...options,
+  });
+
+  const extensions = useMemo(() => {
+    if (!options.accept) {
+      return [];
+    }
+
+    return reduce<Accept, string[]>(
+      options.accept,
+      (acc, ext) => {
+        return [...acc, ...ext];
+      },
+      []
+    );
+  }, [options.accept]);
+
+  const renderExtensions = useCallback(
+    (asString?: boolean) => {
+      if (size(extensions) === 0) {
+        return '';
+      }
+
+      if (asString) {
+        return extensions.join(', ');
+      }
+
+      return (
+        <ReqoreP intent='muted' size='small'>
+          {extensions.join(', ')}
+        </ReqoreP>
+      );
+    },
+    [extensions]
+  );
+
+  useEffect(() => {
+    if (acceptedFiles.length === 0) {
+      return;
+    }
+
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      onChange({
+        name: acceptedFiles[0].name,
+        content: reader.result as string,
+        size: acceptedFiles[0].size,
+      });
+    };
+
+    reader.readAsDataURL(acceptedFiles[0]);
+  }, [acceptedFiles]);
+
+  if (value) {
+    return (
+      <>
+        <input {...getInputProps()} />
+        <ReqoreButton
+          label={value.name}
+          minimal
+          intent='info'
+          icon='FileLine'
+          rightIcon='FileUploadLine'
+          badge={filesize(value.size || 0)}
+          description={`Click here to upload a different ${renderExtensions(true)} file`}
+          {...valueButtonProps}
+          {...getRootProps()}
+        />
+      </>
+    );
+  }
+
+  return (
+    <ReqorePanel contentStyle={contentStyle} {...rest} {...getRootProps()} size='huge'>
+      <input {...getInputProps()} />
+      <ReqoreControlGroup vertical horizontalAlign='center'>
+        <ReqoreH4 size='small'>
+          <ReqoreIcon icon='FileAddLine' size='small' /> Click or drop files here to upload
+        </ReqoreH4>
+        {renderExtensions()}
+      </ReqoreControlGroup>
+    </ReqorePanel>
+  );
+};

src/components/form/fields/long-string/LongString.tsx

@@ -1,5 +1,6 @@
 import { ReqoreTextarea } from '@qoretechnologies/reqore';
 import { IReqoreTextareaProps } from '@qoretechnologies/reqore/dist/components/Textarea';
+import { useCallback } from 'react';
 import { TFormFieldValueType } from '../../../../types/Form';
 
 export interface ILongStringFormFieldProps extends Omit<IReqoreTextareaProps, 'onChange'> {
@@ -14,15 +15,24 @@ export const LongStringFormField = ({
   onClearClick,
   ...rest
 }: ILongStringFormFieldProps) => {
+  const handleClearClick = useCallback(() => {
+    onClearClick?.();
+    onChange?.('');
+  }, [onClearClick, onChange]);
+
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+      onChange?.(event.currentTarget.value, event);
+    },
+    [onChange]
+  );
+
   return (
     <ReqoreTextarea
       scaleWithContent
       fluid
-      onClearClick={() => {
-        onClearClick?.();
-        onChange?.('');
-      }}
-      onChange={(event) => onChange(event.currentTarget.value, event)}
+      onClearClick={handleClearClick}
+      onChange={handleChange}
       rows={4}
       {...rest}
     />

yarn.lock

@@ -4782,6 +4782,11 @@ asynckit@^0.4.0:
   resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
+attr-accept@^2.2.4:
+  version "2.2.5"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.5.tgz#d7061d958e6d4f97bf8665c68b75851a0713ab5e"
+  integrity sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==
+
 available-typed-arrays@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz"
@@ -6608,6 +6613,13 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+file-selector@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-2.1.2.tgz#fe7c7ee9e550952dfbc863d73b14dc740d7de8b4"
+  integrity sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==
+  dependencies:
+    tslib "^2.7.0"
+
 file-system-cache@2.3.0:
   version "2.3.0"
   resolved "https://registry.npmjs.org/file-system-cache/-/file-system-cache-2.3.0.tgz"
@@ -6621,6 +6633,11 @@ filesize@^10.0.12:
   resolved "https://registry.npmjs.org/filesize/-/filesize-10.1.1.tgz"
   integrity sha512-L0cdwZrKlwZQkMSFnCflJ6J2Y+5egO/p3vgRSDQGxQt++QbUZe5gMbRO6kg6gzwQDPvq2Fk9AmoxUNfZ5gdqaQ==
 
+filesize@^10.1.6:
+  version "10.1.6"
+  resolved "https://registry.yarnpkg.com/filesize/-/filesize-10.1.6.tgz#31194da825ac58689c0bce3948f33ce83aabd361"
+  integrity sha512-sJslQKU2uM33qH5nqewAwVB2QgR6w1aMNsYUp3aN5rMRyXEwJGmZvaWzeJFNTOXWlHQyBFCWrdj3fV/fsTOX8w==
+
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz"
@@ -10178,6 +10195,15 @@ react-docgen@^7.0.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-dropzone@^14.3.5:
+  version "14.3.5"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.3.5.tgz#1a8bd312c8a353ec78ef402842ccb3589c225add"
+  integrity sha512-9nDUaEEpqZLOz5v5SUcFA0CjM4vq8YbqO0WRls+EYT7+DvxUdzDPKNCPLqGfj3YL9MsniCLCD4RFA6M95V6KMQ==
+  dependencies:
+    attr-accept "^2.2.4"
+    file-selector "^2.1.0"
+    prop-types "^15.8.1"
+
 react-element-to-jsx-string@^15.0.0:
   version "15.0.0"
   resolved "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz"
@@ -11658,6 +11684,11 @@ tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0:
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
+tslib@^2.7.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
+  integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
+
 tunnel-agent@^0.6.0:
   version "0.6.0"
   resolved "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz"