Home > Uncategorized > TinySLUpload data:base64 format

TinySLUpload data:base64 format

Using the TinySLUpload plugin for TinyMCE is a great silverlight plugin that allows image uploading to any .NET based TinyMCE content management system.

As good as it is, I was looking for a way of embedding the image into the content, so that the image did not have to be hosted on the same server as the CMS system.  by using the “data:” URI format specifier for an image,

This is how an image can be represented as part of the HMTL thus:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

So, I modified the XAML of TinySLUpload to include an option to embed the image:

<CheckBox x:Name=”cbEmbedImage” IsChecked=”true” Content=”Embed Image”></CheckBox>

Then added code into UpdateShowProgress to handle the conversion from binary to base64


if (cbEmbedImage.IsChecked == true)
{
if (fileColl.Count > 1)
{
ShowError();
return;
}
var fs = fileColl[0].OpenRead();
int intLength = (int)fileColl[0].Length;
byte[] data = new byte[intLength];
fs.Read(data,0,intLength);
var embedded = “data:image/png;base64,” + Convert.ToBase64String(data);
HtmlPage.Window.Invoke(“PopulateFromSL”, embedded);
}
else
{
HtmlPage.Window.Invoke(“PopulateFromSL”, UploadConfig.ImagePath + _file.Name);
}

 

Handily, since PopulateFromSL still returns a valid image URI path, no other changes are required outside of the silverlight. Of course you still need to compile it to XAP and overwrite the TinySLUpload.xap in the TinyMce\ Plugins \ Advimage folder.

 

 

Advertisements
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: