How to save image to Azure blob ?

[Charles]

I'm testing Blazor Rich Text Editor component on Balzor Server-side with Azure Blob.

I find information about ASP.NET Core MVC

<SfRichTextEditor>
    <RichTextEditorImageSettings SaveUrl="/api/SampleData/SaveFile" Path="../Images/"></RichTextEditorImageSettings>
</SfRichTextEditor>

How should I save image on Azure Blob using this component ?

[Indrajith Srinivasan]

Hi Charles, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query.  Yes, we have prepared a sample for uploading the Image to Server-side, in the Azure Blob with Rich Text Editor. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/154255/ze/RTE_image_azure_blob1656532927

Can you please check the above sample and let us know if you face any difficulties,

Regards, 

Indrajith 

[Charles]

Thank you so much.

I solved problem with your good advise!

I have one more question.
I add image on Rich Text Editor based on your advise. and How sould I remove it.

I try to use OnImageRemoving events but not working

[Indrajith Srinivasan]

Hi Charles,

Thanks for the update,

We are not clear with your requirements. Can you please share us more details regarding the reported query ? 

 

• Need to remove the Image from the Rich Text Editor content ?
• Need to remove the uploaded image with Rich Text Editor ?

 

So that we can validate and provide solution based on the reported query. 

 

Regards, 

Indrajith 

[Charles]

Thank you so much your quick reply.

Rich Text Editor's contents save on MS-SQL as TEXT field.

I cannot save image to database TEXT field. so saved html contents ONLY to TEXT field and saved image on Azure Blob.

Save image function is working based on your advise.

But, I read saved contents for edit and delete existing image on editor.

I need to remove uploaded image of Azure Blob also.

I used "OnImageRemoving" event to remove image that saved on Azure Blob. but cannot remove image.

Which event should I use to remove image ?

<SfRichTextEditor CssClass="tanweb-rte"

  EditorMode="EditorMode.HTML"

  @bind-Value="@selectedObject.Notes">

  <RichTextEditorToolbarSettings Items="@Toolbar"></RichTextEditorToolbarSettings>

  <RichTextEditorImageSettings SaveUrl="api/RtfImage/SaveImage" Path="https://tanstorageserver.blob.core.windows.net/tan-public/student/rtfeditor/">  

  </RichTextEditorImageSettings>

  <RichTextEditorEvents OnImageRemoving="OnRemoveImage"></RichTextEditorEvents>

</SfRichTextEditor>

        [HttpPost]

        [Route("SaveImage")]

        public async Task SaveImage(IList<IFormFile> uploadFiles)

        {

            try

            {

                foreach (var file in uploadFiles)

                {

                    const string containerName = "tan-public";

                    const string connectionString = "DefaultEndpointsProtocol=https;AccountName=tanstorageserver;AccountKey=*****;EndpointSuffix=core.windows.net";

                    var container = new BlobContainerClient(connectionString, containerName);

                    await container.CreateIfNotExistsAsync();

                    BlobClient blob = container.GetBlobClient("student/rtfeditor/" + file.FileName);

                    var stream = file.OpenReadStream();

                    await blob.UploadAsync(stream);

                }

            }

            catch(Exception ex)

            {

                Response.Clear();

                Response.StatusCode = 204;

                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File failed to upload";

                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = ex.Message;

            }

        }

[Indrajith Srinivasan]

Hi Charles,

We are currently validating your reported query and will update you with further details in two business days by 21st May.

Regards,
Indrajith

[Indrajith Srinivasan]

Hi Charles, 

 

Sorry for the delayed response, 

 

We have further validated on the reported query. The event ImageDelete will be triggered if the image is removed from the Rich Text Editor content. Can you refer the below docs, to remove the azure stored blob image. 

 

API link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorEvents.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorEvents_ImageDelete 

 

Documentation: https://docs.microsoft.com/en-us/python/api/azure-storage-blob/azure.storage.blob.blobclient?view=azure-python#delete-blob-delete-snapshots-false----kwargs- 

 

Regards, 

Indrajith 

[Charles]

Thank you for your advise.

ImageDelete event return object type, How should I get image name that want to delete from Rich Text Editor ? 

[Indrajith Srinivasan]

Hi Charles,  

  

Good day to you,
  

We have validated your reported query and have considered “ImageDelete eventArgs in RichTextEditor is object type” as a bug from our end and logged the report for the same, the fix will be included with our patch release on the Mid of June 2020.

You can now track the current status of the report, review the proposed resolution timeline, and contact us for any further inquiries through this link: https://www.syncfusion.com/feedback/14665/ 

Regards,  

Indrajith 

[Indrajith Srinivasan]

Hi Charles,

Sorry for the inconvenience caused,

Due to complexity is fixing the reported issue from our end, the fix is not included with our patch release. We will include the fix with our patch release on 23rd June 2020.

Regards, 

Indrajith 

[Indrajith Srinivasan]

Hi Charles, 

 

Thanks for your patience, 

 

We have resolved the reported issue “ImageDelete eventArgs returned as object type” with Rich Text Editor and the fix is now available with the package version 18.1.59. You can now get the image name in event OnImageDelete using AfterImageDeleteEventArgs.  

 

 

   private void onDelete(AfterImageDeleteEventArgs args) 

    { 

        var ImageSrc = args.Src.ToString(); 

        GetImageName = ImageSrc.Split('/'); 

        // Get the file name based on the Src path string returned 

        var Filename = GetImageName[2]; 

 

    } 

 

Can you please upgrade your package to this version to resolve the issue from your end? 

 

Regards, 

Indrajith 

[Charles]

Thank you so much.

It's perfect.

[Indrajith Srinivasan]

Hi Charles,

Welcome,

Please get back to us if you need any further assitance.

Regards,
Indrajith