A reusable file selection module

[vangelov]

While Retool already has a multiple file selection button, in order to improve the UX, you'd also want to:

• List the selected files
• Allow the user to remove files
• Preview previously uploaded files

I was curious if it's possible to extract this logic into a reusable module that you can use in any form that needs multiple files.

Here's a video of using the module with a sample user profile form:

Public app: https://vladi.retool.com/embedded/public/794d76dd-44dc-4d99-afa6-14c963d8e387

Demo source code: FilesListDemo.json (190.0 KB)

One caveat is that due to a bug in Retool ([BUG] Module's inputs do not work when inside a form - #2 by vangelov) when using modules in a form you have to the parameters using a transformer.

Only the module source code: FilesList.json (49.5 KB)

Module API

Inputs

• label: string, required

• caption: string, optional

• onFileRemoved: query, required. When this query is called the index i of the removed file will be added to the scope.

• onFilesAdded: query, required. When this query is called the addedFiles array will be part of the scope. Each array item contains the following properties:

  • name: string

  • data: string. Contains the base64-encoded data of the file's contents

  • type: string

• urls: string[], optional. Contains the urls of any previously uploaded files.

• minFiles: number, optional. The minimum amount of files that the user can select.

• maxFiles: number, optional. The maximum amount of files that the user can select.

• minSizePerFile: number | string, optional. This is the same as the minSize property of the File Button input.

• maxSizePerFile: number | string, optional. This is the same as the maxSize property of the File Button input.

Outputs

• selectedFiles: { url: string }[] | { name: string, type: string, data: string }[]

• invalid: boolean

[stevenhdsdoor]

This is really nice, thank you for sharing!

[vangelov]

Thank you!

[njstager]

Looks great!

[ernestp]

Very nice, thanks for sharing!