In this article Patrick will show you how to enhance the options of the simple File Management System that was created in the article Creating a File Management System with File Genie – part 1. First he will show you how to give the File Management System the Explorer-style, that could be seen in the first article. Next he will hide the Quick-Add form, when no folder has been selected. After that the header will be edited, in such a way that the name of the selected folder will appear in the header of the File List.

To end this article Patrick will walk you through a couple of steps to enable sorting of all columns.

Watch the demo

Extra layout adjustments

To give the File Management System an even more Explorer-like look, some more adjustments have been applied to the layout of the Folder List.

Since the layout is very personal, the adjustments have not been described in every details. Only a description of what was changed will be shown below. All of the images that were used are available in the Source Code that comes with this article. The Source Code also contains the ASP page, so any code that was used can be taken from there.

1. Folder images have been added in front of the Folder List items.
2. The folder that was selected, will have another image shown.
3. On top of the Folder List an extra static item including a folder image was created which shows the name of the root folder. In this example this is media.

Hiding the Quick-Add form

The Quick-Add form was added to the page to upload files to a selected folder very quickly. When the page with the File Management System is opened, no folder is selected. Therefore it is not possible to upload files with the form at that time.

To make sure no errors will appear, the Quick-Add form will be made hidden when no folder is selected. This will be done by checking if the URL parameter named f is present and not empty.

1. Select the form.
2. Swith to Code View.
3. The code should like like this.

<form action="<%=DMX_uploadAction%>" method="post" enctype="multipart/form-data" name="form1" id="form1" onSubmit="<%=pau.submitCode()%>;return document.MM_returnValue">
  <p>
    <input name="FolderName" type="hidden" id="FolderName" value="<%= Request.QueryString("f") %>" />
    <input name="File" type="file" id="File" onChange="<%=pau.validateCode()%>;return document.MM_returnValue" />
    <br />
<input type="submit" name="button" id="button" value="Submit" />
  </p>
</form>

4. Place your cursor before the form-tag.
5. Choose Insert, ASP Objects, If from the menu. The code <% If  Then %> is added.
6. Type Request.Querystring("f") between If and Then. The code now looks like this.

<% If Request.QueryString("f")<>"" Then %>

7. Scroll down and place your cursor behind the </form> tag.
8. Choose Insert, ASP Objects, End from the menu. The code <% End If %>is added.

Save and upload the page. When the page is now opened without a folder selected, the Quick-Add form will not be shown. As soon as a folder is clicked in the Folder List, the Quick-Add form will appear.