feat: add much more customisable FileUpload component #713

karrui · 2024-05-09T11:30:34Z

This PR adds a new FileUpload component that is designed to supersede the Attachment component. This component is much more customisable if needed, and contains a few prop changes as compared to Attachment.

Closes #586 (above and beyond?)

Example usages can be seen in the stories, but replicated here for convenience:

Default usage (with rhf)

const DefaultUsage = () => {
  const { control } = useForm<{ files: File[] }>()

  return (
    <Controller
      control={control}
      name="files"
      render={({ field: { value, onChange, ...field } }) => (
        <FileUpload
          maxFiles={1} // Or more if you want multiple upload. Defaults to 1
          maxFileSize={1 * 1024} // In bytes
          accept="image/*" // Or use mime type and array, see https://zagjs.com/components/react/file-upload
          value={value}
          // Note use of onFileAccept instead of onChange
          // Also has `onFileReject` props for handling rejected files,
          // `onError` props for easy handling of error messages from the rejected files
          onFileAccept={({ files }) => onChange(files)}
          {...field}
        />
      )}
    />
  )
}

With parts ownself modify

export const WithParts = (args: FileUploadRootProps) => {
  return (
    <FileUpload.Root {...args}>
      <FileUpload.Dropzone>
        <FileUpload.DropzoneIcon />
        <FileUpload.Label />
        <FileUpload.DraggingLabel />
      </FileUpload.Dropzone>
      <FileUpload.Context>
        {({ acceptedFiles }) =>
          acceptedFiles.length !== 0 && (
            <FileUpload.ItemGroup>
              {acceptedFiles.map((file, index) => (
                <FileUpload.Item key={`${file.name}-${index}`} file={file}>
                  <FileUpload.ItemPreview type="image/*">
                    <FileUpload.ItemPreviewImage />
                  </FileUpload.ItemPreview>
                  <FileUpload.ItemName />
                  <FileUpload.ItemSizeText />
                  <FileUpload.ItemDeleteTrigger />
                </FileUpload.Item>
              ))}
            </FileUpload.ItemGroup>
          )
        }
      </FileUpload.Context>
      <FileUpload.ErrorText />
      <FileUpload.MaxSizeHelperText />
      {/* MUST be included or the upload dialog will not work */}
      <FileUpload.HiddenInput />
    </FileUpload.Root>
  )
}

better clarity

jia1 · 2024-05-13T07:00:00Z

react/src/Attachment/Attachment.tsx

+/**
+ * @deprecated Use `FileInput` component instead, as that is much more customisable.
+ */


Does this mean next time, folks who only want the default options got to use all those FileInput.* elements?

jia1 · 2024-05-13T07:59:52Z

react/src/Attachment/Attachment.tsx

@@ -119,6 +119,9 @@ export type AttachmentProps<Multiple extends boolean> =
    onRejection?: (rejections: FileRejection[]) => void
  } & AttachmentValueProp<Multiple>

+/**
+ * @deprecated Use `FileInput` component instead, as that is much more customisable.


Suggested change

* @deprecated Use `FileInput` component instead, as that is much more customisable.

* @deprecated Use `FileUpload` component instead, as that is much more customisable.

jia1 · 2024-05-13T08:30:32Z

react/src/FileUpload/FileUploadErrorText.tsx

+
+  return (
+    <chakra.div __css={styles.errorText} {...rest} ref={ref}>
+      <Icon as={BxsErrorCircle} />


Should all Icon have aria-hidden? Saw you had it for FileUploadDropzoneIcon

jia1 · 2024-05-13T08:34:47Z

react/src/FileUpload/useFileUpload.ts

+  const apiRef = useRef<Api<PropTypes>>()
+  const api = connect(state, send, normalizeProps)
+  apiRef.current = api
+  return api


How does apiRef get utilised / referred to if it isn't returned here?

jia1 · 2024-05-13T08:37:11Z

react/src/FileUpload/utils/getFileError.ts

+      return errorMessage
+    }
+    case 'FILE_TOO_SMALL': {
+      let errorMessage = 'This file is too small.'


When does this scenario happen...?

jia1 · 2024-05-13T08:57:06Z

react/src/FileUpload/utils/getReadableFizeSize.ts

+ * @param fileSizeInBytes the size of the file in bytes to be converted to a readable string
+ * @returns the human-readable file size string
+ */
+export const getReadableFileSize = (fileSizeInBytes: number): string => {


getReadableFileSize(0) returns NaN undefined, but Idk how far you want to go w.r.t. error handling cus setting maxFileSize as 0 is obv the OGP dev fault...

And I suppose technology is not that advanced yet - 1000 TB gives 1 undefined

jia1 · 2024-05-13T09:03:04Z

react/src/FileUpload/FileUpload.tsx

+  return (
+    <FileUploadRoot
+      {...props}
+      maxFiles={maxFiles}


The component (in storybook) silently rejects files when there are more number of files than allowed. Is this expected?

karrui added 18 commits May 8, 2024 16:26

feat: update Attachment stories to CSFv3

7e12bbe

feat: add initial FileInput components

6d93e6c

feat: make FileUpload labels more flexible

64c2934

feat: add display names to all FileUpload components

523104f

feat(ImagePreview): add error handling if item file is not image type

68fc41d

fix: use scale down object fit

94a9624

feat: handle file upload errors

7ae268e

fix: update label text when allowDrop is disabled

f338563

feat: add index for duplicate handling

cb87b97

fix: a11y fixes for file upload component

c393093

feat: rename to FileUploadItemErrorText

3781dad

better clarity

feat: allow value to be passed into FileUpload to make it controllable

f168d2d

fix: correctly name theme style prop

0a4bbff

feat: extract getFileError util fn

32015a4

feat: add ErrorText and HelperText sub components

16f8706

feat: add default FileUpload component for convenience

0d49832

feat: allow dropzone label to be changed if using default component

dbda891

fix: remove onChange prop, hide rejected file handling demo

b649f7b

karrui requested a review from jia1 May 9, 2024 11:33

jia1 reviewed May 13, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add much more customisable FileUpload component #713

feat: add much more customisable FileUpload component #713

karrui commented May 9, 2024 •

edited

Loading

jia1 May 13, 2024 •

edited

Loading

jia1 May 13, 2024 •

edited

Loading

jia1 May 13, 2024

jia1 May 13, 2024

jia1 May 13, 2024

jia1 May 13, 2024

jia1 May 13, 2024

jia1 May 13, 2024

	* @deprecated Use `FileInput` component instead, as that is much more customisable.
	* @deprecated Use `FileUpload` component instead, as that is much more customisable.

feat: add much more customisable FileUpload component #713

Are you sure you want to change the base?

feat: add much more customisable FileUpload component #713

Conversation

karrui commented May 9, 2024 • edited Loading

Default usage (with rhf)

With parts ownself modify

jia1 May 13, 2024 • edited Loading

Choose a reason for hiding this comment

jia1 May 13, 2024 • edited Loading

Choose a reason for hiding this comment

jia1 May 13, 2024

Choose a reason for hiding this comment

jia1 May 13, 2024

Choose a reason for hiding this comment

jia1 May 13, 2024

Choose a reason for hiding this comment

jia1 May 13, 2024

Choose a reason for hiding this comment

jia1 May 13, 2024

Choose a reason for hiding this comment

jia1 May 13, 2024

Choose a reason for hiding this comment

karrui commented May 9, 2024 •

edited

Loading

jia1 May 13, 2024 •

edited

Loading

jia1 May 13, 2024 •

edited

Loading