How to upload and download the text from RichTextEditor to Azure storage
This article explains how to upload and download a text from the Azure storage and save it as Word and PDF format in the SfRichTextEditor.
Step 1: Create a Storage Account in Azure
In the Azure portal, you must create a Storage account service. For more information about storage account, please refer to this link . After creating a storage account, check your access keys and connection strings.
Step 2:
Create a SfRichTextEditor sample with all the necessary assemblies. Refer to this Getting started documentation to create and configure a simple SfRichTextEditor sample.
XAML
<ContentPage.Content>
<ScrollView>
<StackLayout Margin="40">
<Button x:Name="uploadButton"
Text="Upload"
Clicked="OnUploadButtonClicked" />
<richtexteditor:SfRichTextEditor x:Name="RichTextEditor" HtmlText="{Binding RTEText}"
ToolbarOptions="Bold,Italic,Underline,Alignment,BulletList,NumberList,FontSize,FontColor,HighlightColor,Undo"
ToolbarPosition="Top" />
<ActivityIndicator x:Name="activityIndicator" />
<Button x:Name="downloadButton"
Text="Download"
Clicked="OnDownloadButtonClicked"
IsEnabled="false" />
<richtexteditor:SfRichTextEditor x:Name="editor" HeightRequest="150" ShowToolbar="False"/>
<Button x:Name="btnGenerateWord" Clicked ="OnWordButtonClicked" Text ="Export as Word document" ></Button>
<Button x:Name="btnGeneratePDF" Clicked ="OnPDFButtonClicked" Text ="Export as PDF document" ></Button>
</StackLayout>
</ScrollView>
</ContentPage.Content>
Step 3: Creating a Container
Using the connection string, we can get the container details.
C#
static CloudBlobContainer GetContainer(ContainerType containerType)
{
var account = CloudStorageAccount.Parse(Constants.StorageConnection);
var client = account.CreateCloudBlobClient();
return client.GetContainerReference(containerType.ToString().ToLower());
}
Note: you have to place the Azure storage connection string in the ‘Constants.cs’ file.
Step 4: Uploading Data to a Container
Upload files to azure blob storage.
C#
async void OnUploadButtonClicked(object sender, EventArgs e)
{
if (!string.IsNullOrWhiteSpace(RichTextEditor.HtmlText))
{
activityIndicator.IsRunning = true;
var byteData = Encoding.UTF8.GetBytes(RichTextEditor.HtmlText);
uploadedFilename = await AzureStorage.UploadFileAsync(ContainerType.Text, new MemoryStream(byteData));
downloadButton.IsEnabled = true;
activityIndicator.IsRunning = false;
}
}
public static async Task<string> UploadFileAsync(ContainerType containerType, Stream stream)
{
var container = GetContainer(containerType);
await container.CreateIfNotExistsAsync();
var name = Guid.NewGuid().ToString();
var fileBlob = container.GetBlockBlobReference(name);
await fileBlob.UploadFromStreamAsync(stream);
return name;
}
Step 5: Downloading Data from a Container
Download files to azure blob storage.
C#
async void OnDownloadButtonClicked(object sender, EventArgs e)
{
if (!string.IsNullOrWhiteSpace(uploadedFilename))
{
activityIndicator.IsRunning = true;
var byteData = await AzureStorage.GetFileAsync(ContainerType.Text, uploadedFilename);
var text = Encoding.UTF8.GetString(byteData);
downloadedHtmlText = text;
editor.HtmlText = text;
activityIndicator.IsRunning = false;
}
}
public static async Task<byte[]> GetFileAsync(ContainerType containerType, string name)
{
var container = GetContainer(containerType);
var blob = container.GetBlobReference(name);
if (await blob.ExistsAsync())
{
await blob.FetchAttributesAsync();
byte[] blobBytes = new byte[blob.Properties.Length];
await blob.DownloadToByteArrayAsync(blobBytes, 0);
return blobBytes;
}
return null;
}
Add the following code example to the button click event handler to export Rich Text Editor text to Word and PDF document.
C#
private void OnPDFButtonClicked(object sender, EventArgs e)
{
Assembly assembly1 = typeof(App).GetTypeInfo().Assembly;
string fileName = "RTE.pdf";
//Create an instance of WordDocument Instance (Empty Word Document).
WordDocument document = new WordDocument();
//Add a section & a paragraph to the empty document.
document.EnsureMinimal();
//Append HTML string to Word document paragraph.
document.LastParagraph.AppendHTML(IgnoreVoidElementsInHTML(downloadedHtmlText));
//Instantiation of DocIORenderer for Word to PDF conversion.
DocIORenderer render = new DocIORenderer();
//Convert Word document to PDF document.
PdfDocument pdf = render.ConvertToPDF(document);
//Release all resources used by the Word document and DocIO Renderer objects.
render.Dispose();
document.Close();
//Save the PDF file.
MemoryStream outputStream = new MemoryStream();
pdf.Save(outputStream);
//Close the instance of PDF document object.
pdf.Close();
if (Device.OS == TargetPlatform.WinPhone || Device.OS == TargetPlatform.Windows)
DependencyService.Get<ISaveWindowsPhone>()
.Save(fileName, "application/pdf", outputStream);
else
DependencyService.Get<ISave>().Save(fileName, "application/pdf", outputStream);
}
private void OnWordButtonClicked(object sender, EventArgs e)
{
Assembly assembly1 = typeof(App).GetTypeInfo().Assembly;
Stream inputStream = null;
string fileName = "RTE.docx";
//Create an instance of WordDocument Instance (Empty Word Document).
WordDocument document = new WordDocument();
//Add a section & a paragraph to the empty document.
document.EnsureMinimal();
//Append HTML string to Word document paragraph.
document.LastParagraph.AppendHTML(IgnoreVoidElementsInHTML(downloadedHtmlText));
MemoryStream outputStream = new MemoryStream();
//Save the Word document.
document.Save(outputStream, Syncfusion.DocIO.FormatType.Docx);
//Close the instance of Word document object.
document.Close();
if (Device.OS == TargetPlatform.WinPhone || Device.OS == TargetPlatform.Windows)
DependencyService.Get<ISaveWindowsPhone>()
.Save(fileName, "application/msword", outputStream);
else
DependencyService.Get<ISave>().Save(fileName, "application/msword", outputStream);
}
The sample that explains how to upload and download a text from the Azure storage and save it as Word or PDF format in the Rich Text Editor text can be downloaded here.
See Also:
https://www.syncfusion.com/xamarin-ui-controls/xamarin-rich-text-editor