Upload files only on valid EditForm submit and hide clear/upload buttons

[dont care]

Dear all, 

with Syncfusion Blazor 18.2.0.55, how can I upload selected files only on valid EditForm submits and how do I additionally remove the clear/upload buttons that automatically appear  (once a first file was selected) when I set SfUploader AutoUpload="false" ?

Note that I found this older thread https://www.syncfusion.com/forums/153253/upload-file-on-editform-submit but the provided solution stops working when updating the NuGet package in the provided demo project to 18.2.0.55 

Thanks for any support on this!

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Dont,

Greetings from Syncfusion support.

We have checked your requirement. We would like to know you that if AutoUpload property is set to false, Upload and Clear buttons will be rendered below the selected file list to upload the files manually. However, you can hide those buttons by overriding the style and manually upload the file in the form submit. Please refer to the code snippet and sample below.


Sample Link       : https://www.syncfusion.com/downloads/support/forum/157428/ze/Uploader-1076017426 

 

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

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

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

    </SfUploader> 

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

</EditForm> 

@code { 

    SfUploader UploadObj; 

    public Employee employee = new Employee(); 

 

    public async Task HandleValidSubmit() 

    { 

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

    }   

 

}

<style> 

    // To hide upload and clear buttons 

    .e-upload-actions { 

        display: none; 

    } 

</style> 

 

Screenshot:


 

 

Kindly check the sample and get back to us, if you need any further assist on this.

Regards, 

Jeyanth. 

[dont care]

Hi Dont,

Greetings from Syncfusion support.

We have checked your requirement. We would like to know you that if AutoUpload property is set to false, Upload and Clear buttons will be rendered below the selected file list to upload the files manually. However, you can hide those buttons by overriding the style and manually upload the file in the form submit. Please refer to the code snippet and sample below.


Sample Link       : https://www.syncfusion.com/downloads/support/forum/157428/ze/Uploader-1076017426 

Dear Jeyanth,

thank you for your reply. Your provided sample works (after removing the C# like comment from the CSS styling in Index.razor, which first prevented running it), unfortunately only in the provided sample case.

In reality I could identify a huge issue:

await this.UploadObj.Upload(); 

does NOT wait until the upload is complete. In fact, if one does

    [Inject]

    public NavigationManager NavManager { get; set; }

    public async Task HandleValidSubmit()

    {

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

        NavManager.NavigateTo("/counter"); // <------------------- added this line

    }

then the 

public void OnChange(UploadChangeEventArgs args)

(which would do the upload) never gets called, because the NavManager navigates to the counter page before the OnChange method is called.

I attached a sample, just run it and note that the breakpoint in OnChange is never hit.

Can you provide any solution for this / report this as bug and meanwhile provide a workaround?

Thank you very much.

Attachment: UploaderNavigationIssue_cb775c2b.zip

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Dont,

We would like to inform you that await will not wait for the corresponding method call to complete. Please refer to the below answer provided in the Stackoverflow community for further reference.  

Stackoverflow Link :  https://stackoverflow.com/a/15151444/9133493  

Regards,  

Jeyanth. 

[dont care]

Hi Dont,

We would like to inform you that await will not wait for the corresponding method call to complete. Please refer to the below answer provided in the Stackoverflow community for further reference.  

Stackoverflow Link :  https://stackoverflow.com/a/15151444/9133493  

Regards,  

Jeyanth. 

You are right that await doesn't actively wait for the method call to complete, but that doesn't mean that the next line after await is called before the awaited method has finished.

Quote from the linked stackoverflow post:

What await does is to return the result of the operation immediately and synchronously if the operation has already completed or, if it hasn't, to schedule a continuation to execute the remainder of the async method and then to return control to the caller.

  public async Task HandleValidSubmit()

    {

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

        NavManager.NavigateTo("/counter"); // <------------------- added this line <---- this line is the REMAINDER

    }

Note that I am calling NavManager.NavigateTo("/counter");  in the same async method (HandleValidSubmit) like  await this.UploadObj.Upload();

I guess the implementation of UploadObj.Upload() internally doesn't await the finished upload of each file.

Can you please check this? Thanks :-)

[dont care]

Any update on this?

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Don’t,

Thanks for your brief explanation.

We have checked your query. We would like to inform you that the file upload initiates when the upload() method is called. When the file upload completes, we get the files from the DOM which is available in the Change event arguments of the uploader. This process is not awaitable. hence the code executes after the upload method and does not wait. So we suggest you to perform the navigation access in the Change event which triggers when the upload is completed.

Please let us know if you need any further assistance regarding this.
 

Regards, 

Jeyanth.