Binding file uploader to a model in Blazor

Question

Binding file uploader in Blazor not working with @bind attribute in razor component

i've build the model when the form is Submit using two way binding parameter and it works for standard componenent except file uploader,

i don't know what is the paramter type for binding file uploader

here is my Submit function

 protected async Task OnSubmit()
        {
...
            error = null;
            try
            {
          ...
//nikImagewas my intention to 'hold' the file image. its type is IFormFile
                customer.NIKImage = nikImage;
                var response = await _state.PostAsync(WebsVariables.Urls.CreateCustomerDraftObject, customer);
                if (response.IsSuccessStatusCode)
                {
                  ...
                }
                else
                {
                    var msg = await response.Content.ReadAsStringAsync();
                    _toastService.ShowError(msg);
                }
                //clear();

                this.StateHasChanged();
            }
            catch (Exception ex)
            {
                error = ex.Message;
            }
        }

when i try it, the nikImage is null i expected i can manipulate the file before POST it to my web API

Answer 1

Your code is vague and cannot really be deciphered. However, I think that you cannot use IFromFile on client-side Blazor. You may use IFormFile in server-side Blazor.

If you want to get that data from an <input type=file> , you'd have to get the binary data via something like Getting byte array through input type = file using JS interop

Samples

https://github.com/aspnet/AspNetCore/issues/10552 https://remibou.github.io/Upload-file-with-Blazor/

Hope this helps...

Answer 2

thx for the info

i already find that link and it seems i do it all wrong since i can't find any newest working sample about Uploading hence i'm using syncfusion uploader file but it needs to be tweaked a bit since the default signalR message size is 32KB, so it can upload larger file (3 days looking for these)

services.AddSignalR(e =>
{
    e.MaximumReceiveMessageSize = 5000000;
});

the answer from these https://github.com/aspnet/AspNetCore/issues/11643