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