Overview
The first time visiting the File Manager you'll be introduced to a rather empty page. To get started, drag some images into the window.
Action Bar
The first thing you want to familiarize yourself with is the Action Bar located at the top of the File Manager container; highlighted in the picture below. The Action Bar encompasses most, if not all, the important functions of the File Manager.
Organize your files within directories. Adding or moving a file to a directory will not affect the public URL path to the image so feel free to organize until your hearts content. The following sections below will explain each of these actions.
Upload New File
One or more files can be uploaded at once. There are two ways to upload files into the File Manager.
-
Drag 'n drop one or more files into the File Manager container.
-
Click the
Upload
button in the Action Bar, which will prompt you to select files from your hard drive.
Any new uploaded files will be added to the current directory.
Directories
Directories (aka Folders) can be added one at a time. Simply click the New Folder
button in the Action Bar. This will prompt you with a model where you can name your new directory.
Name your new folder and click Save.
Your new folder will appear immediately after the Model closes.
Moving Directories
Similar to moving files, you can move directories a few ways:
- Select one or more directories, then click 'n drag them into another directory.
- Select one or more directories, then use the
Move
feature from the Action Bar.
Search
In the center of the Action Bar is a search input. Simply enter your search query to filter down the results.
Filter
If you want to quickly filter your files based on file type, use the Filter tool.
Actions
Perform additional actions on file/directory selections (e.g. delete, move, rename). This requires at least one file/directory to be selected before performing the requested action.
Sort
Sort the currently viewable files (either in ascending/descending order) by using the Sort tool.
View
Change the layout between Grid or List by toggling a different view with the View button set.
Breadcrumbs
Underneath the Action Bar is the Breadcrumb Bar, which will update according to your current directory location. Click a breadcrumb item to navigate to that directory.
Managing Files
Preview
Once a file has been uploaded, double-click it to visit it's Preview page. This page will allow you to do several actions to the file and provide basic information.
Rename
There are several ways to update a file's name.
- Double click on the file's name from the Overview page to edit it directly.
- Select a single file from the Overview page and click the Rename button in the Action Bar.
- Double-click the file to be redirected to it's Preview page. From there you can rename the image and add a description.
Replace
Mistakes happen and you may notice you've uploaded the incorrect image. Don't fret, cause you can easily replace the image without breaking it's reference.
Move/Relocate
There are several ways to move a file/folder to a different folder. After selecting one or more files/folders:
- Click the Move button in the Action Bar to launch the Move Modal.
- Drag 'n drop the selected files/folders to a the desired folder location.
- From the Preview page, click the Move button in the Action Bar to move the current file.
Share Link
The share link is the read-only field used to reference your file within your website. Double-click the Share Link to select it, than copy and do what you will with it.
Download
From the Preview page click the Download button to download a copy of the file for personal usage.
Template Usage
Every file can be referenced by it's Share link. This can be obtained from the Preview page.
<img src="/file/{hash}/{original-filename}.png" />
Additional Features
Changing Views
The File Manager module comes with two views, simply click the View list/grid button in the Action Bar:
- Grid (default)
- List
Multi-select
There are a few ways to select multiple files:
- Hold Shift+Click on multiple files.
- Drag and select multiple files.
Drag 'n Select 'n Drop
To move multiple files/folders at once, simply select multipe files/folders then drag them into the folder you wish to place them.