Toolbar Options

In the Toolbar Options tab you can:

• control individual settings that affect the top toolbar in the builder

• decide whether to hide the toolbar completely

The toolbar contains all the actions not related directly with content edition, like save, send a test or preview.

You can decide the inner elements from it, from hiding our brand to removing the save button, to create the builder version that better fits in your application.

Not enough? Remove the toolbar completely and offer all the actions with your own UI elements.

Remove Toolbar and Create Custom UI Elements

For example, in our MailUp App for Shopify, we hide the toolbar completely and control the builder (Show preview, Send test, Save) from buttons in the app UI (not in the builder). Here is how it looks.

If you decide to go this route, use the methods from this page to control the builder from your UI.

Understanding storage & content delivery options

When you configure a builder application, you have four options for image & file storage:

• Beefree SDK storage: unless you select another option, images will be hosted in Beefree SDK’s own AWS S3 bucket. for details about potential fees associated with this option.

• An existing builder application: to connect the selected application’s storage to an already existing application. After selecting this option the two applications will share their storage.

• Your own AWS S3 bucket: instead of using Beefree SDK’s AWS S3 bucket to store & deliver files, you can use your own. See .

• Your own file system: if your application already has a place where images and other assets are stored, you can leverage it. This option is only available on Beefree SDK paid plans. See using .

Custom File System Provider

Images vs. other files

End users can upload images, PDFs, and other documents to the builder. For instance, they can link a button to download a PDF report.

About Beefree SDK storage

How images are stored & delivered

Storage and delivery fees

• There are no charges for storing images & other documents.

• There are no charges for delivering images & other documents up to a total of 5TB of delivery traffic per 30-day period.

• Above 5TB of data traffic recorded in a 30-day period, you will be billed $0.01 per GB of data transferred.

Enabling the Move File Feature for Your File Manager

You can enable the move icon for files within the File manager. This move icon allows your end users to move their files between folders, locations, and so on within the File manger. They can access the move icon directly on the file within the File manager. The move icon is a folder with an arrow pointing right inside it. End users click this icon to initiate the process of relocating the corresponding file to a new destination.

If you are using the Beefree AWS S3 Bucket, take the following steps to enable this feature for your File manager.

Using the Beefree AWS S3 Bucket

If you are using your own AWS S3 bucket, take the following steps to activate the Move File feature:

1. Ensure that your FSP is updated to the latest version.

3. Locate the Move File configuration toggle.

4. Toggle the feature on.

The Move Feature will be available in your application.

FAQs on Beefree SDK Storage fees

Why do you charge for traffic when using BEE storage?

When you use the Beefree SDK S3 storage, your images are delivered via a Content Delivery Network (AWS Cloudfront), and AWS bills us based on the traffic generated by those assets when you send emails or publish web pages created with Beefree SDK. A large amount of monthly traffic (5TB) is included in your Beefree SDK paid subscription at no charge.

If you exceed the 5TB monthly traffic allotment, we ask you to cover the cost of the service (for a few of our customers that generate a lot of image data traffic, that cost has grown to exceed their Beefree SDK subscription fee). Also, note that this scenario is quite rare: it applies to less than 3% of our customers.

When does the traffic counter reset?

• If you’re on a paid plan, billed monthly, the counter will reset on the same days as your UIDs and CSAPI calls, i.e., on the day your subscription to Beefree SDK is renewed.

• If you’re on a paid plan, billed yearly, the counter will reset on the 1st day of each month.

• If you’re on a free plan, the counter will reset on the 1st day of each month.

You can always see when the current period starts and ends in your application details, in the Statistics widget:

I’m on an annual plan. If I exceed the traffic quota in a month, when will I be billed?

You’ll be billed annually by summing up any paid traffic you may have accumulated during the past 12 months, unless such total were to exceed $1,000. In that case, we will send you an invoice. The same is true for additional user fees (UIDs) and additional API calls.

Do I get notified when I’m about to exceed the quota?

I’m using Beefree SDK storage. What can I do to avoid getting charged?

I connected my application’s storage to an already existing one. How will the billing work?

All traffic generated is charged to the shared storage. E.g.: an Email Builder application shares its storage with a Popup and a Page applications. In this case, the Email Builder application will be charged for the traffic generated by Email + Popup + Page.

Are there any restrictions when connecting an application’s storage to an already existing one?

• It’s not possible to link a development app to a production app.

• An app can be linked to another just once.

• The same shared storage can be shared across different applications within the same subscription

Can I connect my dev app storage to a production app?

No, this is not possible. You can either connect production apps included in the same subscription or dev apps included in the same subscription.

Can I get a history of my monthly traffic usage?

Overview

Besides the client-side configuration parameters that you can set for your instance of Beefree SDK, you also can specify some server-side configuration options.

Access Server-side Configurations

To access server-side configurations, log into your and select the application that you wish to configure.

In the application’s details page, locate the area called Application configuration.

Manage roles is used to manage user roles. For details on this feature, see “user roles and permissions“.

Click on Open configuration to manage the server-side settings like:

• Toolbar options: affect the UI of the editor

• Storage options: determine where the File Manager will store & retrieve images

• Content options: define whether certain content elements (e.g. HTML block) are active or inactive

• Service options: define whether additional services (e.g. photo search) are active or inactive

Custom JavaScript

Enterprise customers can request to inject external JavaScript libraries, like FullStory or Heap, into Beefree SDK when the integration is initialized as part of the server-side configuration.

Custom JavaScript requires a complete technical evaluation by the Beefree SDK development team. The assessment will undergo security, technical and compatibility assessments.

How it Works

Contact our Sales team and ask to run a script to get started with custom JS libraries injection. Once you contact us, we will take the following steps to complete your request:

1. Our representative will forward your request to our development team

2. The development team will review the script and approve it

3. The script is enabled by our development team

Custom S3 Bucket is a Beefree application configuration feature that allows you to easily connect your own Amazon Web Services S3 bucket to your Beefree application.

By leveraging this feature, you will be able to store and manage your customers’ assets without having to build a new File System Provider, but rather by providing a compliant folder structure and filling out a simple form.

How are images stored?

Our default file system provider uses two first level folders to manage assets:

• Images folder – It defines where the user’s images will be stored.

• Thumbnails folder – Is used by our API to store the thumbnails of the uploaded images.

These folders can be root folders or can be part of a more complex directory structure.

A few notes and recommendations:

• These folders should not be parents/children between themselves.

• Their name is restricted by AWS standard naming restrictions.

• For performance reasons, you should use a dedicated bucket and place these folders in the root.

Shared Assets

As an additional configuration option, you can provide shared files to your users, something that we do in the free version of the Beefree editor at beefree.io. These images are shown to all your customers as read-only assets.

The most common use case is providing sample images for the user’s first experience with the editor. Other use cases include providing application-specific images or documents that must not be deleted by the user.

To use this option you need to set-up two additional folders:

• Shared images folder – This is the folder that your users will browse through the file manager.

• Shared thumbnails folder – While the user images thumbnails are created when the images are uploaded, there is no automatic thumbnail creation for shared images. You must provide your own thumbnails using these settings:

  • 200px as max. width/height (this guarantee a correct preview in the file manager)

  • Name: original_image_name.ext_thumb.png (so the thumbnail for cat.jpg must be cat.jpg_thumb.png)

  • PNG: use only PNG as image format

S3 configuration

This section discusses how you can configure your own custom S3 bucket within the Developer Console, and also provides an example JSON of the Permission policy.

Configure Access keys in the Developer Console

Prior to configuring your custom S3 bucket, ensure you configure Access keys in the Developer Console.

Take the following steps to configure Access keys in the Developer Console:

1. Log in to the Developer Console.

2. Navigate to the application you'd like to configure a custom S3 bucket for.

3. Click the Details button for that application.

4. Navigate to Application configuration and click View more.

   You will be redirected to Storage options.

5. Toggle on Configure your own S3 storage system to enable the option.

6. Complete the required fields.*

7. Click the Test S3 settings button.

*The following image shows an example of the required fields within the Developer Console for configuring your own S3 bucket:

Configure Access keys policy in AWS

The following JSON is of the Permissions policy assigned to the AWS user.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "CustomBucket01",
            "Effect": "Allow",
            "Action": "s3:ListBucket",
            "Resource": "arn:aws:s3:::the-bucket-name"
        },
        {
            "Sid": "CustomBucket02",
            "Effect": "Allow",
            "Action": [
                "s3:GetObject",
                "s3:PutObject",
                "s3:DeleteObject"
            ],
            "Resource": "arn:aws:s3:::the-bucket-name/content-path/*"
        }
    ]
}

Configure bucket permissions

File URL Generation Based on "Custom URL" Parameter

The URLs for accessing files in your S3 bucket vary depending on whether the "Custom URL" field is set in the Developer Console:

• If "Custom URL" is empty: URLs will follow this format:

  Copy

  https://<bucket-name>.s3.<region>.amazonaws.com/path/to/file.png

• If "Custom URL" is set (e.g., https://my-cdn/): URLs will be generated like this:

  Copy

  <custom-url>/path/to/file.png

Important Configuration Notes

1. Public Access:

   • For the generated URLs to work, the bucket’s permissions should allow public access to the files.

2. Using a CDN as "Custom URL":

   • If you’re using a CDN (e.g., CloudFront) in the "Custom URL" field, you can restrict the bucket's access to only the CDN. In this case, the bucket itself doesn't need to be publicly accessible, as access is controlled through the CDN.

Ensure that bucket permissions are configured appropriately based on the type of URL being generated.

Enabling the Move File Feature for Your File Manager

You can enable the move icon for files within the File manager. This move icon allows your end users to move their files between folders, locations, and so on within the File manger. They can access the move icon directly on the file within the File manager. The move icon is a folder with an arrow pointing right inside it. End users click this icon to initiate the process of relocating the corresponding file to a new destination.

If you are using a Custom AWS S3 Bucket, take the following steps to enable this feature for your File manager.

How to Enable the Move File Feature

Take the following steps to enable the Move icon for your end users:

1. Log in to the Developer Console.

2. Navigate to the application you'd like to activate it for.

3. Click on the Details button.

4. Select the View more option located under Application configuration.

5. Navigate to the Services section.

6. Toggle on the Enable moving files between folders in file manager option.

The Move file option will automatically become available for your end users.

How File Name Conflicts Are Handled

If a file an end user trying to move or copy has the same name as an existing file, the File Manager will show a pop-up asking how to handle the conflict.

The end user will have the following options:

1. Cancel: For this option, nothing will happen, and the operation will be stopped.

2. Keep Both: This option lets them keep both files. The new file will be saved with a slightly different name, adding a number at the end. For example, if the original file is called "pizza.jpg," the new one will be named "pizza_1.jpg."

3. Replace: Selecting this will replace the old file with the new one, meaning the existing file will be overwritten.

These options help them decide what to do when file names clash, ensuring they have control over how their files are managed.

Using a Custom AWS S3 Bucket

To implement the new Move File feature in your application, follow these steps to change your file path from the old format to the new format. This change is important because it allows the host application to enable the Move File feature within the File Manager without breaking old URLs. Here's how to make the transition:

1. Understand the Changes: The file paths will change from /your-path/UID/user-path/filename.jpg to /your-path/new-internal-id/random-path/filename.jpg. This new structure decouples the logical path you see in the File Manager from the physical path in the storage, supporting the "move file" feature. For example, you can move the file in the File Manager, and the URL will remain the same.

2. Activate Move Feature: Once you are onboarded, activate the Move Feature inside your SDK Console to utilize the new file paths. Follow the steps outlined in the previous section to complete this process.

Why This Change is Important

• Decoupling Logical and Physical Paths: The new path structure separates the logical path (what you see in the File Manager) from the physical path (where the file is stored). This allows for more flexibility and new opportunities for future features.

• Enable the Move File Feature: By adopting the new path structure, you can use the Move File feature in the File Manager, which allows you to move files without changing their URLs.

Impact on Existing Data

• Existing Paths: Existing paths are not affected. The task done was to collect paths in the new database and keep files where they are.

• Newly Uploaded Files: New uploaded files will be stored using the new path structure.

About the New Path

• Logical and Physical Path Separation: The new path structure decouples the logical path you see in the File Manager from the physical path in the storage. This supports the "move file" feature, allowing you to move files in the File Manager without changing their URLs.

• Changes: The key difference between the two paths is that the new path uses a random part to enhance security and reduce predictability, making it harder for unauthorized users to guess the URLs of stored files.

By following these steps, you can ensure a smooth transition to the new file paths and take full advantage of the Move File feature in your application.

Filling out the form to connect your AWS S3 bucket

Once you have set up a compliant folder structure, you can use the form in the Beefree SDK Console to connect your application. It’s one of the available server-side configurations for your Beefree application (Application details > Open configuration > Storage options).

This is a description of the form fields and what information you will need to provide in each of them:

Note: If you change the custom URL, the new URL is immediately used for all images.

Example using single folders in the bucket root:

Example using single nested folders:

Testing your settings

The button will become active once all required fields have been correctly filled out. It allows you to test your settings before saving the updated configuration. We recommend that you do so before saving any changes.

Preparing thumbnails

If you’ve just linked your custom bucket, you may find that you need to create your own thumbnails. Thankfully, this is an easy process.

For starters, the thumbnails in the File Manager are PNG files that are resized to 200×200 px.

Here is an example of thumbnail generation with image magick:

# convert one file
convert image1.jpg -resize 200x200 image1.jpg_thumb.png

# resize many files (WARNING this command overwrite files)
mogrify -resize 200x200  myimages/*jpg

# convert many files
mogrify -format png      myimages/*jpg

As a quick example, we’ll be using this custom bucket configuration:

• bucket_name : my-custom-bucket

• path_images : /path/to/images/

• path_thumbnails : /path/to/thumbnails/

…And starting the editor with this UID:

• uid : my-uid

When uploading image1.jpg in root dir, this key will be created in the custom bucket: s3://my-custom-bucket/path/to/images/my-uid/image1.jpg. Following that, a thumbnail will be generated with name image1.jpg_thumb.png with key: s3://my-custom-bucket/path/to/thumbnails/my-uid/image1.jpg_thumb.png.

And one more example:

When uploading image2.jpg in mydir inside the root dir, this key is created in the custom bucket: s3://my-custom-bucket/path/to/images/my-uid/mydir/image2.jpg. Similarly to above, a thumbnail will be generated with name image2.jpg_thumb.png with key: s3://my-custom-bucket/path/to/thumbnails/my-uid/mydir/image2.jpg_thumb.png.

Moving from the default S3 bucket

If your Beefree application is currently using the default S3 bucket, you wish to switch to your own bucket, and you have files that you want to transfer between the two, please please log into the Beefree SDK Console and submit a support ticket.

In this box, you can enable additional content blocks that will appear in the Content panel inside the editor.

Currently, you can manage these content blocks:

Available Content Blocks

Content options in Page Builder

If you’re configuring a Page Builder application, there are a few differences in what these blocks allow:

• the HTML Block also allows script and iframe tags;

• the Video block allows for video playback, either embedding a YouTube, YouTube Shorts, or Vimeo video or pointing to a hosted video (read more). Supported video formats are:

  • YouTube (16:9 aspect ratio)

    • Public Videos

    • Unlisted Videos

    • Videos starting at a certain time

  • YouTube Shorts (16:9 aspect ratio)

  • Vimeo

    • Public Videos

    • Unlisted Videos

    • Cinemascope (21:9 aspect ratio)

• the Menu block allows menu items to be set as “internal links,” pointing to any content block in the page that is configured as a “block identifier.”

There is also an additional option for turning on the Form block.

Please note that you need to implement one of the two methods indicated in this article for the Form tile to appear in the Content tab of the editor:

• The default form method is available for all plans, including free

• The content dialog method is available for paid plans only.

AMP Content

You can enable AMP blocks that will become available in the “Content” tab of your application's Email Builder. To enable this feature, toggle on Enable AMP Carousel in the AMP Content section of your application's configuration options.

We currently provide an AMP Carousel content block. After enabling the toggle, you will need to configure an AMP-compatible workspace.

Please note that AMP content is not available for Page Builder.

Free stock image gallery

A new feature becomes available in the File Manager when this is active.

It leverages an integration with popular stock photo services to offer users of the builder the ability to search through a large repository of high-quality images.

The images are free to use under the Creative Commons Zero (CC0) license.

Dark Mode Preview

When this is active, adds a toggle to the toolbar that allows a user to simulate the current design in dark mode.

Row background image

When this is active, advanced users of the builder can set an image as background when editing a row.

Background image (entire document)

When toggled on, this option scales the background image to fit the background dimensions of the entire document. This feature is best used with high-resolution images. More information .

Row background video

When this is active, advanced users of the builder can set a video as the background when editing a row.

Video picker

Requires “Row background video” to be enabled.

Enables the possibility for users to upload videos.

Free stock videos gallery

Requires “Row background video” to be enabled.

Enables a user to search for free stock videos to use in the File Manager.

Dynamic images

Do not stack on mobile

When enabled, adds a new row option to keep the horizontal layout on mobile devices. Useful when working with nav bars, icons, and other horizontal design elements.

Display conditions

Hide content on mobile or desktop

When enabled, it adds a new property in the “Content properties” section of any content block that supports it. This widget allows users to hide a content block either on mobile or on desktop devices.

Custom Social Icons

When you enable Custom Social Icons in the Social module, users will be able to upload their own social media icons as a new “Add a custom icon” feature will now be available in the Social content block’s property panel.

Undo and changes history

When enabled, it will give users the ability to Undo or Redo any changes that have been made to the email, including the ability to rewind and fast-forward to any point in their recent edit history.

Save rows feature

Import from external source in file manager

Enable image editor ('Apply effects & more') in image module

When enabled, an editor to apply image effects and transformations is available in the image module and row background images.

Reverse stacking on mobile

When enabled, adds a new row option to revert the stacking order of columns on mobile. Useful for layouts with alternating visual & text: applying it will ensure that, on mobile, images are consistently on top of their accompanying copy.

Disable anonymous usage tracking

We use third-party tools to aggregate anonymous usage data. It helps us develop a better product by assessing locations, devices, browsers, etc.

This can be turned off if necessary.

Disable the HTML sanitize service in the HTML content block

When you disable the HTML sanitization service, you’re removing all restrictions on what users of the builder can add inside the Custom HTML content block.

The sanitize service checks and ‘cleans up’ custom HTML, which can be an important measure to prevent the inadvertent introduction of unsafe content or the usage of HTML tags that may impact the message delivery rate. However, it can also have an undesired side effect when the host application needs custom HTML tags or attributes to manage specific scenarios.

Please use caution when disabling this service.

Specifically, when HTML sanitization is disabled, we strongly recommend that you add an alternative code review process. To that extent, the onChange event can help the host application intercept the content as soon as it is inserted, and perform a check on it before the user exits the builder. Alternatively, you can use the onSave event to trigger an HTML review on your end at the time the HTML is saved in your system.

The client-side configuration exposes a parameter to override the global setting in the control panel. You cannot disable the HTML sanitization service in the client-side configuration, due to security reasons, but you can enable it per user via the forceSanitizeHTML parameter.

Which tags are allowed by the sanitize service?

The sanitization service allows the following tags and attributes:

Allowed tags list:

a, abbr, acronym, address, b, bdo, big, blockquote, button, caption, center, cite, code, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, i, ins, kbd, label, legend, li, map, menu, ol, optgroup, option, p, pre, q, s, samp, select, small, span, strike, strong, sub, sup, table, tbody, td, textarea, tfoot, th, thead, u, tr, tt, u, ul, var, video, source, style, img, br, hr, area, base, basefont, input, link, meta, col, iframe

Allowed attributes list:

Activate custom limitations on File Manager

In this section, you can activate restrictions for the file manager:

• Specify which file formats your users can upload in File Manager.

• Set a maximum allowed size, different from the default of 20MB.

Please note that the first option will not ask for file extensions, but will instead present file categories such as image, video, text, etc. We have mapped these categories to the most used MIME types that can be referenced in HTML documents.

As you may have noticed, when you create a new Beefree application, it comes with a default cloud storage option for files (images or files that the message uses or links to). This approach may fit well for applications that offer content creation for the first time, especially if they don’t need to share these files with other areas of the host application.

If you do want users to be able to access the same image and file directories that they use elsewhere in your application, we have a solution.

We created a way to connect to a custom file system provider, allowing you to use your own file storage, no matter which technology you use. A custom file system provider is an API that will allow a Beefree SDK application to perform actions with files outside of the Beefree SDK system, connecting your file system to the .

It can be built with your preferred technology: just be sure to follow our instructions to ensure successful communication between the two systems.

Once successfully connected, when a user uploads a file or creates a new folder in the Beefree File Manager, this API will perform these actions in your storage, instead of our default cloud storage. Directories permissions, root directory to use, how thumbnails for images are generated, etc.: you decide.

Getting Started: Data Formats

In order to let your Beefree application consume your FSP (File system provider) API, you will need to provide a Base URL to reach the API.

Base URL: https://myfsp.com/path/to/your/base/endpoint

Note that:

• the Base URL must not end with a trailing slash (/)

• it must be hosted on the HTTPS protocol

The API uses JSON as the input and output data format: Responses are .

In the event of a successful response, the API returns a “success” status code (ex. 200 OK) and a JSON object such as the following:

In the event an unexpected error occurred during request processing (i.e. missing mandatory request data), the API returns an “error” status code and a JSON object such as the following:

Authentication

Authentication is managed using Basic Authentication type. The Beefree SDK system’s resource server works as a proxy for FSP (File system provider) and consumes FSP API endpoints adding the following fields to HTTP Request Headers. Please note that the API must use HTTPS to grant secure connections and safe data transfer.

Move Files in the File Manager

You can enable the move icon for files within the File manager. This move icon allows your end users to move their files between folders, locations, and so on within the File manger. They can access the move icon directly on the file within the File manager. The move icon is a folder with an arrow pointing right inside it. End users click this icon to initiate the process of relocating the corresponding file to a new destination.

Complete the following tasks to enable the move files feature for your custom FSP:

File System operations

This section will show samples of successful requests to FSP (File system provider) API. A response contains metadata about directory and files.

Metadata

In this section, we define the following types of metadata:

Common Meta

The following table lists the fields, descriptions, types and examples for the FSP API response common meta.

File-specific Meta

The following table lists the fields, descriptions, notes and examples for the FSP API response file-specific meta.

Directory specific Meta

The following table lists the fields, descriptions, notes and examples for the FSP API response directory-specific meta.

Listing Directories

Description: Use this to list the directories within the File manager.

Request

The following code shows an example request for listing directories.

Response

The following code shows an example response for listing directories.

Each resource returned by the API has a meta field with metadata. Directory content is returned into items field as array of metadata of contained resources.

Resource access notes

Some notes about resources access management in the previous example:

• /shared/ cannot be renamed, because it is contained in a ro directory

• /mydir/ cannot be renamed, because it is contained in a ro directory

• user cannot “CRUD” resources in /shared/, because it is ro

• user can “CRUD” resources in /mydir/, because it is rw

Listing Directory Content

Description: This response tells the user interface (UI) whether or not to show the move icon for files within the File manager.

Display the Move Icon

The can-move property controls whether or not the move button is visible within the user interface (UI).

Take the following steps to display the move icon for file within the File manager:

1. In the response of the listing endpoint, add a new field named can-move within the extra object for each file item.

2. The can-move field has a boolean value indicating whether the file can be moved. You can set this value to true or false.

Request

The following code shows an example request for listing directory content.

Response

The following code snippet shows an example of the can-move property set to true.

Response Metadata

The following table shows the response metadata and its corresponding type and description.

Listing for Move Dialog

Description: When the move button is pressed, the "move dialog" appears and the usual listing URL is called.

The following image shows an example of the move dialog. This dialog appears after the end user clicks on the move icon for a file. In the image, you can see that the move dialog includes a list of directories for the end user to select from in order to relocate the file.

The following code shows an example of the GET request that occurs when the move icon is pressed within the File manager and the "move dialog" appears. This GET request includes the x-bee-fsp-flags: move header, which is responsible for this behavior.

The move dialog only shows folders. The GET request will return the full response, including the folders and the files. However, the response will only show items with "mime-type": "application/directory" . The File System Provider recognizes this call by the x-bee-fsp-flags: move header.

For the move dialog to work effectively, it is important that you limit the size of the response. Ensure that the response to this request only contains folders and not any files.

Create a new directory

Description: Use this when creating a new directory within the File manager.

Request

The following code shows an example request for creating a new directory.

Response

The following code shows an example response for creating a new directory.

Create operation notes:

• in order for the create directory operation to succeed, the containing directory must exist, and the contained (new) directory must not exist

• directory names will match the following regular expression: [ a-zA-Z0-9._- \(\)]+

Deleting a directory

Description: You can only delete empty directories. Use this to delete a directory when it is empty.

Request

The following code shows an example request for deleting a directory.

Response

The following code shows an example response for deleting a directory.

Uploading a file

Description: Use this method when uploading a file to the File manager.

Request

The following code shows an example request for uploading a file.

Response

The following code shows an example response for uploading a file.

Managing a File Name Conflict

Handling Upload Conflicts

If an upload has a name conflict with an existing file in the target folder, the FSP must decide how to manage this conflict:

1. Return an Error: Notify the user about the conflict and do not proceed with the upload.

2. Ask the User: Prompt the user for instructions on how to handle the conflict.

3. Overwrite File: Replace the existing file with the new upload.

4. Rename and Complete: Complete the upload using a different name, usually by appending a suffix. Ensure the metadata is consistent with the newly created file.

Ask the user what to do: The FSP can prompt the user for action only if the conflict_strategy field is set to ask. In this scenario, the FSP must return a 3400 error code, instructing the Builder to display a dialog to the user.

Example response:

When the user clicks the keep or replace buttons, a new upload request is sent to the FSP with the conflict_strategy field set to either keep or replace.

If there's a filename conflict, the FSP should return a 3401 error code. This instructs the Builder to show a toast notification to the user and prompt them with a dialog.

Upload Operation Notes

Uploads are proxied by Beefree’s resource APIs, which enforce the maximum file size configured by the Console. Uploads from various sources are handled as follows:

• Image Editor: POST to /editor_images/{filename}. Filename is a UUID.

• Page Builder Favicons: POST to /favicon_images/{filename}.

• Stage: POST to /editor_images/{filename}.

Deleting a file

Description: Use this to delete a file within the File manager.

Request

The following code shows an example request for deleting a file.

Response

The following code shows an example response for deleting a file.

Implement PATCH Method

Description: When the move icon is clicked in the File manager, the File System Provider (FSP) will receive this call. It is a PATCH on the URL of the file to move.

An example of a conflict is when you are moving a file from one folder to another, but the destination folder has an existing file with the same name as the file being moved to that folder. For example, you want to move a pizza.jpg file to a folder that already contains a pizza.jpg file. In this scenario, there is a conflict because both files cannot have the same name.

The PATCH Method enables you set a conflict_strategy that resolves scenarios like these when they occur.

The following code shows an example of this method.

Move Response in Case of Success

Move Response in Case of Name Conflict

This is the response you will see in the event that a file was not successfully moved to a new location, and an error occurred.

In the event a name conflict occurs, the File manager displays a dialog to the user. You have three options to select from to resolve this conflict using the conflict_strategy which is passed to the FSP.

These three conflict resolution options are the following:

• cancel ( "conflict_strategy": "" ): nothing happens

• keep both ( "conflict_strategy": "keep" ): move the file, in order to keep both files our implementation appends a suffix to the new one. For example, the pizza.jpg file will become pizza_1.jpg ( _2 , _3 , ...)

• replace ( "conflict_strategy": "replace" ): move the file, it overwrites the old file with the new one

Status codes and Error codes

In case of errors, the API returns a JSON object structured like this:

Displaying thumbnails

Thumbnail generation is up to the developer of the file system provider.

The thumbnail field is optional, so if you don’t want a thumbnail for your file, do not pass the field and the Beefree system will show you a generic icon based on the mime type you passed.

The thumbnail image must be contained in a 200px by 200px virtual square (see pictures below).

Overview

Your users will have the ability to rewind and fast-forward to any point in their recent edit history. Once Undo is enabled in the , the application immediately begins tracking changes. Behind the scenes, this is accomplished via a new callback event – – which can also be used “stand-alone” without enabling Undo. No client-side configuration is required to use this feature. Continue reading to learn how to activate and use Undo. And if you can’t wait to try it yourself, you can immediately do so at

How it works

When changes are detected, a compact Undo widget displays in the bottom left corner of the stage:

The widget displays 3 actions:

• Undo and Redo arrows that offer the classic pattern to move back and forth between changes.

• A history icon that expands a timeline of the latest changes:

Timeline

The timeline allows the user to browse through the most recent changes.

All the steps display:

• An icon to identify the content element type (an image, text, etc.)

• A description of what changed, giving the new property value (if any)

• The exact time it happened

All these details provide enough information for users to understand what modification was applied, and, if desired, rewind the message to that state:

When the user selects a previous step, the content or row that triggered the history record displays as the selected item, providing further context.

The timeline for more recent changes is still available, allowing the user to move forward without losing any changes:

The Undo widget currently displays the last 15 edits in the timeline, but users can always rewind to the Message opened state to undo all changes since the message was initially opened in the builder.

We are also doing additional testing to see if the number of recent edits can be increased beyond 15 without negatively impacting the browser’s performance. We will update this section if the number is increased.

The last saved edits are only available at the session level, so they reset every time the builder is loaded. If you need to provide a complete message history, you can build a custom one based on the onSave and onChange events (see below).

Activating the Widget