Filer Folders

Overview

Filer folders are folders that are assigned to your Bento site and used to store content that can be added to your Bento pages. One of the best things about filer folders is that all content is hosted by PBS so you don't need to worry about storage space! 

Filer folders are site based which means that when you create a folder on your Bento site, everyone who has access to your site can access the content. Be sure to check your permissions when using filer folders.

Content that can be stored 

Almost any type of content, including images, PDFs, CSS, Javascript, and audio files can be stored in filer folders and all content can be used an infinite number of times on your Bento pages. 

How to view filer folders

Filer folders can be viewed in two different layouts:

1. grid (displays by default)
2. detail

To switch between the two layouts, click the layout buttons located in the top right side of your filer folder dashboard.

Pagination

Filer screens do not have a pagination feature. All files in each folder can be viewed by simply scrolling down the page. For folders with a large number of files, use the search feature to find a file. 

Breadcrumbs

Breadcrumbs are the markers at the top of the page that orient you to your current location in your filer folders.

• Each folder level is separated by a forward slash ( / ) and displays the number of folders and files contained within (Figure 1.1).
• The current folder being viewed is underlined with the number of folders and files in parentheses (Figure 1.2). 
• The total number of items in the folder being currently viewed displays to the right (Figure 1.3).
• The files contained in the active folder display below (Figure 1.4). If a folder contains no files or folders, a message stating, "Nothing to show" displays on the page.

Figure 1

• To navigate to a different folder, simply click the name of the folder you want to access. To go up a level, click the upward-facing arrow on the far left of the breadcrumbs (Figure 2).

Figure 2

Sorting

The Sort By menu allows you to sort your files in the following ways. Click an option to sort one way then click the same option again to sort in the opposite direction. For instance, click Size to sort by largest files first then click Size again to reverse the order, listing the smallest files first. 

 View a quick Sort by Size demo

Viewing file information

Each file and folder in your Filer Folders contains information that is displayed on the right side of the page when each element is selected. 

Folders

Each folder that is added to your filer folders automatically generates the following details that display on the right side of the screen:

To view folder details:

• Click the folder to select it (Figure 1.1).
• The folder details display on the right side of the page (Figure 1.2), including:
  • folder name
  • number of files in the folder
  • name of the person who created the folder
  • last modified date and time

Figure 1

Files

Each file that is added to your filer folders automatically generates the following details that display on the right side of the screen:

• File preview
• File name
• Upload date
• File size
• Name of person who uploaded the file
• File dimensions
• Default alt text
• Caption

To view the file details:

• Click the file to select it (Figure 1.1).
• View the file details on the right side of the page (Figure 1.2).

Figure 1

• Click the file name to view the file in its original size (Figure 2).

Figure 2

• The file opens in its original size in a new tab (Figure 3). Close the tab to return to your Bento console.

Figure 3

Keyboard shortcuts

Bento allows the use of typical keyboard shortcuts. Below are the keyboard shortcuts you can use when working with filer folders. 

Windows / Linux

macOS

Actions menu

The following actions can be taken with your folders and folder content.

How to create a filer folder

Organizing your folders by content type or subject matter makes it easy to retrieve content then add it to the pages of your site. For example, create a folder called "Blogs" for all of your blog content or a folder called "Homepage" for all of the content you are going to use on your site's homepage. A folder named "Images" could hold all of your site images.

When creating folders, be aware of your folder structure. Folders can be created at the root of your site or as subfolders under other folders. 

This section shows how to create filer folders.

• Check the breadcrumbs at the top to be sure you are creating the new folder in the intended location (Figure 1.1).
• To the right of the Actions menu, click the folder icon (Figure 1.2).

Figure 1

• In the Folder Name textbox, type a name for your new folder (Figure 2.1). Choose a name that is relevant to the type of content, or subject matter of content, that you are adding to the folder.  For instance, for images that you'll use in your blog posts, you may want to create a folder called Blog Images. 
  • You cannot have more than one folder with the same name. If the name you select is already in use, the tool will prompt you with an error. 
• Click Create (Figure 2.2).

Figure 2

• A confirmation displays briefly in the top part of the page, letting you know the folder has been successfully created (Figure 3.1).
• The new folder displays in its assigned location (Figure 3.2). You can now begin adding content to the folder.

Figure 3

• Once your folder has been created, select the folder by clicking it (Figure 4.1).
• The folder details display on the right side of the page (Figure 4.2), including:
  • folder name
  • number of files in the folder
  • name of the person who created the folder
  • last modified date and time

Figure 4

How to upload a file

Files can be uploaded to your filer folders in two ways:

• Upload button - Click Upload and search your computer for files to add
• Drag and drop - Click and drag files from your computer to the Upload section

This section illustrates how to add a single or multiple files to a newly created or existing folder.

• Check the breadcrumbs at the top to be sure you are adding the new folder in the intended location (Figure 1.1).
• On the right side of the page, click Upload or drag and drop a file (or multiple files) from your computer (Figure 1.2). The example below illustrates how to upload files using the Upload button. 

Figure 1

• Your computer's file structure displays. Navigate to the file(s) you want to add and click Open* (Figure 2).

* These steps may be different depending on your operating system. 

Figure 2

• A progress bar displays at the top of the screen, updating the progress of the uploading file(s) (Figure 3). 

Figure 3

• A notification displays in green at the top, indicating that the image(s) has successfully loaded (Figure 4.1).
• The image(s) displays in the body of the page (Figure 4.2).

Figure 4

How to copy files and folders

Copy files and folders using the steps below.

• From your filer folders, click the file you want to copy (Figure 1.1).
• Click the Actions menu at the top of the page (Figure 1.2).

Figure 1

• From the Actions menu, click Copy (Figure 2).

Figure 2

• Open the folder to which you want to copy the file by double clicking the name of the folder (Figure 3). 

Figure 3

• The location to where the file will be copied displays in the breadcrumbs at the top of the page (Figure 4.1).
• Click the Actions menu (Figure 4.2).

Figure 4

• From the Actions menu, click Paste (Figure 5).

Figure 5

• A notification displays at the top of the page, confirming that your file has been copied to the folder (Figure 6.1).
• Click the file to display its details (Figure 6.2).
• The file details display on the right side of the page (Figure 6.3).

Figure 6

How to move files and folders

To move files and folders, use the cut selection feature, available in the Actions menu. When files are moved, the files that have already been added to pages on your site remain unaffected. 

• Select the file or folder that you want to move (Figure 1).

Figure 1

• Click the Actions dropdown menu (Figure 2.1) and click Cut selection (2.2).

Figure 2

• Open the folder to which you want to move the item (Figure 3.1).
• You have two options to choose from to paste the item: 
  1. Right click anywhere on the screen and click Paste (Figure 3.2)
  2. Click the Actions menu and click Paste (Figure 3.3)

Figure 3

• A green notification displays at the top of page stating the item has been moved to its new location (Figure 4.1).
• The item displays in its new location (Figure 4.2). The item is no longer available in its original location. To move it back to its original location, follow the same steps.

Figure 4

How to rename a folder or file

You are able to rename folders and files. The example below demonstrates how to rename a folder.

• From either the grid or detail view, right click on the folder you want to rename (Figure 1.1).
• From the menu, click Rename selection (Figure 1.2).

Figure 1

• In the textbox provided, type the name of the new folder (Figure 2.1). There are no character requirements but use best practices when naming items in your Bento site.
• Click Rename (Figure 2.2).

Figure 2

• The folder displays with its new name (Figure 3.1).
• Click the folder to display folder details on the right side of the page (Figure 3.2).

Figure 3

How to search filer folders

The search feature allows you to search your entire filer library or a single folder by keyword or file type. Your entire site is searched by default but you can make sure you're searching the entire site by starting your search in your root directory. To search a single folder on your site, open the folder that holds the file for which you're searching.

The same search functionality is available to search items in your Trash folder.

Search a single term or multiple terms separated by the following:

• Space ( ) 
• Underscore ( _ )
• Hyphen ( - )
• Comma ( , )

Narrow your search results by enclosing your search term(s) in double quotes. 

• Check the breadcrumbs to verify you are searching in the correct place (Figure 1.1). The entire site is searched by default; if the checkbox next to Search current folder only is checked, only the folder currently being viewed is searched. 
• In the search textbox located in the upper left side of the screen, type search keywords (Figure 1.2).
• Click the magnifying glass icon or press Enter on your keyboard to begin the search (Figure 1.3).
• To cancel the search and return to the normal folder view, click the grey x located to the left of the magnifying glass icon (Figure 1.4).

Figure 1

How to add filer content to your website

To help centralize your Bento content, we recommend that you keep content such as attachments, code, and images in filer folders. We also recommend that you name and arrange your folders by file type or subject or whatever is easiest for you to quickly access the files. Both filer and Media Manager content can be added to any Bento component.

The following section demonstrates how to retrieve a file from a filer folder and place it on your Bento site. In the example below, we are adding an image from our filer folders to a carousel component.

• After you've added the component to your page, hover your mouse over the image placeholder and click Choose Asset (Figure 1).

Figure 1

• When the modal displays, click Site Files to add a file from your filer folders or Media Manager to add a file from the Media Manager library (Figure 2.1). To demonstrate adding a file from filer folders, we are clicking Site Files. 
• If the file you want to use has not yet been uploaded, click Upload to upload the file to your filer folders (Figure 2.2). 
• If the file you want to use has already been uploaded, click the folder that holds the content you want to add or the file that you want to add (Figure 2.3).
  • In this example we are clicking on the folder that contains the file we want to add.

Figure 2

• Click the file you want to use (Figure 3.1).
• Click Add selected (Figure 3.2).

Can't find what you are looking for and need to add content to a filer folder? Learn how to add content to a filer folder

Figure 3

• The image displays on the page (Figure 4).

Figure 4

Images

All images in filer can be assigned caption and ALT text. The assignments convey to all components to which the image is added. 

How to delete files and folders

Deleting files and folders does not mean they are gone forever. When you delete an item, the item is moved to the Trash section of Filer. From there, you can recover deleted files. You can also search for files in your Trash section. Learn about the search feature

• Click the files and folders you wish to delete (Figure 1.1). Press and hold your Shift or CMD key to select multiple files and folders.
• The number of items selected displays to the left of the Actions menu (Figure 1.2).
• Once you've selected the files and folders you'd like to delete, you can do one of the following to bring up the Actions menu: 
  • Right click anywhere on the screen 
  • Click the Actions menu (Figure 1.3)

Figure 1

• When the menu displays, click Delete files (Figure 2).

Figure 2

• When the modal displays, click Yes to continue with the deletion (Figure 3). 

Figure 3

• An alert confirming the deletion of the file displays at the top of the page (Figure 4.1).
• Click the Trash link at the top of the page to view or restore the deleted files (Figure 4.2).

Figure 4

How to restore a deleted file

Once you've deleted a file or a folder, you can restore it by using the Restore feature in the Trash section of Filer. A restored file is placed back in the same folder from which it was originally removed. To move the file to another location, use the copy or cut feature. View the Actions menu

• At the top of the page, to the right of Site Files, click Trash (Figure 1).

Figure 1

• Click the item or items you want to restore (Figure 2). 

Figure 2

• The number of selected items displays to the left of the Actions menu (Figure 3.1).
• Right click anywhere on the screen or click the Actions menu (Figure 3.2)
• When the menu displays, click Restore (Figure 3.3).

Figure 3

• When the modal displays to confirm that you want to restore the file, click Yes to proceed with the restoration (Figure 4). 

Figure 4

• A message displays at the top of the page, confirming the files have been restored and removed from the Trash section (Figure 5.1).
• Click Site Files to navigate to your filer folder root directory (Figure 5.2). 

Figure 5

How to replace a file

Important notes about replacing a file:

• Only image files can be replaced
• Replacing a file is irreversible
• All pages and global components are affected
• The original file and replacement file must have different file names

Replacing an image file on your Bento site is a permanent action. Once replaced, the old file no longer exists on your Bento site and you must upload the file again. The new file displays everywhere the old one displayed. If you want to retain the same file name, upload the new file and then use the rename feature to change the file name. If you try to replace an image with an image that has the same name, you will encounter an error. 

This section shows you how to replace a file on your Bento site.

You can replace an image from the page on which the image resides or from your filer folders. In this example, we are replacing the image right from the page it's on.

• Hover over the image you want to replace and click Choose Asset (Figure 1).

Figure 1

• The image displays in your filer folders. Right click the image and, from the dropdown menu, click Replace File (Figure 2.2).

Figure 2

• A modal displays, asking if you want to continue with the operation. Click Yes to continue with the file replace (Figure 3).

Figure 3

You are redirected to your computer, where you can search for a replacement image. 

• Click the image you want to use (Figure 4.1).
• Click Open to add the image (Figure 4.2).

This step may look different, depending on your operating system.

Figure 4

• The new image displays in your filer folder and the old image has been removed from your Bento site and filer folders (Figure 5).
  • Upload the old image again to make it available for use.

Figure 5

• Click the new image (Figure 6.1). 
• Click Add selected (Figure 6.2).

Figure 6

• The image has replaced the old image in all of the places in your site where the old image appeared, including all pages and global components (Figure 7).

You must manually upload the old image to your filer folders if you want it available for use.

Figure 7