---
title: "Filer Folders"
canonical: "https://docs.pbs.org/space/B3/4751570/Filer%20Folders"
format: markdown
---
> Macro (toc)
## Overview
Filer folders are folders that are assigned to your Bento site and used to [store content](https://docs.pbs.org/space/B3/4751570/Filer+Folders#Content-that-can-be-stored) that can be added to your Bento pages. 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 that has been added to it. Be sure to [check your permissions](https://pbs-docs.atlassian.net/wiki/spaces/B3/pages/4751446) when using filer folders.
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!
## Content that can be stored
Almost any type of content, including images, PDFs, CSS, Javascript, and audio files can be stored in filer folders. In addition, all content can be used an infinite number of times on your Bento pages. You can add, [copy](https://docs.pbs.org/space/B3/4751570/Filer+Folders#How-to-copy-files-and-folders), [move](https://docs.pbs.org/space/B3/4751570/Filer+Folders#How-to-move-files-and-folders), and [delete](https://docs.pbs.org/space/B3/4751570/Filer+Folders#How-to-delete-files-and-folders) filer folders and files.
## Permissions
Site admins and site editors can add and delete files on any site to which they've been assigned, while Writers can add files but cannot delete files. [See full list of roles and permissions](https://pbs-docs.atlassian.net/wiki/spaces/B3/pages/4751446)
## How to access the Files dashboard
- From the menu on the left side of your main dashboard, click **Filer** (Figure 1).
Figure 1
- **Favorites: **Content designated as Favorites can be found in the Favorites section (Figure 2.1).
- **Recent views:** The 20 most recent folders that you’ve accessed can be found in the Recent section (Figure 2.2).
- **Deleted files: **Access to the trash folder displays at the top of the page (Figure 2.3).
- **Breadcrumbs: **The site and file path you are currently viewing displays at the top of the page (Figure 2.4).
- **Search and Browse: **Features such as search, sorting, page view, and functions such as copy, cut, and delete are available along the top (Figure 2.5).
- **Content display: **Folders display with a folder icon (Figure 2.6) and files display as thumbnails (Figure 2.7).
- **Help: **If you're in a pinch and need to consult the documentation, click **View the documentation** at the top of the page (Figure 2.8).
- **Upload files: **The upload feature displays on the right side of the page (Figure 2.9).
Figure 2
## 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. When you select a view, that is the view you will see every time you come to the filer folder dashboard until you change it.
[See where they display](https://pbs-docs.atlassian.net/wiki/download/attachments/4751570/folder-view.jpg?version=1&modificationDate=1654512186249&cacheVersion=1&api=v2)
| Type | Details | Example |
| --- | --- | --- |
| Grid | Files display as thumbnail images.
- Folders display number of images included in the folder.
- Files display dimensions and file size. | |
| Detail | Files display in a list with details about the file, including:
- Date the file was added to filer
- File size
- Email address of person who uploaded the file to filer | |
### 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](https://docs.pbs.org/space/B3/4751570/Filer+Folders#How-to-search-filer-folders) 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.
:info: [View a quick ](https://pbs-docs.atlassian.net/wiki/download/attachments/4751570/filer-sort-by-size-usethis.mp4?version=2&modificationDate=1654512479869&cacheVersion=1&api=v2)*[Sort by Size](https://pbs-docs.atlassian.net/wiki/download/attachments/4751570/filer-sort-by-size-usethis.mp4?version=2&modificationDate=1654512479869&cacheVersion=1&api=v2)*[ demo](https://pbs-docs.atlassian.net/wiki/download/attachments/4751570/filer-sort-by-size-usethis.mp4?version=2&modificationDate=1654512479869&cacheVersion=1&api=v2)
| Filter | Definition |
| --- | --- |
| Name | Sorts by the name of the file |
| Size | Sorts by the size of the file |
| Modified Date | Sorts by most recently modified or last modified |
| Upload Date | Sorts by the most recently uploaded or earliest uploaded |
| Owner | Sorts alphabetically by file owner's name |
| Folders First | Displays folders first or files first |
### Viewing file information
Each file and folder contains metadata, or information about the file/folder, on the right side of the page when each element is selected.
#### Folders
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
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).
- File preview
- File name
- Upload date
- File size
- Name of person who uploaded the file
- File dimensions
- Default alt text
- Caption
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
| Shortcut | Function |
| --- | --- |
| CTRL + C | Copy |
| CTRL + V | Paste |
| CTRL + A | Select all |
| CTRL + X | Cut |
| F2 | Rename |
| ESC | Close open modals / unselect |
### macOS
| Shortcut | Function |
| --- | --- |
| CMD + C | Copy |
| CMD + V | Paste |
| CMD + A | Select all |
| CMD + X | Cut |
| F2 | Rename |
| ESC | Close open modals / unselect |
## Actions menu
The following actions can be taken with your folders and folder content.
| Action | Definition |
| --- | --- |
| Copy | Make a copy of the file/folder while keeping the original in its original location. The copied file/folder can be pasted in another location, resulting in the same file/folder stored in two places. If a file is copied and pasted in the same folder, the duplicate copy displays "copy" in the file name. |
| Cut | Copy and cut a file/folder to move it to a different location. |
| Paste | Place a file/folder that has been cut or copied in another location. |
| Rename | Change the file/folder name that is displayed in Filer. |
| Unzip | Unzip a bundle of individual files to display each file separately. |
| Delete files | Delete files/folders from your Filer Folders. The file can still be accessed by clicking Trash in the top navigation section of Filer. [Learn more about recovering deleted files](https://docs.pbs.org/space/B3/4751570/Filer+Folders#How-to-restore-a-deleted-file) |
| Select all files | Selects all files/folders that currently display on the page. After being selected, files/folders can be copied, cut, or deleted. |
| Clear selection | Removes an action that has been made. For instance, if files have been selected, clicking Clear selection will unselect the items. |
## 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.](https://pbs-docs.atlassian.net/wiki/download/attachments/4751570/filer-folder-duplicate-name-error.jpg?version=1&modificationDate=1654512722176&cacheVersion=1&api=v2)
- 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 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](https://pbs-docs.atlassian.net/wiki/download/attachments/4751570/filer-folder-drag-and-drop.gif?version=1&modificationDate=1654512806193&cacheVersion=1&api=v2)** (or multiple files) from your computer (Figure 1.2). The example below illustrates how to upload files using the Upload button.
> ✅ **To save time, use ****[keyboard shortcuts](https://docs.pbs.org/space/B3/4751570/Filer+Folders#Keyboard-shortcuts)**** when selecting files.**
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 favorite files and folders
For complete instructions on how to designate files and folders as Favorites, [go to this documentation](https://docs.pbs.org/space/B3/1896415236/How+to+Favorite+Files+and+Folders). Also learn how to remove files and folders from your Favorites folder.
## How to copy files and folders
Duplicate any file or folder on your site by using the copy feature. You can copy all files and folders and paste them to different locations in your file structure, but you cannot paste to the same location as the original. If you try to copy and paste a file or folder in the same location, you will receive an [error message](https://pbs-docs.atlassian.net/wiki/download/attachments/4751570/filer-folder-copy-error.jpg?version=2&modificationDate=1682629406397&cacheVersion=1&api=v2).
The steps below demonstrate how to copy and paste a file.
- 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 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** (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:
- Right click **anywhere on the screen** and click **Paste **(Figure 3.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
Use the Rename feature in the Actions menu to rename folders and files. When you place a file on your page then change the name of the file in your filer folders, the file on the page is not affected.
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](https://docs.pbs.org/space/B3/4751570/Filer+Folders#How-to-delete-files-and-folders).
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.
| Search by | Results include | Example search criteria |
| --- | --- | --- |
| Single keywords | All files including the search term | facebook |
| Keywords separated by a space | All files including any of the search terms | mercy street |
| Keywords or file names separated by an underscore | All files including any of the search terms | cats_and_dogs |
| Keywords or file names separated by a hyphen | All files including any of the search terms | maine-connecticut-vermont |
| Keywords separated by a comma | All files including any of the search terms | mercy street, nature |
| Keywords enclosed in double quotes | Only files including the search terms within quotes | "mercy street" |
| File type | All files with the extension being searched | jpg
png |
- 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 find a file location
The location for each file in your filer folders can be easily determined by using the* Go to location* feature. The steps below show how to use this.
- The path of the current folder you are viewing displays (Figure 1.1).
- In the search textbox, type the name of the file you want to locate (Figure 1.2).
Figure 1
- When the files display, **right click on the image **whose location you want to identify (Figure 2.1).
- When the menu displays, click **Go to location** (Figure 2.2).
Figure 2
- The image displays (Figure 3.1).
- The folder path for the image displays in full at the top of the page (Figure 3.2).
- Hover your mouse over the** image on the right side of the page** to view the image path (Figure 3.3).
Figure 3
The following displays:
- URL: The image/file URL that can be used as reference/source in html.
- PATH: The complete folder structure path of the file. This is useful if you want to use the file in the [embed component](https://docs.pbs.org/space/B3/4751472/Embed) or send the full URL to someone.
Figure 4
## 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](https://docs.pbs.org/space/B3/4751633/Carousel).
- 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](https://docs.pbs.org/space/MM/5341192/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](https://docs.pbs.org/space/B3/4751570/Filer+Folders#How-to-upload-a-file) (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](https://docs.pbs.org/space/B3/4751570/Filer+Folders#How-to-upload-a-file)
Figure 3
- The image displays on the page (Figure 4).
Figure 4
## Images
:info: **[Learn how to edit your images](https://docs.pbs.org/space/B3/4751734/How+to+Edit+Images)**
All images in filer can be assigned caption and ALT text. The assignments convey to all [components](https://docs.pbs.org/space/B3/4751450/Component+Library) to which the image is added.
** Caption text is text that displays on the screen. Alt text is hidden from a sighted user but read aloud to someone using assistive technology. *
See where this is located
## 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. You can recover deleted files from the Trash bin. You can also search for files in your Trash section. [Learn about the search feature](https://docs.pbs.org/space/B3/4751570/Filer+Folders#How-to-search-filer-folders)
- 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](https://docs.pbs.org/space/B3/4751570/Filer+Folders#How-to-copy-files-and-folders) or [cut](https://docs.pbs.org/space/B3/4751570/Filer+Folders#How-to-move-files-and-folders) feature. [View the Actions menu](https://docs.pbs.org/space/B3/4751570/Filer+Folders#Actions-menu)
> ⚠️ **Deleted files are available in the Trash folder for 90 days. If you need a file restored after the 90 day window, please ****[submit a support ticket](https://digitalsupport.pbs.org/support/tickets/new)****.**
- 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).
> ℹ️ **Press and hold your Shift and CMD key to select multiple files and folders.**
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 edit a file
**Important notes about editing a file:**
- **Only the following file types can be edited: css, csv, htm, htm, js, json, md, svg, txt, xml**
- **The file must retain its original name to see the changes *****everywhere *****the file is included**
- **If the file name is changed, you must replace all instances of the file on your site manually**
All eligible file types can be edited from the filer interface; you do not need to edit the original file and add it again to your filer folders. When you save the file, any changes made display on all pages the file is included.
- **Right click the file **you want to edit and when the menu displays, click** Edit** (Figure 1).
Figure 1
- Make edits to your file, click **Save **and click **Close **(Figure 2).
Figure 2
## How to replace a file
**Important notes about replacing a file:**
- **Only image files can be replaced**
- **Replacing a file is irreversible**
- **The original file and replacement file must have different file names**
- **All pages and global components are affected**
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](https://docs.pbs.org/space/B3/4751570/Filer+Folders#How-to-upload-a-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](https://docs.pbs.org/space/B3/4751570/Filer+Folders#How-to-rename-a-folder-or-file) 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](https://docs.pbs.org/space/B3/4751570/Filer+Folders#How-to-upload-a-file) 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](https://docs.pbs.org/space/B3/4751570/Filer+Folders#How-to-upload-a-file)****** to your filer folders if you want it available for use.***
Figure 7
