A reusable file selection module

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:

FilesList Demo (1)

Public app: Retool

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

7 Likes

This is really nice, thank you for sharing!

1 Like

Thank you!

Looks great!

1 Like

Very nice, thanks for sharing!

1 Like