Setting up an image gallery in Jiffycms HTML Editor

Jiffycms HTML Editor has a builtin image gallery or rather an "Image Picker", which in turn 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 serverside. 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.

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 can we can run the HTML Editor, we first need to disable RequestValidation. This is a rich text box that takes HTML as input, so this is only logical that you want to disable request validation for this 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 :

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 note 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, lets 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 purpose of this article I shall be uploading to an Images folder in application root. You may want to upload to some other location outside application root (where you won't incur file change notifications) or store in your database.

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

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 ofcourse save it where ever 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 presto :

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 now added all images and they will show up in the gallery.

oh perfect. That was easy, wasn't it ?