ASP.NET/C# File Repository

• Download source files - 13.5 KB

Introduction

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.

Background

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:

Here is the JavaScript code snippet to launch the repository:

window.showModalDialog("FileRepository.aspx?type=" + extension + "","",
   "resizable:yes;help:no;edge:sunken;dialogWidth:625px;dialogHeight:650px")

• 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:

1. Upload new file area
2. Create new directory area
3. Tree view of directory structure area
4. 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. The code is documented rather well with the exception of the JavaScript. I am a C#/ASP.NET/SQL developer and JavaScript is not one of my strong points. The JavaScript code may not be up to par in this project.

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*

Firefox:

• 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 FileRepository.aspx?type=jpg (or pdf or 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…)

Internet Explorer:

• 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…).

Bugs/Behavior:

• The JavaScript image preview pop up is written around a 100 x 100 pixel image. If the image is near that size, say 96 x 96 pixels, it appears in the preview window, but not centered like it should be. Again, I’m far from a JavaScript programmer.
• 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 DataGrid. This is shown because I have paging enabled on the DataGrid. A more cosmetically pleasing way to approach this behavior is to set the DataGrid’s DataSource to 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)
{
     //make the datagrid headers invisible by making it have a null datasrouce...
     dgFiles.DataSource = null;
     dgFile.DataBind();

     //show a message to the user...
     lblMessage.Text = "There are no files in this directory.";
     lblMessage.Visble = true;
}

Credits

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:

• http://aspnet.4guysfromrolla.com/articles/052803-1.aspx
• http://www.csharp-station.com/Articles/Thumbnails.aspx
• http://www.fontstuff.com/frontpage/fptut17.htm

Dedication

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.