Blazor Server Rich Text Editor Image Upload and Delete from Azure Storage with .net core 7

Question

I want to store uploaded images, audio, and video in Azure Storage with my Blazor server app. The Syncfusion documentation is for a only hosted API.

I have found older examples for API or MVC.

https://www.syncfusion.com/forums/160405/sfuploader-working-with-azure-storage-blobs

https://www.syncfusion.com/forums/154255/how-to-save-image-to-azure-blob

I am looking for an example for asp.net core 7 blazor server for the with upload and delete of image, audio, and video. Thanks

<SfRichTextEditor>
    <RichTextEditorToolbarSettings Items="@Items" />
        <RichTextEditorEvents FileUploading="@onFileUploading">RichTextEditorEvents>

<RichTextEditorImageSettings SaveUrl="api/Image/Save" Path="./Images/" />
   <RichTextEditorAudioSettings SaveUrl="api/Audio/Save" Path="./Audio/">RichTextEditorAudioSettings>

<RichTextEditorVideoSettings SaveUrl="api/Video/Save" Path="./Video/">RichTextEditorVideoSettings>


SfRichTextEditor>

async Task onFileUploading(){


// Construct the blob container endpoint from the arguments.string containerEndpoint = string.Format("https://{0}.blob.core.windows.net/{1}",
                                                accountName,
                                                containerName);


    // Get a credential and create a client object for the blob container.
    BlobContainerClient containerClient = new BlobContainerClient(new Uri(containerEndpoint),
                                                                    new DefaultAzureCredential());


    try
    {
        // Create the container if it does not exist.await containerClient.CreateIfNotExistsAsync();


        // Upload text to a new block blob.byte[] byteArray = Encoding.ASCII.GetBytes(blobContents);


        using (MemoryStream stream = new MemoryStream(byteArray))
        {
            await containerClient.UploadBlobAsync(blobName, stream);
        }
    }
    catch (Exception e)
    {
        throw e;
    }


}

Barry · Answer

here is a working example for adding but I still need an example for deleting

The Razor Page

@using Azure.Storage.Blobs;
@using Microsoft.EntityFrameworkCore;
@using System.ComponentModel.DataAnnotations;
@using System.Text.Json.Serialization;
@inject ILogger<PageAdmin> logger
@inject IConfiguration Configuration
@inject BlobServiceClient blobServiceClient

<SfRichTextEditor ShowCharCount="true" @ref="RteObj" Value="@pageHTML" Enabled="@Enabled" Height="500">
    <RichTextEditorToolbarSettings Items="@Tools" />
    <RichTextEditorQuickToolbarSettings Table="@TableQuickToolbarItems" Image="@Image" Link="@Link" Audio="AudioQuickToolbarItems" Video="VideoQuickToolbarItems" />


    <RichTextEditorEvents ValueChange="@ValueChange" Blur="@Blur" ImageDelete="@ImageDelete"></RichTextEditorEvents>
    <RichTextEditorImageSettings SaveUrl="api/azurestorage/save/images" Path="@ImagePath"></RichTextEditorImageSettings>
    <RichTextEditorAudioSettings SaveUrl="api/azurestorage/save/audios" Path="@AudioPath"></RichTextEditorAudioSettings>
    <RichTextEditorVideoSettings SaveUrl="api/azurestorage/save/videos" Path="@VideoPath"></RichTextEditorVideoSettings>
</SfRichTextEditor>


@code {
    private string? BlobPath { get; set; }
    private string? ImagePath { get; set; }
    private string? AudioPath { get; set; }
    private string? VideoPath { get; set; }


  protected override void OnInitialized()
    {
        BlobPath = Configuration["StorageConnectionString:blob"]; // + "images/";

        ImagePath = BlobPath + "images/";
        AudioPath = BlobPath + "audios/";
        VideoPath = BlobPath + "videos/";
}

the Controller

using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Net.Http.Headers;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Http.Features;
using Azure.Storage.Blobs;
using Azure.Storage.Blobs.Models;


namespace Arbitration.Controllers
{
    [Route("api/[controller]/[action]")]
    [ApiController]
    public class AzureStorageController : Controller
    {
        private IWebHostEnvironment hostingEnv;
        private BlobServiceClient blobServiceClient;


        public IActionResult Index()
        {
            return View();
        }
        public AzureStorageController(IWebHostEnvironment env, BlobServiceClient _blobServiceClient)
        {
            hostingEnv = env;
            blobServiceClient = _blobServiceClient;
        }


        [HttpPost("{fileType}")]
        [Route("Save")]
        public async Task Save(IList UploadFiles, string fileType)
        {
            try
            {
                if (UploadFiles != null)
                {
                    foreach (var file in UploadFiles)
                    {
                        var blobClient = blobServiceClient.GetBlobContainerClient(fileType);
                        await blobClient.CreateIfNotExistsAsync(PublicAccessType.Blob);


                        // Get a reference to a blob
                        var blob = blobClient.GetBlobClient(file.FileName);
                        if (await blob.ExistsAsync() != true)
                        {
                            //                        await blobClient.UploadBlobAsync(
                            //file.FileName, file.OpenReadStream());
                            using (var stream = file.OpenReadStream())
                            {
                                await blob.UploadAsync(stream);
                            }
                        }
                    }
                }
            }
            catch (Exception e)
            {
                Response.Clear();
                Response.StatusCode = 204;
                Response.HttpContext.Features.Get().ReasonPhrase = "File failed to upload";
                Response.HttpContext.Features.Get().ReasonPhrase = e.Message;
            }
        }
    }
}

Vinothkumar Yuvaraj · Answer

Hi Barry,We would like to inform you that, by default, we do not have the property in the RichTextEditorImageSettings to remove the image from the editor. We suggest that you use the ImageDelete event to call the remove method in the controller by using PostAsJsonAsync. Please refer to the following code and attached sample for your reference. @code { private string fileName { get; set; } private void onImageUploading(ImageUploadingEventArgs args) { fileName = args.FilesData[0].Name; } private async Task onImageDelete(object args) { await Http.PostAsJsonAsync(https://localhost:7219/api/Home/Remove, fileName); } } HomeController.cs [ApiController] public class HomeController : ControllerBase { [HttpPost("[action]")] [Route("api/Home/Remove")] public void Remove([FromBody] string fileName) { string targetPath = hostingEnv.ContentRootPath + \wwwroot\Images; fileName = targetPath + $@"\{fileName}"; if (System.IO.File.Exists(fileName)) { System.IO.File.Delete(fileName); } } } API Link : https://blazor.syncfusion.com/documentation/rich-text-editor/events#beforeuploadimageCan you please check the shared sample and let us know, if it meets your requirement ?Regards,VinothkumarAttachment: BlazorApp1_626c130a.zip