Images in Email

[Artur]

Hi,

I have a RadRichTextBox to simulate a email client to send email. In this editor is possible to insert images and text.
When the user press send, the document is converted by HtmlFormatProvider export.

The main problem is when a email with an image is sent to Outlook 2010 email client, the image is not shown. I look at the html code sent and i compared to one from the email client.

The generated by the HtmlFormatProvider :

<img width="518" height="163" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAACjCAIAAAArRN8sAAAABGdBTUEAANbY1E9YMgAAAAlwSF ...............

While the image code from the email client look like this:

<img width=622 height=830 id="Picture_x0020_1" src="cid:image001.jpg@01CCA45E.674B7020">

Can some one help me to get the image in the document working in the Outlook?

Thank you

[Boby]

Hello Artur,
You could use HtmlExportSettings.ImageExporting event (as desribed in this help section) and obtain the real image from ImageExportingEventArgs.ImageInline, so you can add it as email attachment.

Greetings,
Boby
the Telerik team

[Vipin Panwar]

Hi Telerik team,

http://www.telerik.com/forums/problem-with-exporting-raddocument-in-html-using-htmlformatprovider

I tried above by converting to Silverlight application... I tried to attached the code as zip with this post but unable to as getting error.

I am using HtmlDataProvider with Silvelight Telerik RadRichTextBox​ as we have to export into html format  and save string to db.

I have a Silverlight Telerik RadRichTextBox to simulate a email client to send email. I am using Rad rich test box in a RadWindow that have utility to send email with embedded inline picture to the specific user.

When we insert the picture in the RadRichTextBox and send the email, then the picture not visible in the Outlook at the receiving end and on click download picture it is not being downloaded.

But when i open the same email on browser at the receiving end then a picture appear but the half part cut down as i verify the raw data is being truncated from the trail for the picture bytes embedded inline.

 I tried Base64Encoded with others telerik HtmlExportSettings too. But not meet witht he solution to this problem.

Please I am wondering if anyone from Telerik team assist me for the same. It's very urgent to implement.

Below are the settings that i am using with HtmlDataProvider

<telerik:HtmlDataProvider.FormatProvider>
                        <telerik:HtmlFormatProvider>
                            <telerik:HtmlFormatProvider.ImportSettings>
                                <telerik:HtmlImportSettings UseDefaultStylesheetForFontProperties="True" />
                            </telerik:HtmlFormatProvider.ImportSettings>
                            <telerik:HtmlFormatProvider.ExportSettings>
                                <telerik:HtmlExportSettings DocumentExportLevel="Document"
                                                            ExportFontStylesAsTags="True"
                                                            ExportStyleMetadata="False"
                                                            ImageExportMode="AutomaticInline"
                                                            StyleRepositoryExportMode="ExportStylesAsCssClasses"
                                                            StylesExportMode="Inline" />
                            </telerik:HtmlFormatProvider.ExportSettings>
                        </telerik:HtmlFormatProvider>
                    </telerik:HtmlDataProvider.FormatProvider>​

 

Thanks,

Vipin Panwar​

 

[Vipin Panwar]

Hi Telerik team,

is there any update so far on above post by me, It's very urgent that need to implement.

I am wondering by using Telerik controls, Please assist me achieve the above using Silverlight telerik RadRichTextBox.

Thanks,

Vipin

 

[Petya]

Hi Vipin,

HTML consumers such as browsers or email clients occasionally behave inconsistently depending on the way the HTML is produced. That said, the fact that Outlook is not showing the image and browsers do is not something we have control over and I was actually unable to reproduce this on my end.

As far as the image being clipped is concerned, I'm not sure I properly understand the whole scenario or the issue you're observing, but would generally advise exporting the image to a separate file and sending it as another attachment. Here is a small snippet showing how to configure RadRichTextBox and properly subscribe to the respective event:

    HtmlExportSettings htmlExportSettings = new HtmlExportSettings();
    htmlExportSettings.ImageExportMode = ImageExportMode.ImageExportingEvent;
    htmlExportSettings.ImageExporting += htmlExportSettings_ImageExporting;

    htmlFormatProvider.ExportSettings = htmlExportSettings;

void htmlExportSettings_ImageExporting(object sender, ImageExportingEventArgs e)
{
    string data = e.Image.RawData;//preserve this in database
    e.Src = "image1.png"; //set proper src attribute depending on file name
}

As a here is how the HTML fragment with the image would look:

<img width="626" height="501.435532994924" src="image1.png" />

I hope this is useful.

Regards,
Petya
Telerik

[Vipin Panwar]

Hi Petya,

Let me elaborate more, 

In Silverlight application we have send email utility, in which we are using telerik controls.

We need to allow user to insert picture embedded/inline in RadRichTextBox as we do similarly in the outlook with the help of telerik RadRichTextBox.and HtmlDataProvider.

I am able to insert picture with the help of Telerik standard commands (telerik:RadRichTextBoxRibbonUI.RichTextCommand="{Binding InsertPictureCommand}"​) with the html data provider. We are able to save the converted html string data by RadRichTextBox to database.

But when we are sending the email with the help of SMTPClient then the string html data was truncated from he end resultant we are getting incomplete byte array. This email show up the embedded incomplete image while open the email on browser but not show up in outlook. Also image bytes is incomplete.

Please let me know if additional information is required. I found many blogs with same problem on telerik support forums but no suitable solution so far from Telerik team.

Thanks,

Vipin

 

 

 

 

[Vipin Panwar]

Additional to above it may be a pictuer/logo either from an absolute path (Browsed from local machine) or relative path (within the application images folder).

[Petya]

Hi Vipin,

If I properly understand you, the observed problem doesn't come from the HTML export functionality of RadRichTextBox but is related to the SMTPClient, so I couldn't say what is the exact cause or provide a suggestion on how to resolve this. Here are a couple of resources I found online that might help though:
- Send inline image in email on stackoverflow
- C# sending mails with images inline using SmtpClient on stackoverflow

As a general suggestion, when working with with emails embedding the images is not usually a good idea. Did you try the option to send the images as a separate attachment? 

Regards,
Petya
Telerik

[Vipin Panwar]

Hi Telerik Team,

Need expert assistance from you guys about below scenario,

Scenario: I am using Telerik Silverlight RadRichtextBox to simulate a email client to send email in my Silverlight application. Below are the import/export setting to insert embedded image/picture inline in rich text box using URI by browse the image file using open File dialog to send the email. 

To send the inserted image as embedded inline in email, we are copying image on server to send them as linked resource so that embedded image can appear at the receiver end. That i am fine with to do.

But the picture is not visible when we clicked on the email currently send because of client side image source path was absolute(@"C:\Pictures\test.jpg") as image not exist in Silverlight client side. So i decided to save image client side in isolated storage.

Can you please assist me how can we set the image souce path from the isolated storage so the image visible after refresh or send the email.

(radRichTextBox.InsertInline(new ImageInline(stream) { UriSource = new Uri(absolutePath, UriKind.Absolute) });)

 Import/Export Settings:

 <telerik:HtmlFormatProvider.ImportSettings>
     <telerik:HtmlImportSettings UseDefaultStylesheetForFontProperties="True" />
</telerik:HtmlFormatProvider.ImportSettings>

<telerik:HtmlFormatProvider.ExportSettings>
    <telerik:HtmlExportSettings DocumentExportLevel="Document"
                    ExportFontStylesAsTags="True"
                    ExportStyleMetadata="False"
                    ImageExportMode="UriSource"
                    StyleRepositoryExportMode="DontExportStyles"
                    StylesExportMode="Inline" />
</telerik:HtmlFormatProvider.ExportSettings>

 Please let me know if additional information is required.

Thanks,

Vipin

[Petya]

Hello Vipin,

Working with the images during export is demonstrated in the previous posts. When importing HTML in RadRichTextBox, you can handle the image by subscribing to the LoadImageFromUrl event of the import settings.

As to working with isolated storage, please have a look at this thread.

Regards,
Petya
Telerik