Network Programming in .NET

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.