How to handle Blazor File Upload with user Information in SFUploader?

When implementing file uploads in web applications, it’s often necessary to track additional information about the files being uploaded, such as the identity of the user performing the upload. The Syncfusion SFUploader component provides a flexible way to handle file uploads and allows developers to pass custom data along with the file. This article will guide you through the process of passing user information during a file upload using the SFUploader component.

Passing User Information with File Upload

To pass additional details, such as user information, with the video upload using SFUploader, you can customize the CustomFormData property within the file selection event handler. Here’s how you can do it:

Client-Side Configuration

First, handle the file selection event by adding a method in your Razor component:

<SfUploader id="VideoUploader" Multiple="false" AutoUpload="true">
    <UploaderAsyncSettings SaveUrl="api/video/save"></UploaderAsyncSettings>
    <UploaderEvents OnFailure="@OnFailureHandler" OnActionComplete="@OnActionCompleteHandler" OnSelect="@onFileSelect"></UploaderEvents>
</SfUploader>

@code {
    private void onFileSelect(SelectedEventArgs args)
    {
        args.CustomFormData = new List<object> { new { UserName = "TestUser" } };
        var accessToken = "UserId_01";
        args.CurrentRequest = new List<object> { new { Authorization = accessToken } }; 
    }
}

In the onFileSelect method, we are adding a user name to the CustomFormData. Additionally, we are passing user information in the Authorization header using the CurrentRequest property.

Server-Side Configuration

On the server side, you can retrieve the passed information in your controller:

[HttpPost("[action]")]
public async Task Save(IList<IFormFile> UploadFiles)
{
    var auth = Request.Headers["Authorization"];
    var header = HttpContext.Request.Form["Name"];
    // ... rest of the code to handle file saving
}

In the Save method, the user information from the Authorization header is retrieved using Request.Headers["Authorization"].

Additional References

• Syncfusion SFUploader Documentation: SFUploader Overview
• ASP.NET Core Documentation: File Uploads in ASP.NET Core

Feel free to integrate the provided code snippets into your project and customize them according to your specific requirements. If you require further assistance or have additional questions, the Syncfusion support team is available to help.

Conclusion

I hope you enjoyed learning about how to handle Blazor File Upload with user Information in SFUploader.

You can refer to our Blazor File Upload feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor File Upload example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!