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 indexi
of the removed file will be added to the scope. -
onFilesAdded
: query, required. When this query is called theaddedFiles
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 theminSize
property of the File Button input. -
maxSizePerFile
: number | string, optional. This is the same as themaxSize
property of the File Button input.
Outputs
-
selectedFiles
: { url: string }[] | { name: string, type: string, data: string }[] -
invalid
: boolean