feat(components): Add maxFiles prop to InputFile

[taylorvnoj]

Motivations

In the process of building a component using InputFile to upload and display expanded FormatFile components, we discovered a limitation with setting a max_files validation.

While setting MAX_FILES = 10 validation via the InputFile onUploadComplete prop, we noticed that although the UI will only show max 10 files, any additional images that were selected are continuing to be uploaded to storage. We want to avoid that, and actually limit # of files that can be uploaded while using InputFile.

Changes

Added

An optional maxFilesValidation prop which is an object, consisting of maxFiles and numberOfCurrentFiles. This prop is being mapped to react-dropzone's maxFiles option via useDropzone.

Changed

When uploading more than allowed maxFiles, react-dropzone will fail all uploads and throw an error for every attempted file upload:

To avoid a potential long list of validation errors, we thought it best to group all maxFile errors into one InputValidation message.

This means that the validationErrors constant is now checking if the acc array already has a "too-many-files" error and if not, creating a new error object. Any other error code, like going beyond file size, will go into a different error object and surface as it's own validation error. File size validations are remaining the same (multiple may appear) because they are helpful in indicating which specific files are too large.

I've updated the InputFile tests, added a maxFiles test & added some info for the Docs page.

Testing

I've created a Max Files Limit story to test these changes.

Changes can be tested via Pre-release commented below

---

In Atlantis we use Github's built in pull request reviews.

[cloudflare-workers-and-pages[bot]]

Deploying atlantis with    Cloudflare Pages

Latest commit:	18e93c8
Status:	✅  Deploy successful!
Preview URL:	https://1c61edb7.atlantis.pages.dev
Branch Preview URL:	https://taylor-maxfiles.atlantis.pages.dev

View logs

[github-actions[bot]]

Published Pre-release for 6e14b32d5a326475566187872f9e4e695ec3c0f8 with versions:

  - @jobber/components@5.29.1-TAYLORmax-6e14b32.5+6e14b32d
  - @jobber/components-native@0.71.2-TAYLORmax-6e14b32.19+6e14b32d

To install the new version(s) for Web run:

npm install @jobber/components@5.29.1-TAYLORmax-6e14b32.5+6e14b32d

To install the new version(s) for Mobile run:

npm install @jobber/components-native@0.71.2-TAYLORmax-6e14b32.19+6e14b32d

[taylorvnoj]

@MichaelParadis we now have maxFilesValidation containing maxFiles and numberOfCurrentFiles.

While I was in there I added a file size validator story separate from the max files story & documentation updated.