Bracketlab S3 file upload

Bracketlab S3 file upload is a library that provides functions to upload files to AWS S3 bucket. It is a wrapper around the AWS SDK for Typescript. It contains both a client and a server side implementation.

Installation

To integrate the lib into your project, use npm or yarn:

Using npm:

npm install bracketlab-s3-file-upload

Using yarn:

yarn add bracketlab-s3-file-upload

Quick Example

Concept

When there is a file to be uploaded in the form fields, we use the submitWithFiles function of the custom useFileUpload hook.

This function takes care of uploading the files to our Amazon AWS S3 bucket and then submits the form with the file URLs.

Usage

const [submitWithFiles] = useFileUpload<TUpdateUserPermissions>({
  options: {
    getFiles: (formValues) => {
      const files = formValues.companies?.flatMap((company) =>
        (company.contract?.files ?? []).map((file) => {
          return { ...file, id: company.companyId };
        })
      );
      return files || [];
    },
    setFiles: (formValues, files) => setFiles(formValues, files),
    callback: (formValues) => {
      updateUserPermissions.mutate({ ...formValues });
    },
  },
});

To use the submitWithFiles function, you need to pass the following parameters:

• options.getFiles: A function that receives the form values and returns an array of files to be uploaded. In this example, we are getting the files from the form values and returning them in the correct format.
• options.setFiles: A function that receives the form values and the files uploaded and sets the files in the form values. This is necessary to update the form values with the file URLs after the upload is complete.
• options.callback: A function that receives the form values and is called after the files are uploaded. In this example, we are calling the updateUserPermissions mutation with the updated form values.

In options.getFiles, it is possible to include an id property in the file object. This property is used to identify the file when setting it in the form values in options.setFile.

The reason for this id is that when we return an array of files in options.getFiles, we need to know which file belongs to which form field. This is especially important when we have multiple file upload fields in the form. The id field compensates the loss of context when we return an array of files.

Contributing

Contributors should adhere to guidelines such as clean, documented, and tested code, following the existing style, and updating the README as needed.

License

The library is available under the MIT License.