How to Store Images Pasted in ASP.NET Core Rich Text Editor?

This article provides guidance on how to store images pasted in the ASP.NET Core Rich Text Editor component into an Amazon S3 bucket within an ASP .NET Core project. The implementation includes both frontend configuration and backend handling for image uploads.

Rich Text Editor Configuration

To configure the Rich Text Editor for image uploads, you need to set the insertImageSettings with the appropriate saveUrl. Below is an example of how to set this up:

<ejs-richtexteditor>
    <e-richtexteditor-insertimagesettings saveUrl="/Home/AmazonS3Upload" path="./Uploads/">
    </e-richtexteditor-insertimagesettings>
</ejs-richtexteditor>

Backend Implementation

The backend controller handles image uploads by processing incoming requests, managing file storage, and uploading images to Amazon S3.

Controller Implementation

The HomeController class is responsible for handling image uploads and retrievals. It includes the following functionalities:

Key Functionalities

Constructor: Initializes the AmazonS3FileProvider and registers the S3 bucket using AWS credentials.

AmazonS3Upload: Manages image uploads, handles chunked uploads for large files, uploads images to S3, and returns a response.

AmazonS3GetImage: Retrieves images stored in Amazon S3 based on the specified path and ID

public class HomeController : Controller
{
    private readonly IWebHostEnvironment hostingEnvironment;
    private readonly AmazonS3FileProvider operation;

    public HomeController(IWebHostEnvironment hostingEnvironment)
    {
        this.hostingEnvironment = hostingEnvironment;
        this.operation = new AmazonS3FileProvider();
        this.operation.RegisterAmazonS3("<---bucketName--->", "<---awsAccessKeyId--->", "<---awsSecretAccessKey--->", "<---region--->");
    }

    // Uploads the file(s) into a specified path
    [Route("AmazonS3Upload")]
    public IActionResult AmazonS3Upload(string path, IList<IFormFile> uploadFiles, string action, string data)
    {
        FileManagerResponse uploadResponse;
        FileManagerDirectoryContent[] dataObject = new FileManagerDirectoryContent[1];
        var options = new JsonSerializerOptions
        {
            PropertyNamingPolicy = JsonNamingPolicy.CamelCase,
        };
        dataObject[0] = JsonSerializer.Deserialize<FileManagerDirectoryContent>(data, options);
        
        foreach (var file in uploadFiles)
        {
            var folders = (file.FileName).Split('/');
            // Checking the folder upload
            if (folders.Length > 1)
            {
                for (var i = 0; i < folders.Length - 1; i++)
                {
                    if (!this.operation.checkFileExist(path, folders[i]))
                    {
                        this.operation.ToCamelCase(this.operation.Create(path, folders[i], dataObject));
                    }
                    path += folders[i] + "/";
                }
            }
        }

        int chunkIndex = int.TryParse(HttpContext.Request.Form["chunk-index"], out int parsedChunkIndex) ? parsedChunkIndex : 0;
        int totalChunk = int.TryParse(HttpContext.Request.Form["total-chunk"], out int parsedTotalChunk) ? parsedTotalChunk : 0;
        uploadResponse = operation.Upload(path, uploadFiles, action, dataObject, chunkIndex, totalChunk);
        
        if (uploadResponse.Error != null)
        {
            Response.Clear();
            Response.ContentType = "application/json; charset=utf-8";
            Response.StatusCode = Convert.ToInt32(uploadResponse.Error.Code);
            Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = uploadResponse.Error.Message;
        }
        
        return Content("");
    }

    // Gets the image(s) from the given path
    [Route("AmazonS3GetImage")]
    public IActionResult AmazonS3GetImage(FileManagerDirectoryContent args)
    {
        return operation.GetImage(args.Path, args.Id, false, null, args.Data);
    }
}

Note

Replace “YourControllerName” with the actual name of your controller.
Replace placeholder values like “your-bucket-name”, “your-access-key-id”, “your-secret-access-key”, and “your-region” with actual AWS credentials and configurations.

Additional References

Conclusion
I hope you enjoyed learning how to store images pasted in ASP.NET Core Rich Text Editor.

You can refer to our ASP.NET Core Rich Text Editor feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.

You can also explore our ASP.NET Core Rich Text Editor example to understand how to present and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)