Example using custom object, web api and net 6.0

[Hugo]

Hi! Could you provide some example using a custom object (FilesVM.cs) with some properties and List<IFormFile> property to allow multiples files in same object.

The API will consume this object to Azureblob and return the object with Id.

The WASM blazor app will get this object return.

[Sureshkumar P]

By default, our uploader component supports the multiple file upload in the List<IFormFile> property. And if you want to add the additional data by using before upload events. To know more about additional data please refer to the below code example here:

private void OnBeforeUpload (BeforeUploadEventArgs args)

{

var accessToken = "Basic test123";

args.CurrentRequest = new List<object> { new { Authorization = accessToken } };

}

 

[Hugo]

I´m already saw this example.

Actually, my problem is to get the return from API.

I try to do a Response.Header() but doesn´t work. 

Any other way to get the result ? Have a way to override Save and Success ?

I need to get the identifier result from API. In the success response doesn´t have the Response.Header from API...

[Deepak Ramakrishnan]

Hi Hugo,

Thanks for your update.

Yes we can send and receive the headers from API , You can add headers in Save api method mapped to the Uploader component and receive it through Success event (Triggers once the file get uploaded successfully in server) . Kindly refer to the sample code and sample for reference.

[Controller]

[HttpPost("[action]")]

        public async Task Save(IList<IFormFile> UploadFiles)

        {

            var auth = Request.Headers["Authorization"];

            var header = HttpContext.Request.Form["Name"];

 //Your required code logics below

                  ... . . . . . . . . . . .

                  . . . . . . . . . . .

                 //Using below , you can add headers as key-value pair and receive it in client end.

                Response.Headers.Add("DataFromApi", "Sample data");

            }

[index.razor]

<SfUploader ID="UploadFiles" AutoUpload="false">

    <UploaderButtons Browse="@buttonText"></UploaderButtons>

    <UploaderEvents BeforeUpload="BeforeUpload" Success="SuccessHandler"></UploaderEvents>

    <UploaderAsyncSettings SaveUrl="api/SampleData/Save"></UploaderAsyncSettings>

</SfUploader>

 

 

 

@code{

 

    private bool isDevice { get; set; }

 

    private string buttonText { get; set; } = "Browse";

 

    public void BeforeUpload(BeforeUploadEventArgs args)

    {

        args.CustomFormData = new List<object> { new { Name = "Syncfusion" } };

        var accessToken = "Basic test123";

        args.CurrentRequest = new List<object> { new { Authorization = accessToken } };

    }

 

   

 

    public async Task SuccessHandler(SuccessEventArgs args)

    {

        var Headers = args.Response.Headers;

    }

}

[Snapshot]

Thanks,

Deepak R.

Attachment: BlazorApp1_751ad647.zip