Update usage.mdx with note on maxFileSize prop

[FranticSoft]

This updates the FileUpload component docs with a note mentioning a quirk in the component that could be perceived as a bug.

Maybe if i have some spare time I'll write a new feature into the component that throws a toast or some other error telling you if a file is too big for the maxFileSize.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 3453aa9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

@FranticSoft is attempting to deploy a commit to the saas-js Team on Vercel.

A member of the Team first needs to authorize it.

[Pagebakers]

It'd probably be a good idea to add a new section under multiple files that documents onFilesChange

eg:

Listening for changes

The onFilesChange handler will trigger whenever the files have changed. The files parameter contains both acceptedFiles and rejectedFiles, which can be useful for debugging.

import { Text, HStack, Button } from '@chakra-ui/react'
import {
  FileUpload,
  FileUploadTrigger,
  FileUploadDropzone,
} from '@saas-ui/file-upload'

export default function MultipleFiles() {
  return (
    <FileUpload
      /* Remove `getRootNode` in your code, only required for this example */
      getRootNode={getRootNode}
      maxFileSize={1024 * 1024}
      maxFiles={10}
      onFilesChange={(files) => {
          console.log(files.acceptedFiles, files.rejectedFiles)
        }}
      accept="image/*"
    >
      {({ files, clearFiles }) => (
        <FileUploadDropzone>
          <Text fontSize="sm">Drag your image(s) here</Text>
          {!files?.length ? (
            <FileUploadTrigger as={Button}>Select image(s)</FileUploadTrigger>
          ) : (
            <HStack>
              <Text fontSize="sm">{files.length} selected</Text>
              <Button
                onClick={(e) => {
                  e.stopPropagation()
                  clearFiles()
                }}
              >
                Clear
              </Button>
            </HStack>
          )}
        </FileUploadDropzone>
      )}
    </FileUpload>
  )
}