Introduction

This article is a continuation to a previous introduction article I've written for Jiffycms HTML Editor. You are welcome to read that first, if you have not already.

Jiffycms HTML Editor has a built-in image gallery or rather an "Image Picker", which allows you to upload and browse images on the server. It supports uploading a single image at a time (via an IFrame, so your pages never refresh as if it were taking place via a background process). It also supports an image browser that can browse images you may have stored server-side. These can be images stored on the file system, or images stored in your database. In addition, the image picker is exposed as a separate WebControl in case you want to provide an image picker functionality in your existing applications.

Being able to insert images while designing your pages is a pretty useful feature, and you will almost always want to use it when providing rich text editing in your applications. First, let's drag and drop an instance of the Jiffycms HTML Editor on to our page.

drag drop editor

Note the image picker icon in the toolbar. This icon is what pops open the image picker into a floating div made to resemble a popup window. First, let's just run the HTML editor as is and try launching the image picker; that way, we get an idea of what work lies ahead. Before we can run the HTML editor, we first need to disable RequestValidation. This is a rich text box that takes HTML as input, so it is only logical that you want to disable request validation for this page.

Make sure you disable ValidateRequest and add a script manager in the page

Now, let's run the page, and clicking on the image picker icon, we can see for ourselves what it looks like, by default:

image picker

As you can see, the "Browse Server" button is disabled as expected. After all, we have not told it what to browse. At the bottom left, you can also see an upload image button; let's click it.

Uploading an image will try to upload the image in the background, while you see a progress report.

OK, so first, let's try to handle an image upload. I do not want to make this article any longer than it needs to be or anymore complex. You should already have some knowledge or experience dealing with image uploads in ASP.NET because in this aspect, not much really changes. For the purposes of this article, I shall be uploading to an Images folder in the application root. You may want to upload to some other location outside the application root (where you won't incur file change notifications) or store in your database.

So, let's begin by manually creating a folder "Images" in our application root.

First, let's tap into the ImageUploaded event handler. This handler will fire every time an image is being uploaded via the file uploader.

ImageUploaded event handler

and voila, here is our handler:

protected void Editor1_ImageUploaded(object sender, UploadedImageFileEventArgs e)
{

}

Now, it's time to write some code to save our file on the file system. Needless to say, you can save it wherever you like. Note the second argument in the event handler UploadedImageFileEventArgs. This argument returns us an instance of HttpPostedFile which can be accessed like this: e.PostedImageFile. OK, so let's write some code against it:

protected void Editor1_ImageUploaded(object sender, UploadedImageFileEventArgs e)
{
    // specify the path on the server to
    // save the uploaded file to.
    string savePath = Server.MapPath(@"~\Images\");
    // Get the name of the file uploaded
    // and append it to the path.
    savePath += e.PostedImageFile.FileName;
    //now lets save the file stream
    e.PostedImageFile.SaveAs(savePath);
    //phew. That was easy. Now it's time to 
    //congratulate ourselves on a job well done :-)
}

Any image you upload now will be saved in your Images directory, Cool. Now, what about being able to browse images saved on the server? In order to do this, Jiffycms HTML Editor exposes an ImageGalleryNode property. This is in reality a simple wrapper around a TreeNode. You just need to enumerate your images on the file system or database and keep adding nodes to it, nesting if you have more than one level.

Let's look at some code:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
    //fill our image gallery with images browsable on the server
        string imagesDirectoryPath = Server.MapPath(@"~/Images/");
        DirectoryInfo di = new DirectoryInfo(imagesDirectoryPath);
        if (di.Exists)
        {
            Editor1.ImageGalleryNode.Text = di.Name;//The folder
            //Now lets add all images to this parent node so
            //it seems like this : 
            /*
                - Images
                    - Image1.jpg
                    - Image2.jpg
             */
            FileInfo[] files = di.GetFiles();
            foreach (FileInfo file in files)
            {
                string pathToImageFile = ResolveUrl(
        string.Format(@"~/Images/{0}", file.Name));
                //create a new TreeNode
                ImagePickerTreeNode tr1 = 
        new ImagePickerTreeNode(file.Name, pathToImageFile);
                //add it to the root node, since we only have one folder
                Editor1.ImageGalleryNode.ChildNodes.Add(tr1);
            }
        }
    }
}

And, there we go, we have now added all the images and they will show up in the gallery.

The image gallery

Oh perfect! That was easy, wasn't it?

Setting up an image gallery in Jiffycms HTML Editor