FusionCMS is currently in an open beta state and under heavy active development.

File Manager

Upload and save a collection of external images/videos through the File Manager to use on your website.

File Manager


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.

File Manager


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.

  1. Drag 'n drop one or more files into the File Manager container.

  2. 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:

  1. Select one or more directories, then click 'n drag them into another directory.
  2. 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.

Preview

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.

Action Bar - Replace

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.

Share Link

Download

From the Preview page click the Download button to download a copy of the file for personal usage.

Action Bar - Download

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

Multiple Views

Grid View Sample

List View Sample

Multi-select

There are a few ways to select multiple files:

  • Hold Shift+Click on multiple files.
  • Drag and select multiple files.

Shift+Click

Click+Drag

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.

DragSelectDrop

Have questions?

We're always happy to help with code or other questions you might have. Contact support or chat live with us on Discord.

Last edited on Friday, February 28, 2020 (4 years ago)