File Manager

All of the images and documents are stored on the site, and the best way to access them? The file manager.

There are 2 main ways of accessing the File Manager. The first, and easiest, is by clicking on the File Manager button in the Admin Panel under the General Tab. The second, is from a plugin with a setting that requires an image of a path. There will be a button on the right which will open the File Manager, allowing you to select the file.

There are 3 sections to the File Manager, the top panel for configuring and altering the view, the side panel for showing the directory structure, and the list view, which lists the current directory, and folder and file list.

Important thing to understand for the start, is that Images (jpg, png, gif etc) and Document (pdf, doc, xls etc) are stored in two separate places. These are both accessible from the File Manager, but the two types cannot be stored within the same folder. The File Manager automatically deals with this. You will see within the side panel directory structure, there are two folders which cannot be removed, called IMAGES and DOCUMENTS.

Top Panel

---

Within the top panel, which include all the controls within the grey bar at the top of the File Manager, you have various options to configure the folder and file structure, as well as adjusting the view. We will go through these from left to right.

Creating a new folder

The first options you'll come across is a small text box requesting a new folder name, and a create button to the right of it. Enter a name for your new folder and click create. The File Manager will instantly refresh and a new folder will be added to your current directory.

Your folder name will have spaces and special characters replaces with dashes, as you can see from the screenshots on this page.

Clear cache and refresh folder

Should the unlikely event that you upload an image, or update something within the File Manager, and it doesn't show, or no change seems to have taken please, click the Clear cache and refresh folder button, this will remove the temp stored files on your computer and force it to reload everything, making sure that you have the latest view.

Upload a single file or zip

Probably the most important button here. Without it, there would be no images or documents. Clicking on this button will display a file dialog which will allow you to navigate your computer in search of the image or document that you want to upload. Once selecting said file, it will upload it to the server and into the currently viewed directory, and the File Manager will be covered with an "Uploading, please wait.." message (see screenshot below). Once uploaded, the file list will be refreshed and it will appear at the top of the file list.

If you have a lot of images to upload at once, we make it easy. Place all the files you wish to upload into a single .zip file, and select that. The File Manager will upload the zip file, and unzip all the images into the current directory.

Acceptable image files to upload:
GIF, JPG & JPEG, PNG.

Acceptable document files to upload:
CSV, PDF, DOC, DOCX, XLS, XLSX, FLV, ICS, RTF, SWF, TXT.

Search

Clicking on the Search button, which is identified by the magnifying glass icon, it will toggle the search form into view.

The text field is the text you are searching for. Next to it, is a drop down containing search criteria, or the element in which you are searching. By default, you are searching the file name, your other options are Extension, which is for search file types, widths, for searching image widths, and heights, which are for searching image heights.

Type in the search term you are looking for into the search box, and it will instantly start searching that current directory for that term as you type. If a file is found matching the search criteria, then the file will be listed, otherwise you'll see an empty directory.

To clear the search results, remove all text from the search form.

Show grid view

The grid view shows in a block view, which is better for when you are searching for that image your after. The thumbnails are that little bit bigger making it easier to view the file.

Show list view

The list view is the default view when opening the file manager. The thumbnails are smaller, but the file name has more space. If you make sure your files are named well, they should be easy to find. You also get more details about each file in this view.

Toogle between Grid View and List View

Side Panel

---

The side panel lists your directory structure. There are two main directories, your Images directory and your Documents directory. Folders included inside these main directories will be listed underneath each folder, indented slightly to indicate its structure.

Click on a folder to view it's contents.

File List View

---

The final section of the File Manager is the list view, which you can see takes up to bottom right hand corner, and most of the dialog window.

Current directory

The top left of this section is the current directory you are currently viewing. You can use this to see in which folder in the Side Panel you are in.

Each folder is separated by a forward slash. The further down the directory you view, the larger the text becomes. If you are at the highest level, so either viewing the Images Directory or the Documents Directory, you'll only see a forward slash on its own in the path, indicating that you are in the root, or top of the directory, and cannot go any higher.

Sort by and view count

We'll cover these three options together as they all link together. Basically they allow you to adjust the file list you see. By default, the File Manager limits you to 10 items. Folders come first in the directory list, followed by files. The viewing drop down gives you different number of files to see.

Next on the list is the first sort option. By default we list files by uploaded date. You can change what the view is sorted by, by selecting one of the options from the second drop down.

The final drop down allows you to toggle between the previous sort option in ascending or descending order.

So, by default, the File Manager shows you images in ordered by their uploaded date, with the newest at the top.

Changing any of these items alter the view instantly.

File List

The file list, the main part of the File Manager view. We will first go through the file list in List View mode, and then details the differences afterwards in Grid View

In most sorted views, folders appear at the top of the file list. The list is supplied with a header row detailing the information that you see below.

The list, going from left to right, firs there is icon, which will be a thumbnail of the image. If the item is a folder, then a folder icon appears in its place. Next you'll see the file or folder name, which will include the file extension.

Then we get into the details of each element. First are Dimensions, which will only appear for image files, and will display the size of the image in pixels.

Then we get the file size of the item. We do not list folder sizes.

The final bit of data available is the uploaded date. This will be the date that the file was uploaded to the server.

The final part of the information is the Actions. These allow you to alter the file. Lets first point out that folders only have one action, and that is Delete, which works the same as the file delete.

Each action is represented by an icon, roughly indicating what it does. Otherwise if you hover over it with the mouse, it'll display a tooltip of the action.

Rename

The first icon is the rename icon, clicking on this brings up another dialog with a text field. In the text field will be the current name of the file. Change the text and click save to rename the file.

Delete

Clicking on this will delete either the file or folder of that row. You will be asked to confirm that you want to delete the file or folder, and you must click that you want to permanently delete the file.

Edit image

Sometimes, you upload an image, and it needs a bit or work. Our simple image editor will do that for you.

Read the full instructions for our image editor.

Multiple Select

The tick box at the end of the list allows for you to perform multiple tasks. Once one item is clicked, the Top Panel expands and shows the multiple select options to perform to every item selected.

Once you have one or more files selected, the extra options show two options, which are move and delete. The first option is the move ability, which requires you to select a destination folder from the drop down list, once you have selected the destination, click the move button to perform the task. 

If you want to delete multiple files, click on the delete button. It will ask you to confirm the deletion once, and then delete all the files selection once confirmed.