SfUploader inside EditForm on beta

[Sebastian Faltoni]

Hi, is possible to enable the upload button when inside an EditForm?

I'm using the upload events to save the file, its working fine on pages where i'm not using the edit form, i need to save the file this way so i can create a record and then use the record id and set to a currently editing item property

<SfUploader AutoUpload="false"AllowedExtensions=".png">

                            <UploaderEvents ValueChange="@(async (args) => {

                                                                    // saving the file 

                                                               })"></UploaderEvents>

                        </SfUploader>

[Berly Christopher]

Hi Sebastian, 

  

Greetings from Syncfusion support.  

  

We would like to inform you that, if you are placing the Uploader component inside the form then Upload and Cancel button will not be shown. This is the default behaviour of the Uploader component. Also, there is no necessary to define the Async setting for the Uploader component when it is placed inside the form element.  

  

We need to call the Upload method manually to save the selected file in the Uploader component as mentioned below.  

  

@using Syncfusion.Blazor.Inputs 

@using System.IO; 

@using System.ComponentModel.DataAnnotations 

@inject IJSRuntime JsRuntime; 

 

    <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() 

    { 

        await this.UploadObj.Upload(); // Upload the selected file manually 

    } 

    } 

  

Please find the sample from the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/forum/152913/ze/Uploader_1529131809748923  

  

Regards, 

Berly B.C