We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Upload files with custom Metadata

How does one upload a file with the SfUploader with custom metadata.


The only thing that seems to come across is the filename.


I chatted with support, and found some articles, but none of them worked for .Net 6 and Blazor WASM.


I need to set parameters at the client, and extract them at the server.  


5 Replies 1 reply marked as answer

KH Kevon Houghton October 19, 2022 05:47 PM



SP Sureshkumar P Syncfusion Team October 20, 2022 06:49 AM

HI Kevon,

We have prepared the sample with passed the additional parameter by using the fileselect event.

Find the code example here:

[sample.razor]

<SfUploader ID="UploadFiles">

                <UploaderEvents FileSelected="onFileSelect"></UploaderEvents>

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

                </UploaderAsyncSettings>

            </SfUploader>

@code {

    private void onFileSelect(SelectedEventArgs args)

    {

        var accessToken = "Basic test123";

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

    }

}

[samplecontroller.cs]

[HttpPost("[action]")]

        public async void Save(IList<IFormFile> UploadFiles)

        {

            //to get authorization Header to handle save file on server side  

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

            try

            {

 

Find the screenshot for the output:

Find the sample in the attachment:

Regards,

Sureshkumar P


Attachment: UploaderWASMHosted_89e7d49e.zip


KH Kevon Houghton October 20, 2022 11:30 AM

Thank you for the reply.  This example is a little simplistic.  I have tried to extend this to adding an object to the header, but it seems this is not possible?


You can see this at the client

Snag_435a949.png

The Data is being inserted properly

Snag_4361d31.png


But at the server, it is inaccessible.


Snag_436f87d.png


It seems a standard use case to upload files with complex data associated.  Can you suggest a way to accomplish this?



KH Kevon Houghton October 20, 2022 12:11 PM

I figured it out...


The header is string based, so the data must be in a string format...


On the client:

Snag_45b7b6a.png

On the server:

Snag_45c58f9.png


Marked as answer

SP Sureshkumar P Syncfusion Team October 21, 2022 01:38 AM

Hi Kevon,


Thanks for your update.


Regards,

Sureshkumar P


Loader.
Live Chat Icon For mobile
Up arrow icon