How to avoid displaying the 'Upload' and 'Cancel' buttons on SfUploader component.

[János Szabó]

Hi!

I would like to avoid displaying the 'Upload' and 'Cancel' buttons to be able to do a form validation before the upload then initiate the upload manually.

Is there any way to do it? I have not found anything related in the documentation.

Thanks in advance!

[Sureshkumar P]

Hi János,  

   

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 behavior 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. 

<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; } 

 

    } 

} 

 

 

We have created the sample based on your requirement. please find the sample here: https://www.syncfusion.com/downloads/support/directtrac/general/ze/UploaderEditForm744683162  

 

please check the above sample and let us know whether it suits your requirement. if not please revert us with details. 

 

Regards, 

Sureshkumar P 

[Martin Brehm]

Hi,

with AutoUpload set to false, the Upload and Cancel button still appear. Any idea?

Best Regards,

Martin

[Sevvandhi Nagulan]

Hi Martin,

Greetings from Syncfusion support.

Setting AutoUpload as false will display the upload and clear button. Please set the AutoUpload as true, in order to hide the upload and clear button. By default, the auto upload property is true.

Demo Sample: https://blazor.syncfusion.com/demos/file-upload/default-functionalities

UG link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfUploader.html#Syncfusion_Blazor_Inputs_SfUploader_AutoUpload

Kindly get back to us for further assistance.

Regards,

Sevvandhi N