This article shows how to create a reusable file repository written using ASP.NET/C# that features an n-tiered directory structure, file uploading, directory creation,
file previewing, and customization for supported file types.
I was hired into my current position as a web developer with one of my tasks being to recreate my company’s website back-end by making it totally dynamic and mostly
database driven. If an image wanted to be changed on a particular page, the marketing employee would use whatever I was going to build to go pick a new image and have
it go live instantly. The goal of my project is to provide a turnkey website solution that we (the members of the IT) did not have to manage or be a part of.
If marketing wanted to change things, they would have the tools to do it without any knowledge of HTML, ASP.NET, or C#.
Part of my solution was a content management system (CMS) that allowed a layman person to create web pages from pre-built templates using an easy to use web interface.
In the page creation process, a template is chosen, and the user is prompted to input values for each of the elements that are required by the template.
This is where this article comes into play. One of the “components” that is available to be used on pages is an image component. I needed to provide the layman user
a way to upload, manage, preview, and select images for use on pages.
I first created an “Image Repository” which would display images and allow the user to preview, upload, and select images from a single directory on the web server.
This was a working solution which clearly was very limited in several ways. All uploaded images would be crammed into one directory. Selecting an image would become
a tedious task if there were hundreds or thousands of images to choose from listed in one big group. There was a need for directory creation and upload directory specification.
It was also decided that we needed a mechanism to upload and display Flash files as well. I needed to create a Flash component for the website as well as accommodate them
how I did images and encapsulate all this functionality in a single reusable portion of my CMS. The “Image Repository” quickly was lacking the required features and
was ready for an overhaul. That was my first version of this endeavor.
My second version is what will be discussed in this article. The “Image Repository” code was kept and modified to add the required features and became now known
as the “File Repository”. The repository is a fully functioning way for a layman person to manage and select files for web page use via my CMS.
Using the Code
The repository is launched from a CMS page that requires a file type as a parameter. The CMS page has a text box to display the selected file name as well
as a “Browse File Repository” button. When the button is clicked, it launches a modal window showing the file repository. Depending on the file type that was needed
by the CMS (Flash, image, etc.), the modal window is launched with a query string parameter named “type”.
The following types are currently implemented:
|Image (.jpg, .png, .gif, .bmp)
|Portable Document Format
window.showModalDialog("FileRepository.aspx?type=" + extension + "","",
FileRepository.aspx?type=jpg will launch the file repository window for images.
FileRepository.aspx?type=swf will launch the file repository window for Flash files.
FileRepository.aspx?type=pdf will launch the file repository window for PDF files.
The file repository can be launched by going directly to the FileRepository.aspx page using a QueryString parameter that is implemented.
This will show the repository in action except that clicking on a “Select” link for a particular file will not do anything since it was not launched in a modal
window and does not have a parent window to send its return value to.
The repository has four main sections:
- Upload new file area
- Create new directory area
- Tree view of directory structure area
- File Information/Preview area
The different areas can be seen on the screenshot above.
The Upload New, Create New Directory, and File Information/Preview areas all depend on the treeview of the directory structure area. If a file is uploaded
or a directory is created, it will be created under/in the directory which is currently selected in the directory tree. The currently selected directory can be
identified in the tree because the background color behind its name is light brown. The files shown in the File Information/Preview area are those that reside
in the currently selected directory in the directory tree. To view the different files in each directory, simply click on the directory name in the directory tree.
Click on the + and – signs to expand and collapse the tree nodes just like you normally would if you were using Microsoft’s Windows Explorer.
When the file repository is launched for images, it has pop up previews of the images when the thumbnails are clicked on. The thumbnails are 100x100 pixels
and are created using HTTP streams so that no actual thumbnail images are created on the hard disk on the server.
When the “Select” link button is clicked, the modal window is closed and the path to the selected file is sent to the parent window and put in the text box which
would be on a CMS page, but is on file_chooser.aspx for this example. The file_chooser.aspx page has radio buttons to allow testing of each currently implemented file type.
The final product which I have used in my CMS was an n-tier directory structure supported reusable piece that can be modified in the future to support more file types if needed.
Points of Interest & Items Worth Noting
A few notes on the project installation/configuration:
- The “file_repository” directory on my server needed to have write permissions enabled for the following accounts: ASP.NET Machine Account,
IIS_WPG (IIS worker process), and Internet Guest Account.
- I used .NET 2.0 for my implementation.
- Sample files were added to my project for example usage only. The naming conventions on the files don’t follow the alpha-numeric and underscore only convention
that my code enforces. I simply copied and pasted files and directories manually to have some sample data present.
A few notes on different browsers:
*I have only tested on Firefox and Microsoft Internet Explorer*
- Modal windows are specific to IE only… therefore they will not work with Firefox… basically, using Firefox is pointless for my purposes, but will work if
you modify my code for use as a file upload mechanism.
- Point your browser to
swf) to see the repository without the “Select” link button doing anything…
- When visiting the file repository directly, the image thumbnail filename in the status bar mouseover works. The status bar is also removed like it should
be when the thumbnail is clicked and the preview window shows. For some reason, these two features do not work when used in a modal window.
- Using the
contentEditable=”false” property of an ASP text box only works in IE. Firefox will allow the value to be edited manually… (doesn’t really matter since
Firefox can’t display a modal window anyways…)
- IE can use modal windows.
- The mouseover does not work in the modal window as mentioned previously.
- The image thumbnail popup windows do not hide the status bar.
- When clicking on a node in the directory tree, the modal window “jumps” to the left hand side of my screen if it was dragged elsewhere on the screen between
its original loading and this click (has not been tested anywhere other than my own machine…).
- I chose to have the
DataGrid be empty when there were no files of the currently selected type in the currently selected directory.
This results in the header text being shown with no rows and a single “1” showing. That one shows that it is the first page of the
This is shown because I have paging enabled on the
DataGrid. A more cosmetically pleasing way to approach this behavior is to set the
null and calling
DataBind to make it not show up. You can then display a message saying there are no files in the directory or something along those lines.
An easy way to accomplish that would be something like this:
if(dgFiles.Items.Count == 0)
dgFiles.DataSource = null;
lblMessage.Text = “There are no files in this directory.”;
lblMessage.Visble = true;
This project has been a conglomeration of ideas from many other publications. I extended the ideas of others, and used them together to form this project.
The following should be credited for their work:
This article is dedicated to Professor David Retterer at Ohio Northern University.
For my undergraduate studies, he was my professor, boss, academic advisor, senior project chairperson, as well as mayor of Ada, OH. Mr. Retterer should be recognized
for his great impact on my continued success.