File Upload OnFailure

OnFailure event doesn't catch ValueChange exceptions.

Let's supose an exception occurs while ValueChange is storing the file. I would like to catch the exception and alert user. But I'm unable to do it. Always ends with 'file uploaded successfully' message.

Sample code:

@using Syncfusion.Blazor.Inputs

<SfUploader AutoUpload="false">
    <UploaderEvents ValueChange="OnChange"></UploaderEvents>
    <UploaderEvents OnFailured="OnFailured" />
</SfUploader>

<h1>@error</h1>

@code {

    string error = "No errors";

    private void OnChange(UploadChangeEventArgs args)
    {
        throw new Exception("Upload exception"); // File uploaded successfully. what?
    }

    private void OnFailured(Syncfusion.Blazor.Inputs.FailureEventArgs args)
    {
        error = "error " + args.StatusText;
    }
}


Result:



The question is, how can I deal with ValueChange exceptions?

Best regards.

3 Replies 1 reply marked as answer

SN Sevvandhi Nagulan Syncfusion Team March 24, 2021 09:48 AM UTC

Hi Josep, 


Greetings from Syncfusion support. 


We checked your query. The try and catch statement can be used to find the exception in the ValueChange event. When using AsyncSettings, a failure event will be triggered if the ajax request fails. The failure event would not be triggered in this case, because we used the file stream to save the file. We recommend that you are using JSInterop to send the error message to the client and change the status. Please see the code below. 

[Index.razor] 

private void OnChange(UploadChangeEventArgs args) 
    { 
        foreach (var file in args.Files) 
        { 
            var path = ""; 
            try 
            { 
                FileStream filestream = new FileStream(path, FileMode.Create, FileAccess.Write); 
                file.Stream.WriteTo(filestream); 
                filestream.Close(); 
                file.Stream.Close(); 
            } 
            catch(Exception ex) 
            { 
                statusText = ex.Message.ToString(); 
                JsRuntime.InvokeVoidAsync("ChangeStatusText", statusText); 
            } 
 
        } 
    } 

[_Host.cshtml] 

<script> 
    window.ChangeStatusText = (status) => { 
        document.getElementsByClassName("e-file-status e-upload-success")[0].innerText = status; 
    }  
</script> 



Please find the sample below. 




Please check the above sample and get back to us if you need further assistance. 


Regards, 
Sevvandhi N 


Marked as answer

JR Josep Ramon Chicano March 25, 2021 07:40 AM UTC

I would like to avoid JS and handle exception in a cleaner approach. Is there a way to request to SyncFusion a new feature on SFUpload to deal with exceptions on ValueChange? (A error message instead  'file uploaded successfully' maybe enough for me)



Best regards.



SN Sevvandhi Nagulan Syncfusion Team March 26, 2021 01:53 PM UTC


Hi Josep, 


We checked your query. We suggest that you to use Uploader template which allows you to customize the status message without having to use JSInterop. Please refer the below code. 


 
<SfUploader CssClass="e-custom-class" @ref="uploaderObj" ID="uploaderObj" AutoUpload="true"> 
    <UploaderTemplates> 
        <Template> 
            <span class="e-file-container"> 
                <span class="e-file-name">@context.Name</span> 
                <span class="e-file-type">@context.Type</span> 
                <span class="e-file-size">@context.Size</span> 
                @if (files != null && files.Count > 0) 
                { 
                    @foreach (var item in files) 
                    { 
                        if (item.Name == context.Name) 
                        { 
                            <span class="e-file-status e-upload-success"> 
                                @item.Status 
                            </span> 
                        } 
 
                    } 
                } 
                @if (files == null)  
                { 
                    <span class="e-file-status e-upload-success"> 
                        File uploaded successfully 
                    </span> 
                } 
 
            </span> 
            <span class="e-icons e-file-remove-btn" title="Remove"></span> 
        </Template> 
    </UploaderTemplates> 
 
    <UploaderEvents ValueChange="OnChange" Success="onSuccess"></UploaderEvents> 
</SfUploader> 


Please find the sample below. 




Regards, 
Sevvandhi N 


Loader.
Up arrow icon