Skip to content

File Manager Preferences

The fileManagerPreferences object adjusts how the built-in File Manager opens and behaves. Three settings are available: the default file view, the Pexels stock photo integration, and a cap on batch uploads.

How to set your preferences

Include a fileManagerPreferences object inside your TOPOL_OPTIONS configuration. All your custom settings go inside this object.

ts
 fileManagerPreferences: {
   // your custom options here
},

Set default file view (list or tiles)

The File Manager shows files and folders in a List view by default. The buttons in its top-right corner switch between List and Tiles view at any time:

File view options

The default view is set to List view. If you'd prefer to see the Tiles view first by default, specify the defaultTilesView option in the fileManagerPreferences object and set it to true.

ts
 fileManagerPreferences: {
  defaultTilesView: true, // true = tiles view, false = list view
},

INFO

Tiles view is skipped in folders holding 500 or more items, which open as a list regardless of this setting so that large folders stay responsive.

Hide Pexels integration

By default, the File Manager comes with a built-in integration to Pexels, a free stock photo library. This integration allows users to search and add high-quality images directly from within the editor.

File view options

If you'd like to hide this integration, specify the hidePexelsIntegration option in the fileManagerPreferences object and set it to true.

ts
 fileManagerPreferences: {
  hidePexelsIntegration: true, // true = hide, false = show
},

Limit the number of files uploaded at once

By default, users can select and upload an unlimited number of files at once through the File Manager. In some cases bulk uploads can cause issues, for example when your backend proxies storage requests to a service with rate limits.

The maxUploadingFiles option sets a hard cap on how many files can be uploaded in a single batch. When a user selects more files than the allowed limit, only the first N files are uploaded and a notification is shown informing the user that the limit was reached.

To enable this, specify the maxUploadingFiles option in the fileManagerPreferences object and set it to a positive integer:

ts
 fileManagerPreferences: {
  maxUploadingFiles: 5, // allow up to 5 files per upload
},

Example: restrict to single-file uploads

ts
 fileManagerPreferences: {
  maxUploadingFiles: 1, // only one file can be uploaded at a time
},

When maxUploadingFiles is set to 1, the file picker automatically switches to single-file selection mode, so users cannot select multiple files in the browser dialog.

When maxUploadingFiles is set to 2 or higher, the file picker remains in multi-select mode, but only the allowed number of files is uploaded. If the limit is exceeded, the user sees a notification like:

"Only 5 out of 12 files were uploaded due to the upload limit."

WARNING

A value of 0 is treated as 1, so this option cannot be used to switch uploading off entirely.

Preventing file deletion

Whether a user can delete files and folders is controlled by a permission rather than a File Manager preference. To hide the delete button, set canRemoveFiles to false via the permissions option. See Roles and Permissions for details.

Three top-level options affect the File Manager but sit outside fileManagerPreferences. imageMaxSize caps the size of a single file in bytes (default 2 MB), which is a different limit from maxUploadingFiles and its file count. enableFileManagerInGif makes the File Manager available for GIF blocks. customFileManager hands file selection to your own application, which makes all the preferences above irrelevant. See Custom File Manager.