How to pass additional parameters at File Upload

[MikeR]

How can I pass additional parameters together with the file upload and then access them in the controller.

[Berly Christopher]

Hi Mikael,   

  

 

Sorry for the inconvenience.  

  

 

This was a known issue in our File uploader component. We are currently working on it and will include the fix in our upcoming release, which is expected to be rolled out by end of July 2019.   

  

 

Please find the feedback portal link to track this defect status.    

 

https://www.syncfusion.com/feedback/6752/couldnt-add-custom-header-with-upload-request 

 

  

We appreciate your patience until then. 

Regards, 

Berly B.C

[j]

Hi Syncfusion,

   I cannot download the given sample from here

https://www.syncfusion.com/feedback/6752/couldnt-add-custom-header-with-upload-request

permission denied.

The file I'm trying to download is

https://www.syncfusion.com/downloads/support/directtrac/238212/ze/BlazorApp1-1587018225

Can you please allow me to download it?

[j]

Actually what I'm trying to do is how can I retrieve the custom headers (which is essentially param) in the Controller:

public async Task Save(IList<IFormFile> uploadFiles) { ... }

[Berly Christopher]

Hi Mikael, 

Sorry for the inconvenience caused. 

Now the feedback link is accessible and we are glad to announce that our latest release in the version 17.2.0.47-beta has been rolled out successfully and, in that release,, we have included the “The custom header not able to add in uploading file request”. You can use FileSelected event and set your header in CurrentRequest argument (args.CurrentRequest) based on key-value pair.  

 

NuGet: 

https://www.nuget.org/packages/Syncfusion.EJ2.Blazor/17.2.0.47-beta  

 

Scripts: 

https://cdn.syncfusion.com/ej2/17.2.47/dist/ej2.min.js
              
https://cdn.syncfusion.com/ej2/17.2.47/dist/ejs.interop.min.js 

 

We have prepared sample and code snippet for your reference.     

 

@using Syncfusion.EJ2.Blazor 

@using Syncfusion.EJ2.Blazor.Inputs 

<h4> Upload custom header </h4> 

<EjsUploader> 

    <UploaderEvents FileSelected="OnFileSelect"></UploaderEvents> 

    <UploaderAsyncSettingsSaveUrl ="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save" RemoveUrl="https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove"> </UploaderAsyncSettings> 

</EjsUploader> 

@code{ 

    public void OnFileSelect(SelectedEventArgs args) 

    { 

        args.CurrentRequest = new List<object> { new { custom - header = "Syncfusion" } }; 

    } 

} 

 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/238212/ze/BlazorApp1-1587018225
  

Regards, 

Berly B.C

[Christian]

Hello Syncfusion,

I'm also looking into how I can send along a parameter/identifier with the file upload.  Is it currently in version 18.1.0.43?

[Berly Christopher]

Hi Christian, 

  

Yes, we have the support for sending custom form data for the Uploader in the latest version on selected event. We have prepared the sample and attached it below.  

  

@using Syncfusion.Blazor.Inputs 

<SfUploader ID="UploadFiles"> 

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

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

    </UploaderAsyncSettings> 

</SfUploader> 

 

@code { 

 

    private void onFileSelect(SelectedEventArgs args) 

    { 

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

    } 

}  

 

  

Sample Link: https://www.syncfusion.com/downloads/support/forum/145921/ze/Uploader_145921-640524322  

  

Please find the below documentation to know more about Uploader component. 

  

UG Link: https://blazor.syncfusion.com/documentation/file-upload/getting-started/?no-cache=1  

  

Demo Link: https://blazor.syncfusion.com/demos/file-upload/default-functionalities/  

  

Regards, 

Berly B.C 

[Irakli Gabadze]

There is no need of some extra js work. just look at my images. You can pass and get custom parameters very easily in this way.

Attachment: images_5468b3d6.zip

[Berly Christopher]

Hi Irakli,   

  

Thanks for the suggestion and it is working for us.   

  

Regards,  

Berly B.C 

[Mr Andrey Voronov]

what if header name is a variable:

var headername = "Custom.Header"

this does not work:

args.CurrentRequest = new List<object> { new object[] { headername, "Syncfusion" } }; 

[Berly Christopher]

Hi Mikael, 

We have checked the provided code snippet and you have defined the headername as a string variable. So, the provided value is just append to the response header. So, we suggest you to assign the value properly as mentioned below code example to get rid of the reported issue. 

@code { 

    public class Custom 

    { 

        public string Header { get; set; } = "header"; 

    } 

    public Custom custom = new Custom(); 

    private void onFileSelect(SelectedEventArgs args) 

    { 

        var headername = custom.Header; 

 

        args.CurrentRequest = new List<object> { new object[] { headername, "Syncfusion" } }; 

    } 

    } 

Screenshot: 

 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/additional_param_145921-475496714  

Regards, 

Berly B.C