How to allow AutoUpload when file uploader is in a EditForm

[Syncfusion Support]

Answer:

we need to call the Upload method manually when we placed Uploader component inside the EditForm. We can save the uploaded file using the Upload method and handling the save actions in the change event as mentioned below

<EditForm Model="@employee" OnValidSubmit="@HandleValidSubmit" OnInvalidSubmit="@HandleInvalidSubmit">

<DataAnnotationsValidator />

<div class="form-group">

<SfTextBox @bind-Value="@employee.EmpID">SfTextBox>

div>

<div class="form-group">

<SfUploader @ref="UploadObj" ID="UploadFiles" Multiple="false" AutoUpload="true">

<UploaderEvents ValueChange="OnChangeUpload">UploaderEvents>

SfUploader>

div>

<button type="submit" class="btn btn-primary">Registerbutton>

EditForm>

@code{

SfUploader UploadObj;

[Inject]

protected IJSRuntime JsRuntime { get; set; }

public Employee employee = new Employee();

public void OnChangeUpload(UploadChangeEventArgs args)

{

foreach (var file in args.Files)

{

var path = @"path" + file.FileInfo.Name;

FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write);

file.Stream.WriteTo(filestream);

filestream.Close();

file.Stream.Close();

}

}

public async Task HandleValidSubmit()

{

await this.UploadObj.Upload();

}

….

}

Find the sample to allow AutoUpload when file uploader is in a EditForm from here.