Open File Manager

Audience: Low-code Engineers

Skill Prerequisites: Actions, Forms, JavaScript

Opens a form's File Manager field in a popup, then stops. No further actions run. The user can upload files or pick files that are already in the field's folder. When they click Done, your JavaScript code gets the files they chose.

The File Manager field must be in the same form, with Display in Popup turned on. See File manager.

Typical Use Cases

• Let users pick an image from a folder with a button, instead of showing the File Manager in the form
• Fill a text field with the URL of the file the user picked
• Show a preview of the chosen image in the form

Don't use it to

• Upload a single file or several files with a normal field. Use a Single File Upload or Multi File Upload field instead.
• Work with files on the server, such as copying or deleting them. Use actions such as Copy File or Delete File instead.
• Run more actions after the popup opens. The action ends execution.

Related Actions

Action Name	Description
Execute Javascript Code And Stop Execution	Runs your own JavaScript in the browser and ends execution.
Open Form Popup And Stop Execution	Opens a whole form in a popup.
Copy File	Copies a file on the server, for example one the user picked.
Rename File	Renames a file on the server.
Delete File	Deletes a file on the server.

Input Parameter Reference

Parameter	Description	Supports Tokens	Default	Required
Select File Manager	The File Manager field to open. The list shows the File Manager fields of this form.	No	empty string	Yes
CallBack Javascript Code	JavaScript that runs in the browser when the user clicks Done. It gets the files and form objects. See What the code gets. Tokens aren't replaced here.	No	console.log(files);	No

What the code gets

Object	What it holds
files.selectedFiles	The files the user picked on the Browse Files tab. Each has fileId, name, size, fileUrl and extension.
files.filesInQueue	The files the user added on the Upload tab. Each has name, size, status and fileUrl. For a new file, fileUrl is a preview (a data URL), not a URL on the site.
files.lastModified	Only when Upload Multiple Files is off. The first file from the tab where the user clicked Done.
form	The form, for example form.fields.ImageUrl.value.

How it works

• The popup comes from the field. Its folder, file types, size limit and other options are the field's own settings. The action only opens it.
• The folder is the field's Upload to Folder. The Browse Files tab lists the files in it. If the user can't view that folder, the list is empty.
• Done doesn't upload. Files on the Upload tab are uploaded when the form is submitted, unless the field's Auto upload Files is on.
• Errors in the code are only logged. If the code throws, the error is written to the browser console, with the field name. The popup still closes.

Considerations

• Turn on Display in Popup. If it's off, the popup doesn't open and the browser console shows Please check the file manager settings.
• Final action. Actions placed after it in the same list never run, unless its condition is false. See Common Parameters.
• Mind how you show names. A file name comes from the user. Show it with textContent, not innerHTML, so it isn't run as HTML.
• Visible to users. The code runs in the browser. Don't put secrets in it.
• Not in APIs. The action opens a popup in the browser, so it isn't available in API endpoints. It's meant for forms.

Examples

tip

To understand how to use the below examples, please see Running Examples.

1. Put the picked file's URL in a field

Add this action to a button in a form that has a File Manager field named Images, with Display in Popup on. When the user picks a file and clicks Done, its URL is put in the ImageUrl field.

{
    "Title": "Open File Manager",
    "ActionType": "OpenFileManager",
    "Description": "Pick an image for the article",
    "Parameters": {
        "FileManagerId": {
            "Expression": "",
            "Value": "Images",
            "IsExpression": false,
            "Parameters": {}
        },
        "CallBack": "var file = files.selectedFiles[0];\nif (file) {\n    form.fields.ImageUrl.value = file.fileUrl;\n}"
    }
}

2. List the chosen files in the console

This action opens the Attachments File Manager field and writes the names of the picked and queued files to the browser console. It's a quick way to see what the code gets.

{
    "Title": "Open File Manager",
    "ActionType": "OpenFileManager",
    "Description": "Show the chosen files",
    "Parameters": {
        "FileManagerId": {
            "Expression": "",
            "Value": "Attachments",
            "IsExpression": false,
            "Parameters": {}
        },
        "CallBack": "console.log('Picked:', files.selectedFiles.map(function (f) { return f.name; }));\nconsole.log('To upload:', files.filesInQueue.map(function (f) { return f.name; }));"
    }
}

Revised 09/27/2026