> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kibocommerce.com/llms.txt
> Use this file to discover all available pages before exploring further.
# KIBO CMS - File Manager
> Video guide: KIBO CMS - File Manager
export const GuiddeEmbed = ({playbookId, mode = 'videoAndDoc'}) => {
return
;
};
"File Manager" is one of KIBO CMS's three pillars, alongside Website Builder and Content Modeling — it's the practitioner-facing library where every image used across Pages, Content Models, and Entries actually lives. Rather than scattering assets across a page or a model, File Manager gives us one central place to upload, organize into folders, and tag images so they're easy to find and reuse anywhere in the CMS.
A common scenario is a growing image library: as more product and lifestyle photography gets uploaded, folders keep related files together — for example, an "Apparel" folder with a "Men's" subfolder — while tags let us cut across that folder structure entirely, surfacing every "mountains" photo regardless of which folder it lives in. In this video, we'll upload files individually and in bulk, organize them into folders and subfolders, tag and edit file details, move and filter files, and take a look at the admin-level settings that govern file uploads for the tenant. "File Manager" is one of KIBO CMS's three pillars, alongside Website Builder and Content Modeling — it's the practitioner-facing library where every image used across Pages, Content Models, and Entries actually lives. Rather than scattering assets across a page or a model, File Manager gives us one central place to upload, organize into folders, and tag images so they're easy to find and reuse anywhere in the CMS. A common scenario is a growing image library: as more product and lifestyle photography gets uploaded, folders keep related files together — for example, an "Apparel" folder with a "Men's" subfolder — while tags let us cut across that folder structure entirely, surfacing every "mountains" photo regardless of which folder it lives in. In this video, we'll upload files individually and in bulk, organize them into folders and subfolders, tag and edit file details, move and filter files, and take a look at the admin-level settings that govern file uploads for the tenant. To navigate to the KIBO CMS, in the Admin UI, on the "MAIN" tab, we'll click "Content", then click "Page Builder". To navigate to the KIBO CMS, in the Admin UI, on the "MAIN" tab, we'll click "Content", then click "Page Builder". This will open the KIBO CMS Admin page.
We discussed this page in-depth in a previous video. This will open the KIBO CMS Admin page. We discussed this page in-depth in a previous video. In the left navigation, we'll click "File Manager" — its own top-level item, separate from "Content Modeling", "Content", and "Website Builder".
There is another "File Manager" in the nav menu, under "Settings". We'll discuss that menu later in this video. This is the "File Manager" Home screen: a library of every image file uploaded to this tenant, browsable by folder and searchable by name or tag. File Manager offers two ways to browse: a "Grid" view, as shown here, displaying files as image thumbnails; and a "Table" view, better suited for working with many files at once. We'll switch between the two here. This is the "Table" view. We'll switch back to the Grid view for now — it's a more visual way to browse and confirm what's in a folder at a glance. But note, anything we demonstrate today can be done in either "view". To add a new Image file, we'll click the "Upload" button on the top right. This opens our local file explorer, where we can select one or multiple images to upload at once. Alternatively, we can add Images by dragging them directly onto the File Manager screen, without opening the file explorer at all. Once the upload finishes, the new file appears in the library. Hovering over a file reveals five quick actions directly on its thumbnail: we can "Select" the Image on the left, or "Edit", "Download", "Move", and "Delete" it on the right. Clicking "Edit" opens a full details panel for the file, showing its "Type", "Size", and "Upload date" at the top, along with a further set of options. We'll discuss each section. Beneath the file info, we also have "Download", "Move", "Copy URL", and "Delete" — three are the same actions available on hover, plus the new "Copy URL". Important Note: "Copy URL" is how we get a file's CDN address to use elsewhere — in a content entry, a Website Builder block, or anywhere else that needs a direct link to this asset. In the panel, we can edit the file's "Name". It uses the name it was uploaded with by default. Note that "Name" is a required entry. We can also add an optional "Description", which can contain additional context about the file and where it's meant to be used. We can also add an optional "Description", which can contain additional context about the file and where it's meant to be used. "Tags" can be added to the image to help with Searching and Filtering images. This can be helpful when dealing with a large number of images in different locations within the File Manager.
We'll type in the Tag, and then either click the "plus" sign, or hit enter to apply. "Tags" can be added to the image to help with Searching and Filtering images. This can be helpful when dealing with a large number of images in different locations within the File Manager. We'll type in the Tag, and then either click the "plus" sign, or hit enter to apply. "Access Control" governs who can retrieve this file's URL — "Public", meaning anyone with the link can access it, or "Private (Authenticated)", meaning the request needs valid authentication to succeed. We'll leave this file set to its default, "Public". When we've completed editing the Image file, we'll click "Update". KIBO CMS simplifies content organization by allowing users to create "Folders" and "Sub-Folders", making it easier to manage.
Important note: Folders in KIBO CMS are only for organizing content, like "Images" or "Pages". They do not modify the path when accessing the content via APIs.
To create a new folder, we'll click either of the "New Folder" buttons shown here. KIBO CMS simplifies content organization by allowing users to create "Folders" and "Sub-Folders", making it easier to manage. Important note: Folders in KIBO CMS are only for organizing content, like "Images" or "Pages". They do not modify the path when accessing the content via APIs. To create a new folder, we'll click either of the "New Folder" buttons shown here. This will open a "Create Folder" modal where we'll configure our new folder. Note that all required fields are flagged with a "red star". This will open a "Create Folder" modal where we'll configure our new folder. Note that all required fields are flagged with a "red star". We'll fill in a "Title" — in this example we'll use "Apparel" — and its "Slug" fills in automatically. Since there are no other folders, the "Parent folder" defaults to "Home".
Once we've configured the folder as needed, we'll click "Create". "Apparel" now appears in the folder tree under "File Manager", and it also has a thumbnail under "All Files". To access the "Apparel" folder, we can click on it in either location. This is the "Apparel" folder, currently empty. As mentioned earlier, we can create "Sub-Folders" inside of other "Folders". Creating a Sub-Folder follows the same process we just completed — we'll start by clicking either "New Folder" buttons shown here. In the "Create Folder" modal, we'll name this folder "Men's", confirm its "Parent folder" is set to "Apparel", and then click "Create". Folders can also be reordered within the tree — useful for controlling how the navigation reads, independent of when each folder was created.
In this example, if we wanted to make the "Women's" folder a sub-folder in "Apparel", we'll click on the "Grab" bar to the left and drag it into the "Apparel" folder. Back inside the "Apparel" folder, we now see our "Men's" and "Women's" sub-folders. Next, we'll click on the "Men's" folder to access it. Again, this can be done by clicking it in the folder tree nav, or directly on the thumbnail. We're going to add some Image files in this folder. Similar to before, we'll click either "Upload" buttons shown here.
Uploading from inside this folder ensures anything we add lands here directly, rather than at the root of the library. Again, we'll select one or multiple images from the file explorer to upload. With our new images added, we'll navigate back to the File Manager's "Home" page. As mentioned earlier, we can "Move files" between folders. To do that, we'll select the images we want to move by clicking the "selection" box on the top left of each image, and then clicking the "Move" button on the top right. We can also move single image files by clicking the "Move File" button located directly on the image itself. As mentioned earlier, we can "Move files" between folders. To do that, we'll select the images we want to move by clicking the "selection" box on the top left of each image, and then clicking the "Move" button on the top right. We can also move single image files by clicking the "Move File" button located directly on the image itself. This will open a modal window where we'll select the destination of the selected files. In this example, we'll select the "Women's" sub-folder, but we could also create a "New Folder" here if we wanted and select that. Then we'll click "Move file". The selected files now live in the destination folder, instead of the original location. Back on the "Home" page of the File Manager, we're going to toggle the "Table" view again. As mentioned, this can be helpful when working with several files at once, but we can perform any File Manager action in any "view". Here, we'll select multiple files and then click "Edit" on the top right. We also have the "Move" and "Delete" actions, if needed. This will open the "Edit items" panel on the right. In this panel, we'll choose which "Field" to update in bulk, which in this example is "Tags". Next, we'll set the "Operation", where we can choose from "Overriding", "Clearing", or "Appending" to existing "Tag" values. In this example, we'll select "Append". Similar to before, we'll type in the new "Tags" and hit enter after each one. If we want to delete a new entry, we'll click the "X" next to it. When we've added all of the new "Tags" as needed, we'll click "Submit" A confirmation prompt will appear before the change is applied to every selected file. We'll click "Confirm". Once confirmed, we'll get a second confirmation modal showing that all selected files were updated with the new Tags. We'll click "Close". We'll switch back to Grid view. As mentioned earlier, we can search for image files by file name or Tag using the Search bar. Matching files will appear as we type, regardless of where they are located in File Manager. We can also "Filter" images by tag values. This will also return files regardless of where they are located in File Manager. To do this, we'll select one or more tags from the filter panel on the left. This automatically starts filtering image files that match the tag values as we select them. With two or more selected tags, a "Match Any" or "Match All" toggle can control how they combine. "Match Any" shows every file with at least one of the active tags, while "Match All" narrows results to only files carrying every chosen tag. With two or more selected tags, a "Match Any" or "Match All" toggle can control how they combine. "Match Any" shows every file with at least one of the active tags, while "Match All" narrows results to only files carrying every chosen tag. To clear the selected Filter Tags, we'll click the "Reset" button. Next, we'll quickly navigate to the Page Builder interface under "Website Builder" to show how we can use the "File Manager" content we just added in a drag-and-drop "Image" block. KIBO CMS Website Builder incorporates a drag-and-drop visual editor that allows users to easily create and edit web pages without requiring any coding skills.
This is the "Pages" menu, where individual storefront pages are created and managed. We'll cover this menu in greater detail in a subsequent video - for now, we'll just click and open our "About Us" page. KIBO CMS Website Builder incorporates a drag-and-drop visual editor that allows users to easily create and edit web pages without requiring any coding skills. This is the "Pages" menu, where individual storefront pages are created and managed. We'll cover this menu in greater detail in a subsequent video - for now, we'll just click and open our "About Us" page. On our "About Us" page builder, in the panel on the left, we can see prebuilt "Basic" components, as well as custom "KIBO Components". This is where we'll find the "Image" block that we drag-and-drop onto the canvas in the middle. With the "Image" component in place, we'll click on it to select it, then edit the component "Elements" on the far right. Here, we'll click the "Select from library" button. With the "Image" component in place, we'll click on it to select it, then edit the component "Elements" on the far right. Here, we'll click the "Select from library" button. This will bring up the File Manager modal, where we can navigate and select the Image we want to use. We can see the same Folder structure we just built, and can Search files and Filter by tag. We can also Upload new images in this window and create new Folders, if needed. After we select our Image, the "Title" and "Alternate Text" are filled in automatically, although we can edit this as needed. The image is automatically added into the "Image" component, and we can continue editing the "About Us" page as needed. For now, we'll head back to the main KIBO CMS menu page by clicking the arrow on the top left. As mentioned at the beginning of this video, a second, admin-level "File Manager" screen exists under "Settings", then "System". In this "Settings" version of File Manager, we can set the "Minimum" and "Maximum file upload size" and the "File delivery URL" for the tenant.
Important Note: KIBO documentation states the maximum file size per upload is 25 MegaBytes, regardless of what's configured here — treat this setting as a secondary control, not the deciding factor on what a given upload will actually accept. In this "Settings" version of File Manager, we can set the "Minimum" and "Maximum file upload size" and the "File delivery URL" for the tenant. Important Note: KIBO documentation states the maximum file size per upload is 25 MegaBytes, regardless of what's configured here — treat this setting as a secondary control, not the deciding factor on what a given upload will actually accept.