Skip to content

Commit db9ab56

Browse files
UdhayaKumarDuraisamyUdhayaKumarDuraisamy
authored
Merge pull request #6652 from syncfusion-content/983306-dev-fupl-form
983306: Re-structing the form integration section of File uploader.
2 parents fef8c23 + 154a6ee commit db9ab56

File tree

4 files changed

+156
-0
lines changed

4 files changed

+156
-0
lines changed

‎blazor-toc.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2984,6 +2984,7 @@
29842984
<li> <a href="/blazor/file-upload/template">Template</a></li>
29852985
<li> <a href="/blazor/file-upload/validation">Validation</a></li>
29862986
<li> <a href="/blazor/file-upload/style-appearance">Style and Appearance</a></li>
2987+
<li> <a href="/blazor/file-upload/form-integration">Form Integration</a></li>
29872988
<li> <a href="/blazor/file-upload/http-client">Http Client</a></li>
29882989
<li>How To
29892990
<ul>

‎blazor/file-upload/form-integration.md‎

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
---
2+
layout: post
3+
title: Form Integration in Blazor File Upload Component | Syncfusion
4+
description: Learn how to integrate the Syncfusion Blazor File Upload component with Blazor's EditForm and DataForm for seamless form-based file management.
5+
platform: Blazor
6+
control: File Upload
7+
documentation: ug
8+
---
9+
10+
# Form Integration in Blazor File Upload Component
11+
12+
The Syncfusion Blazor File Upload component seamlessly integrates with Blazor's [EditForm](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/?view=aspnetcore-9.0) and the Syncfusion [DataForm](https://blazor.syncfusion.com/documentation/data-form/getting-started-with-web-app), enabling you to build robust forms with file upload functionality. This integration associates the uploaded file information with a data model, leveraging the form's built-in validation.
13+
14+
When a file is selected, its information is added to the model property bound to the component. Upon form submission, the entire model, including the list of selected files, is passed to the submit event handler.
15+
16+
## File Upload with EditForm Integration
17+
18+
Integrating the File Upload component into a Blazor `EditForm` streamlines data entry by including file management directly within the form.
19+
20+
Validation for the file input is achieved by binding the component to a model property. The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_ValueChange) and [OnRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnRemove) events are used to update this property with the current list of files. Within these events, it is crucial to call `EditContext.NotifyFieldChanged` to trigger the form's validation logic immediately after the file list changes.
21+
22+
When the form is successfully submitted, the `OnValidSubmit` event handler receives the `EditContext`, which contains the complete form model.
23+
24+
```cshtml
25+
@using System.ComponentModel.DataAnnotations
26+
@using Syncfusion.Blazor.Inputs
27+
@using Syncfusion.Blazor.Buttons
28+
29+
<EditForm Model="@employee" OnValidSubmit="@HandleValidSubmit" Context="formContext">
30+
<DataAnnotationsValidator />
31+
<div class="form-group">
32+
<SfUploader @ref="@UploaderObj" ID="UploadFiles">
33+
<UploaderEvents ValueChange="@(async (args) => await OnChange(args, formContext))" OnRemove="@(async (args) => await OnRemove(args, formContext))"></UploaderEvents>
34+
</SfUploader>
35+
<ValidationMessage For="() => employee.files" />
36+
</div>
37+
<SfButton type="submit" CssClass="e-primary">Submit</SfButton>
38+
</EditForm>
39+
40+
@code {
41+
public class UserDataModel
42+
{
43+
[MinLength(1, ErrorMessage = "Please upload a file")]
44+
public List<FileInfo> files { get; set; } = new();
45+
}
46+
47+
public UserDataModel employee = new UserDataModel();
48+
private SfUploader UploaderObj;
49+
50+
private async Task OnChange(UploadChangeEventArgs args, EditContext context)
51+
{
52+
employee.files = await UploaderObj.GetFilesDataAsync();
53+
context?.NotifyFieldChanged(FieldIdentifier.Create(() => employee.files));
54+
}
55+
56+
private async Task OnRemove(RemovingEventArgs args, EditContext context)
57+
{
58+
var currentFiles = await UploaderObj.GetFilesDataAsync();
59+
var fileToRemove = args.FilesData.FirstOrDefault();
60+
if (fileToRemove != null)
61+
{
62+
currentFiles = currentFiles.Where(f => f.Name != fileToRemove.Name).ToList();
63+
}
64+
employee.files = currentFiles;
65+
context?.NotifyFieldChanged(FieldIdentifier.Create(() => employee.files));
66+
}
67+
68+
public void HandleValidSubmit(EditContext args)
69+
{
70+
// The form model (args.Model) now contains the list of selected files.
71+
// The 'employee.files' property holds the FileInfo objects.
72+
// From here, you can implement custom logic to upload the files to a server,
73+
// for example, by iterating through the list and using HttpClient.
74+
var filesToUpload = employee.files;
75+
// Custom file upload logic goes here.
76+
}
77+
}
78+
```
79+
80+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rXroWjZwIzUqaemW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
81+
82+
![Blazor File Upload component within an EditForm, showing validation and submission.](./images/blazor-uploader-editform.gif)
83+
84+
## File Upload with DataForm Integration
85+
86+
The File Upload component can also be integrated into a Syncfusion `DataForm` to automatically build a form from a model that includes file upload capabilities.
87+
88+
When the `DataForm` is submitted, the [OnSubmit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.SfDataForm.html#Syncfusion_Blazor_DataForm_SfDataForm_OnSubmit) event handler receives the `EditContext`. The `EditContext.Model` property contains the complete form data, including the list of `FileInfo` objects from the File Upload component. This allows you to access and process the file information as part of the form's submission logic.
89+
90+
91+
```cshtml
92+
@using Syncfusion.Blazor.DataForm
93+
@using System.ComponentModel.DataAnnotations
94+
@using Syncfusion.Blazor.Inputs
95+
96+
<SfDataForm ID="MyForm" Model="@UserModel" Width="50%" OnSubmit="Submit" @ref="@DataForm">
97+
<FormValidator>
98+
<DataAnnotationsValidator></DataAnnotationsValidator>
99+
</FormValidator>
100+
<FormItems>
101+
<FormItem Field="@nameof(UserModel.files)">
102+
<Template>
103+
<SfUploader ID="UploadFiles" @ref="@UploaderObj">
104+
<UploaderEvents ValueChange="async (args) => await OnChange(args)" OnRemove="async (args) => await OnRemove(args)"></UploaderEvents>
105+
</SfUploader>
106+
</Template>
107+
</FormItem>
108+
</FormItems>
109+
</SfDataForm>
110+
111+
@code {
112+
public class UserDataModel
113+
{
114+
[MinLength(1, ErrorMessage = "Please upload a file")]
115+
public List<FileInfo> files { get; set; } = new();
116+
}
117+
118+
private UserDataModel UserModel = new UserDataModel();
119+
private SfDataForm DataForm;
120+
private SfUploader UploaderObj;
121+
122+
private async Task OnChange(UploadChangeEventArgs args)
123+
{
124+
this.UserModel.files = await UploaderObj.GetFilesDataAsync();
125+
var fieldIdentifier = FieldIdentifier.Create(() => UserModel.files);
126+
DataForm.EditContext?.NotifyFieldChanged(fieldIdentifier);
127+
}
128+
129+
private async Task OnRemove(RemovingEventArgs args)
130+
{
131+
var currentFiles = await UploaderObj.GetFilesDataAsync();
132+
var fileToRemove = args.FilesData.FirstOrDefault();
133+
if (fileToRemove != null)
134+
{
135+
currentFiles = currentFiles.Where(f => f.Name != fileToRemove.Name).ToList();
136+
}
137+
this.UserModel.files = currentFiles; ;
138+
var fieldIdentifier = FieldIdentifier.Create(() => UserModel.files);
139+
DataForm.EditContext?.NotifyFieldChanged(fieldIdentifier);
140+
}
141+
142+
private void Submit(EditContext args)
143+
{
144+
// The form model is available in args.Model.
145+
// The 'files' property contains the list of selected FileInfo objects.
146+
// Custom file upload logic can be implemented here.
147+
var modelWithFileData = (UserDataModel)args.Model;
148+
var filesToUpload = modelWithFileData.files;
149+
}
150+
}
151+
```
152+
153+
{% previewsample "https://blazorplayground.syncfusion.com/embed/LZheWNXGeJtxWIXQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
154+
155+
![Blazor File Upload component within a Syncfusion DataForm.](./images/blazor-uploader-dataform.gif)

‎blazor/file-upload/images/blazor-uploader-dataform.gif‎

106 KB
Loading

‎blazor/file-upload/images/blazor-uploader-editform.gif‎

100 KB
Loading

0 commit comments

Comments
 (0)