Integrating a File Picker / Asset Manager

In addition to uploading new files, ContentBuilder allows users to select existing files from your server or storage. This is done by integrating a file picker or asset manager application that opens in a modal dialog.

Enabling File Picker

const builder = new ContentBuilder({
    container: '.container',

    // Opens the file picker for inserting images, videos, audio, or document links
    filePicker: 'assets.html',
    // You can replace this with your own file manager application,
    // or use the Files.js Asset Manager: https://innovastudio.com/asset-manager

    filePickerSize: 'large', // medium (default), large, fullscreen
});

The file picker opens in a modal (loaded as an iframe). This is a separate application where you can build your own custom file browser or use an existing asset manager. Users can browse and select files from your server or storage service.

How It Works

When a user selects a file in the file picker, the picker application must return the selected file URL back to ContentBox by calling:

builder.selectAsset(url); // url is the selected file URL

Where url is the path to the selected file (e.g., 'uploads/image.png' or 'https://yourdomain.com/media/video.mp4').

Example File Picker:

A simple example (assets.html) is included in the ContentBox package. This demonstrates how file selection works and shows the proper use of the selectAsset() method. Note that this is just a basic demonstration with selectable images, not a full file browsing system.

Recommended Asset Manager:

For a production-ready file management solution, you can use Files.js Asset Manager, which integrates seamlessly with ContentBox.

Custom Implementation:

You can build your own file picker application. The only requirement is that it must call builder.selectAsset(url) with the selected file URL when a file is chosen.

📢 Upgrade Note

For existing users: If you're currently using imageSelect, videoSelect, audioSelect, fileSelect, or mediaSelect parameters, they will continue to work without any changes. The new filePicker parameter is a simplified alternative that handles all media types with a single configuration. You can upgrade to the new approach at your own pace.