Articles in this section
Category / Section

How to upload and download the text from RichTextEditor to Azure storage

3 mins read

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

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied