Creating a File Management System with File Genie Support

In this article Patrick will show you how to built a simple File Management System in ASP using File Genie and Pure ASP Upload 3. He will first take you through the steps of creating a basic structure in which the information will be displayed and where the navigation will take place. Next he will walk you through creating a form for adding files.

To end this article Patrick will show you a couple of possibilities for adding extra options to this basic File Management System.

Editing the standard code

All of the building and editing so far was through the user of standard options in the File Genie extension. To get the File Management System working, it now comes down to some hand-coding. Nothing complicated, but Code View is necessary!

First of all, a link will be created for each folder. This link will reload the entire page adding a URL parameter. With this URL parameter the Folder List named Files will be dynamically populated.

1. Select the code {Folders.Name} in the Folder List.
2. In the Properties Inspector, click on the Browse for File button.

3. Select the current page containing the File Management System.
4. Click on the button Parameters.

5. Typ the letter f (for folder) in the Name field.

6. Click in the Value column next to the text entered.

7. Click on the little thunder button.

8. Select the option Name from the Folders Folder List.

9. Click OK.
10. The parameter window has now been filled.

11. Click OK.
12. Click OK to close the Select File window.

Every time the name of a folder is clicked the page reloads and the URL parameter changes, depending on the folder name.

Next, the Folder List named Files will be edited so that it reads the URL parameter and populates the Folder List.

1. Open the Files Folder List from Server Behaviors.
2. Edit the path from "media" to "media/"& Request.Querystring ("f").
3. Click OK the Close and Save the Folder List.

 

Now save and upload the file and preview the result in your browser. Click on a folder in the Folder List to have the content of that folder shown in the File List.

Note: The usage of the folder names as an URL parameter could cause a security flaw. Through changing the content of the parameter to ../, all the files in the root folder will be shown!
Creating a Quick-Add form

As for now the File Management System can only show and delete files from selected folders. To simply and quickly add a file to a folder, a Quick-Add form will be created.

Note: The Pure Upload extension is needed to be able to upload files to a folder.

1. First create some space after the main table.
2. Enter a Form by choosing Insert, Form, Form.
3. Inside the form, insert a File field, a Button and a Hidden field.
4. Name the Hidden field FolderName and name the File field File.

             

5. Set the value of the Hidden Field to get the URL parameter by first choosing the +-button from the Bindings panel..
6. Click on Request Variable.
7. Select Request.Querystring in the Type field.
8. Enter f in the Name field.
9. Click OK.

10. Select the Hidden Field and in Properties click on the thunder-button nest to the Value Field.

11. Select Querystring.f from the Dynamic Data window.
12. Click OK.

13. The correct code has now been added into the Value Field.

14. Open Pure ASP Upload 3 under Server Behaviors, DMX Zone.

15. Make sure you select the correct form. If you followed this tutorial, there should be only one form on the page. Since the form name was not changed, it should be set to form1.
16. Set Conflict Handling to Make Unique.
17. Select the main folder in the Upload Folder field.  This will be edited manually after confirming this window.
18. If wanted, activate a Progress Bar on the Progress tab.
19. Click OK.

The standard code for the Upload behaviour has now been added. This code now needs to be changed to make sure that the chosen file is uploaded to the selected folder.

1. Open Pure ASP Upload 3 from Server Behaviors.
2. Edit the Upload Folder so that it reads "media/" &UploadFormRequest("FolderName").
3. Click OK.

By editing the Pure Upload behavior, the file that is going to be uploaded will be placed in the folder that was selected. The value for that folder was loaded in the Hidden Field. This field is used to put the folder name behind the name of the main folder.

The completed basic File Management System could now look like this:

Try switching between folders in the Folder List and see that the File List is updated to display the content of the selected folders.

Browse for a file to add and click Submit. The file will be added to the selected folder.

Click the Delete Link to remove a file from the selected folder.