Blazor File Upload IFormFile

Question

I am using Blazor Wasm, and I want to uplaod a pdf or jpeg file to server.

Please dont share the server side code, all examples explains server side. But I need to get a client example.

Because, I want to upload media file with some date. I will use multipart/form-data, but I can not assign my file to IFormFile.

How I can assign a file/filestream to IFormFile?

Thank you

Answer 1

Currently, I don't think that there is any native Blazor wasm components for uploading files. It exists a lot of file upload components that uses JSInterop. Among the one's that I've tried is Radzen fileupload, Steve Sandersons (one of the developers behind blazor) fileupload and MatBlazor fileupload.

However, currently there is some memory issues in Mono, namely the underlying development platform that Blazor runs on. This means that Blazor only can manage files up to ~5-6 mb. Therefore I advice you to use a Blazor Components that strictly uses javascript to post the file to the server, such as Radzen fileupload.

Here is an example of the client-side fileupload using MatBlazor (since this is the one I have in hand atm):

     <div class="p-2">
                <MatFileUpload OnChange="AddFile" class="form-container" Label="Upload File"></MatFileUpload>
                </div>

@code
 {

    private async Task AddFile(IMatFileUploadEntry[] files)
    {
        var file = files.FirstOrDefault();
                if (file != null)
                {
                    var ms = new MemoryStream();
                    await file.WriteToStreamAsync(ms);
                    var content = new MultipartFormDataContent 
                     {
                        { new ByteArrayContent(ms.GetBuffer()), 
                          "\"uploadFile\"", 
                          file.Name 
                        }
                    };
                    await client.PostAsync("uploadFile", content);
                }
    }
}