Issues with Uploading Videos To Azure Blob

[Andrew Sabin]

Hey there Syncfusion Support Team,

I have been trying to set videos to upload over to my Azure Blob Storage. However, when I try to do so it keeps setting the value to a blob value local to the localhost:

I have been trying to use the same controller function on the backend as I did with my image upload: 

[HttpPost("Save")]
[Consumes("multipart/form-data")]

public async Task<IActionResult> Save([FromForm] IList<IFormFile> UploadFiles)
{
    if (UploadFiles == null || UploadFiles.Count == 0)
        return BadRequest("No files uploaded.");

    var storageString = _configuration.GetValue<string>("storageconnectionstring");
    if (storageString == null)
        return (IActionResult)Results.Problem(title: "Invalid connection to media storage",
            statusCode: 500);

    var containerName = Request.Headers["containerName"];
    var blobDirectory = Request.Headers["blobDirectory"];

    try
    {
        var savedFiles = new List<string>();
        var filePaths = new List<string>();

        foreach (var file in UploadFiles)
        {
            if (file == null || file.Length == 0)
                continue;

            string filename = file.FileName;

            var container = new BlobContainerClient(storageString, containerName);

            var createResponse = await container.CreateIfNotExistsAsync();

            if (createResponse != null && createResponse.GetRawResponse().Status == 201)
                await container.SetAccessPolicyAsync(PublicAccessType.Blob);

            string blobPath = string.IsNullOrEmpty(blobDirectory) ?
                filename : $"{blobDirectory}/{filename}";

            var blob = container.GetBlobClient(blobPath);

            await blob.DeleteIfExistsAsync(DeleteSnapshotsOption.IncludeSnapshots);

            using (var fileStream = file.OpenReadStream())
            {
                await blob.UploadAsync(fileStream, new BlobHttpHeaders { ContentType = file.ContentType });
            }

            var filePath = {filepath}; //changed to be kept private

            savedFiles.Add(file.FileName);
            filePaths.Add(imagePath);
        }

        return Ok(new { files = savedFiles, fileLocations = filePaths });
    }
    catch (Exception ex)
    {
        // return problem details / 500
        return Problem(detail: ex.Message);
    }
}

And set the value to the RichTextEditorMediaSettings like this:

<SfRichTextEditor @ref="rteObj" Placeholder="@Placeholder" @bind-Value="@Content" MaxLength="@MaxLength" ShowCharCount="true">
    <RichTextEditorMediaSettings SaveUrl="api/Video/Save" Path="@uploadPath"></RichTextEditorMediaSettings>
    <RichTextEditorAudioSettings MaxFileSize="3000000"></RichTextEditorAudioSettings>
    <RichTextEditorVideoSettings MaxFileSize="10000000"></RichTextEditorVideoSettings>
    <RichTextEditorToolbarSettings Items="@Tools" Type="ToolbarType.MultiRow" />
</SfRichTextEditor>

Is there something that I might be missing or another way to get my video to upload to my Azure Blob Instead? If possible can I also do this with audio uploads as well?

Thank you very much for your time and help,

Andrew

[Vinitha Jeyakumar]

Hi Andrew,

The reported issue can be resolved by configuring the RichTextEditorAudioSettings and RichTextEditorVideoSettings properties to define the SaveUrl and specify the appropriate destination path for uploading audio and video files.

Instead of using RichTextEditorMediaSettings, please note that it is an internal child component designed to support and inherit configurations from RichTextEditorAudioSettings and RichTextEditorVideoSettings. As such, it is not intended for direct use or for controller mappings.

For better clarity, please refer to the sample code provided below.

Code snippet:

 <SfRichTextEditor>

    <RichTextEditorToolbarSettings Items="@Items" />

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

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

</SfRichTextEditor>

Regards,

Vinitha