Image browsing & uploading in HTML editor

Aug 31, 2010 at 12:55 PM

Hi,

i couldnt find anything (and yes i tried to find) how to upload, browse and insert images in the new typps.

I DID find some articles how to do it in jiffycms but i couldnt use them, because of some changed property names.

So what i'am looking for is:

How can my users use the typps html editor with images, which they upload and select by themselves?

thx in advance!

cheers

fritz

Coordinator
Aug 31, 2010 at 1:09 PM

Hello, you'll have to download the examples project ( you'll find it as one of the downloads ) ; Follow the examples provided. You'll see how to work with the image picker within the context of the HTML editor. As for file uploads, continue on the ImagePicker examples.

The HTML editor uses this same control internally anyway and it's exposed as a complex property EmbeddedImagePicker.  I've completed the documentation regarding the ImagePicker here : http://docs.typps.com/2010/08/image-picker.html

<t:Editor ID="Editor1" runat="server">
        <EmbeddedImagePicker ID="ImagePicker1"....>
        </EmbeddedImagePicker>
    </t:Editor>

Everything you see in the imagepicker document, examples etc apply in the same manner to the EmbeddedImagePicker property because the return type is the ImagePicker control. 

Sep 8, 2010 at 1:39 AM

I keep getting the following error in the code behind...  Typps Editor does not contain a definition for "ImageGalleryNode"

Can you help with this error?

Thanks!

Coordinator
Sep 8, 2010 at 1:40 PM
Diesel wrote:

I keep getting the following error in the code behind...  Typps Editor does not contain a definition for "ImageGalleryNode"

Can you help with this error?

Thanks!

Hello, ImageGalleryNode is a property of the ImagePicker control. So you cannot access this property directly from the Editor instance but rather on EmbeddedImagePicker. 

So instead of  Editor1.ImageGalleryNode use Editor1.EmbeddedImagePicker.ImageGalleryNode

Follow the example code in the examples download, I have included some sample code there. Unfortunately the documentation for the HTML Editor is still a work in progress, but I will release it soon.

Sep 8, 2010 at 6:06 PM

Thanks for the quick response…

I think I’m getting close; it’s still not working…

Here is what I have…

    protected void Editor1_BrowseFilesServerRequest(object sender, EventArgs e)

    {

        string imagesDirectoryPath = Server.MapPath(@"~/ImagePicker/Images/");

        DirectoryInfo di = new DirectoryInfo(imagesDirectoryPath);

        if (di.Exists)

        {

            Editor1.EmbeddedImagePicker.ImageGalleryNode.Text = "My Album";

            FileInfo[] files = di.GetFiles();

            foreach (FileInfo file in files)

            {

                string pathToImageFile = ResolveUrl(

        string.Format(@"~/ImagePicker/Images/{0}", file.Name));

                HTreeNode node = new HTreeNode();

                node.Text = file.Name;

                node.Value = pathToImageFile;

                node.ToolTip = "Include a tooltip";

                Editor1.EmbeddedImagePicker.ImageGalleryNode.ChildNodes.Add(node);

            }

        }

    }

Am I missing something?

Coordinator
Sep 8, 2010 at 6:35 PM

Yes, that's more or less the code from the samples, however you are attaching to BrowseFilesServerRequest, it seems. The editor exposes a handler to browse files* as opposed to images on the server. eg : 

you seemed to be hooked up to the file browsers handler -> OnBrowseFilesServerRequest="Editor1_BrowseFilesServerRequest"

This is exposed directly on the Editor, instead what you need to do is subscribe to the image pickers browse handler like this : 

<t:Editor ID="Editor1">
        <EmbeddedImagePicker ID="ImagePicker1"
            ImageUploadEnabled="false"
            OnBrowseServerRequest="ImagePicker_BrowseServerRequest" runat="server">
        </EmbeddedImagePicker>
    </t:Editor>
While the image picker is also a standalone control, the editor uses it as well to edit and display images etc and we expose it as a complex property in the way you see above.

Sep 8, 2010 at 6:51 PM

Thank you that was it!!

This is Great!!