AutoUpload without API

[Benjamin]

Using Blazor Server I'd like to upload a file as soon as the user selects or drops it on the control.  Based on the docs it seems that the way to do this is with the ValueChange event. Here's what I tried:

    <SfUploader>
        <UploaderEvents ValueChange="OnChangeAsync"></UploaderEvents>
    </SfUploader>
 
@code {
    private async Task OnChangeAsync(UploadChangeEventArgs e)
    {
        foreach (var file in e.Files)
        {
            await FileRepository.SaveFileAsync(file.FileInfo.Name, file.Stream);
        }
    }
}

The problem is that my OnChangeAsync method is not called when a file is selected - the file is just displayed as "Ready to upload".

[Sureshkumar P]

Hi Benjamin, 

 

Greetings from Syncfusion support. 

 

Based on your shared information, we suspect that you have used uploader component inside the editform. This is default behavior or our component inside editform we need to call the upload method manually.  

 

Kindly refer the below code example. 

@using Syncfusion.Blazor.Inputs 

@using System.IO; 

@using System.ComponentModel.DataAnnotations 

 

    <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"> 

                <UploaderEvents ValueChange="OnChange"></UploaderEvents> 

            </SfUploader> 

        </div> 

        <button type="submit" class="btn btn-primary">Register</button> 

    </EditForm> 

 

@code{ 

    SfUploader UploadObj; 

 

    public void OnChange(UploadChangeEventArgs args) 

    { 

        foreach (var file in args.Files) 

        { 

            var path = @"D:\" + file.FileInfo.Name; 

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

            file.Stream.WriteTo(filestream); 

            filestream.Close(); 

            file.Stream.Close(); 

        } 

    } 

 

    public Employee employee = new Employee(); 

 

    public async Task HandleValidSubmit() 

    { 

        //you can upload the file after validate the form content using upload method 

        await this.UploadObj.Upload(); 

    } 

    public void HandleInvalidSubmit() 

    { 

 

    } 

 

    public class Employee 

    { 

        [Required(ErrorMessage = "Employee ID is required")] 

        public string EmpID { get; set; } 

 

    } 

} 

 

 

Please find the screen shot here: 

 

 

We have created the sample based on your scenario. Please find the sample here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/uploaderEditForm-881449928  

 

If we misunderstood your requirement. please revert us with below details. 

1.      Whether you have rendered uploader component inside editform or not? 

2.     Whether you have faced the issue any specific Syncfusion version or not? 

3.     If you can reproduce the issue in the above attached sample, then please revert us with details issue replication procedure. 

These details will help us to provide exact solution as earlier as possible. 

 

Regards, 

Sureshkumar P 

[Benjamin]

You are correct, it was inside a form.  I was able to remove the form, and now the file uploads immediately.  I should have been able to figure that out from the other similar forum posts.  Thanks for the quick response!

[Prince Oliver]

Hi Benjamin, 

Most Welcome. We are glad to help you. 

Regards, 

Prince