Wiz CMS Tutorials

Working With the File Manager

Video Tutorial

The File Manager

The Wiz CMS File Manager is an easy to use interface that allows the user to manage files in a predetermined folder on their website. It is useful for clients that need to upload files for users to view/download, for times where users may need to manage images for a certain part of the site (but not needed for galleries/sliders, that has its own editor), and basically any other reason you can think of where your client is going to need some basic file management ability.

Planning

First you're going to need to determine two things. What URL do you want the user to go to for the file manager, and what folder in the website do you want it to manipulate? I'd recommend a folder that is dedicated to whatever purpose you're using the file manager for (i.e. doesn't contain a bunch of website files that shouldn't be renamed/deleted/replaced). For our example I'm going to set it up so that the file manager is accessed via mysite.com/managefiles/ and the folder it's going to be editing is also going to be in the website root, at mysite.com/editable-assets/.

Step 1

First we're going to grab the file manager itself. Inside the EXTRA folder in your download you'll find a folder named wiz-file-manager. Copy that whole folder to the root of your website, then rename it to managefiles to get the URL we want. Also make sure to make an editable-assets folder in the root for our files. And add a few files to it for the file manager to manipulate to test it's reading everything right later on.

Step 2

Inside what we have now named the managefiles folder you'll find an index.php file. At the top of that file there will be places for you to set the username and password (similar to how we've done it in other tutorials, it's hard to mess up, they're right at the top).

Step 3

Next we'll go into the file-manager.js file (right in the same managefiles folder). At the top of it you'll find a managerPathToAssets variable. That variable needs to be set to a path from your instance of the file manager to the folder to manager. In this case that would be up one level (../) to leave the managefiles folder and then the editable-assets folder. Also include the trailing slash. Once you change that it'll look like this:

// a relative path from the file-manager folder to the folder it's managing assets in
var managerPathToAssets = '../editable-assets/';

Step 4

Now we go inside the managefiles/scripts/ folder and find the settings.php file. Open it up and you'll find a $folderToManage variable right at the top. That needs to point to our editable-assets folder as well, relative from this file. That means up two levels (since we're in managefiles/scripts/) and then the editable-assets folder. Once you edit that it'll look something like this:

// the folder to manage, relative from this file, include the trailing slash
$folderToManage = "../../editable-assets/";

Done!

That's all! Now you can go to mysite.com/editable-assets/ and log in to manage your folder of files! There were a few files to edit, and going through the steps 1 at a time is a bit slow. But once you've done it once and get what's going on there's a quickie way.

The Shortcut

For each of the files the variables you need to edit are at the top and well commented. So the quickie process is to just write down what files need editing, open them up, and follow the comments at the top. Those files (relative from the file managing folder) are index.php (for username/password), scripts/settings.php and file-manager.js (to set paths to the folder where images will be stored). When it's summed up like that, it can actually be a pretty quick process!

Tutorial Menu Next Tutorial ❯