Upload File to Amazon S3 bucket in Blazor

In this article we will cover how to Upload File to Amazon S3 bucket in Blazor Web Assembly Application.

Let's Start:

Add below mentioned dll as reference from Nuget Package

BlazorInputFile.dll

Add File upload button to .blazor file

@using BlazorInputFile
 
<InputFile OnChange="Upload" />

Download InputFile.js from below mentioned link

https://github.com/SteveSandersonMS/BlazorInputFile/blob/master/BlazorInputFile/wwwroot/inputfile.js

Add inputfile.js in index.html file

<script src="inputfile.js"></script>

Create below mentioned class

public class StreamData
{
    public byte[] data { get; set; }
    public string filename { get; set; }
}

Add below mentioned code to blazor code file

protected async Task Upload(IFileListEntry[] files)
{
    string error = "";
 
    IFileListEntry file = files.FirstOrDefault();
 
    if (file != null && file.Size != 0)
    {
        using (var fileStream = file.Data)
        using (var ms = new System.IO.MemoryStream())
        {
            await fileStream.CopyToAsync(ms);
            ms.Position = 0;
 
            StreamData streamData = new StreamData();
            streamData.filename = file.Name;
            streamData.data = ms.ToArray();
 
            var contentData = new StringContent(JsonConvert.SerializeObject(streamData), Encoding.UTF8, "application/json");
            await client.PostAsync($"AmazonS3", contentData);
        }
    }
    else
        error = "Invalid file";
}

Create an API with AmazonS3 Controller and add given below post method

[HttpPost]
public async Task<bool> Post([FromBody] StreamData fileStream)
{
    bool response = false;
    if (fileStream != null)
    {
        string directory = "";
 
        MemoryStream stream = new MemoryStream();
        stream.Write(fileStream.data, 0, fileStream.data.Length);
 
        response = await _awsS3Service.UploadFileAsync(stream, fileStream.filename, directory);
    }
    return response;
}

To implement _awsS3Service.UploadFileAsync Method refer given below link

https://docs.aws.amazon.com/AmazonS3/latest/dev/HLuploadFileDotNet.html

Additional references:

1) https://github.com/SteveSandersonMS/BlazorInputFile