Handling Custom Parameters in JavaScript File Upload control

When implementing file uploads in web applications, it’s often necessary to send additional data between the client and server. This article demonstrates how to add and retrieve additional parameters during the file upload process using Syncfusion’s EJ2 Uploader in an ASP.NET Core application.

Adding and Retrieving Custom Headers from Client to Server

To send custom data from the client to the server during a file upload, you can modify the customFormData within the uploading event. Here’s how you can do it:

<ejs-uploader id="UploadFiles" success="Success" uploading="onFileUpload" asyncSettings="@asyncSettings"></ejs-uploader>
 
<script>
  function onFileUpload(args) {
    args.customFormData = [{ 'name': 'Syncfusion INC' }];
  }
</script>

On the server side, you can access this custom data in your controller action. For example, in an ASP.NET Core application, you can retrieve the custom form data like this:

// Controller.cs
public void Save(IList<IFormFile> UploadFiles)
{
  var header = HttpContext.Request.Form["Name"];
}

Adding and Retrieving Custom Headers from Server to Client

If you need to send custom headers from the server back to the client after the file upload, you can add headers to the response in your server-side code:

// Controller.cs
public void Save(IList<IFormFile> UploadFiles)
{
  foreach (var file in UploadFiles)
  {
    Response.Headers.Add("documentname", "newFileName");
  }
}

Then, on the client side, you can access these headers in the Success event of the uploader:

<script>
  function Success(args) {
    args.e.currentTarget.getResponseHeader('documentname');
  }
</script>

Sample Project

For a complete example, you can download a sample project from Syncfusion that demonstrates the file upload process with custom headers:

Syncfusion File Upload Sample

Additional References

• Syncfusion Uploader Documentation: Syncfusion Uploader Component Documentation
• Syncfusion Uploader Demos: File Uploads Demos

By following the steps outlined above, you can effectively manage custom headers during file uploads, enhancing the communication between your client and server in your web applications.