Uploading local images thru FTP for remote publishing

It is a common need to upload local images to a remote hosting if you use this editor to a desktop composer for a BLOG or if you plan to publish the Editor content to a remote CMS.

The editor has a special method FTPUploadLocalImagesAndUpdateHtmlWithAbsoluteUrlsAsync(); it can be called as

wpfHtmlEditor1.Content.FTPUploadLocalImagesAndUpdateHtmlWithAbsoluteUrlsAsync();

If you call this method, the editor will upload all the local images to your FTP server asynchronously and once the upload is completed, this method will update the BodyHTML in such a way that, all images who had src attribute pointing to the local path would be changed to the new internet URL. Once this transformation is done, you can safely publish your content to your remote site.

Oh yes, before you call this method, of course you would need to setup your FTP settings and that can be done from the Property Editor in Visual Studio, the FTP settings are available under the Options composite property as shown here:

As this method call is Asynchronous, you can optionally handle the Status_Changed event to get the upload progress and update your status bar in your application.

Once you have setup the FTP Settings, and handled the StatusChanged event, you can add a button in your Window labelled "Upload to FTP". Also you may add a status label for displaying the upload progress. Now, lets follow the following Work Flow and you may grasp the idea about this special API.

1. Insert a local image from your computer:

2. Write code in Code Behind as shown here:

C#

private void BtnUploadFtp_Click(object sender, RoutedEventArgs e)
{
    wpfHtmlEditor1.Content.FTPUploadLocalImagesAndUpdateHtmlWithAbsoluteUrlsAsync();
}

private void wpfHtmlEditor1_StatusChanged(object sender, SpiceLogic.WpfHtmlEditor.EditorEventArgs.StatusChangedEventArgs e)
{
    LblFTPUploadStatus.Content = e.StatusMessage;
}

Private Sub BtnUploadFtp_Click(sender As Object, e As RoutedEventArgs)
	wpfHtmlEditor1.Content.FTPUploadLocalImagesAndUpdateHtmlWithAbsoluteUrlsAsync()
End Sub

Private Sub wpfHtmlEditor1_StatusChanged(sender As Object, e As SpiceLogic.WpfHtmlEditor.EditorEventArgs.StatusChangedEventArgs)
	LblFTPUploadStatus.Content = e.StatusMessage
End Sub

3. Now, click the 'Upload to FTP' button.

4. Now, select the image and open the Image Dialog to check the image src url:

5. Oh, yes, check your remote folder using your FTP client. The image has been uploaded.