Capturing invalid uploads

[Keith A Price]

I have the following properties set:

                AllowedExtensions=".xlsx, .xls"
                AllowMultiple=false
                ShowFileList=false
                MinFileSize="10000"
                MaxFileSize="614400"

Since I'm hiding the file list, we don't get to see the messages when the file size or type is disallowed or if they tried to upload more than one file at once.

How can I trap for those so I can display my own error messages? I certainly don't want to just ignore the upload without giving the user some feedback. But I also don't need or want the file list.

[Keith A Price]

On further research, I found this:

        void OnBeforeUpload(BeforeUploadEventArgs args)

        {
            Console.WriteLine(args.FilesData[0]...)
        }

Does BeforeUpload actually trigger before the file is sent to the server? If you don't provide a way for us to show status messages when min/max or file type or multiple files is attempted, then maybe I turn those restrictions off and put them in BeforeUpload? Then I can do my own checks and messages.

Let

[UdhayaKumar Duraisamy]

You can use the FileSelected event to know the file upload restricted message, such as file type and file size. To indicate to the user whether the file was uploaded successfully or not, you can use the Success and OnFailure events.

Please refer to the code snippet and sample below for more information.

<div style="margin:130px auto;width:300px">

    @if (ErrorMessage != null && ErrorMessage != "Ready to upload")

    {

        <p>@ErrorMessage</p>

    }

 

    <SfUploader AllowedExtensions=".xlsx, .xls"

                AllowMultiple=false

                ShowFileList=false

                MinFileSize="10000"

                MaxFileSize="614400">

        <UploaderEvents FileSelected="@FileSelectedHandler" OnFailure="@OnFailureHandler" Success="@SuccessHandler"></UploaderEvents>

    </SfUploader>

</div>

@code {

    private string ErrorMessage;

    private void FileSelectedHandler(SelectedEventArgs args)

    {

        if (args.FilesData.Count != 0)

        {

            ErrorMessage = args.FilesData[0].Status;

        }

 

    }

    private void OnFailureHandler(FailureEventArgs args)

    {

        ErrorMessage = args.File.Status;

    }

    private void SuccessHandler(SuccessEventArgs args)

    {

        ErrorMessage = args.File.Status;

    }

}

• FileSelectedHandler is triggered when the user selects a file to upload. The function checks if file was selected, and if so, it assigns the status of the first file to the ErrorMessage variable.
• OnFailureHandler is triggered when an error occurs during the upload process. The function assigns the status of the failed file to the ErrorMessage variable.
• SuccessHandler is triggered when a file is successfully uploaded. The function assigns the status of the uploaded file to the ErrorMessage variable.

All three functions update the ErrorMessage variable, which is then used to display any error messages in the code block inside the if statement in the HTML code. If there are no errors, the ErrorMessage variable will be set to "Ready to upload", which will not be displayed.

Sample: https://www.syncfusion.com/downloads/support/common/3946/ze/CapturingInvalidUploads_a66e966b.zip

Documentation: https://blazor.syncfusion.com/documentation/file-upload/events

Also, the BeforeUpload event triggers when the upload process begins. This event is used to add additional parameters to the upload request.

[Keith A Price]

Do min-size, max-size, multiple files all trigger the failure event?

[UdhayaKumar Duraisamy]

We would like to inform you that the FileUpload component validates the Min and Max file size when the file is selected, and the error status messages will be available in the "FileSelected" event of the component. Please note that the OnFailure event will not be triggered for Min and Max file size validation.

Additionally, if you set the "AllowMultiple" property as "false", the component will not allow the user to select multiple files to upload. This is the intended behavior of the component.

[guigulmini]

Hello.

I had the same question as Keith. I tried using the "OnFailure" event handler to handle incorrect formats, but for some reason the failure event is not fired when user uploads a file with incorrect format.

Do I necessarily need to specify the "FileSelected" event handler as well?

[Yohapuja Selvakumaran]

Hi guigulmini,

We want to clarify how the uploader component behaves in certain scenarios. The failure event in the uploader triggers only when an error occurs during the actual upload process. Prior to uploading, if a file is selected that is not supported by the browser, the failure event will not be triggered. This behavior is by design in the uploader component to ensure it handles errors specifically related to the upload operation.

If you encounter issues with file formats not triggering the failure event, it's likely due to the default behavior where file validation occurs at the browser level before the upload process starts.

For more detailed information on how the failure event works, including its parameters and usage, you can refer to our API Documentation on Failure Event.

API Documnetation: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_OnFailure

Additionally, the file selected event can be used if you require custom actions or validations upon file selection. This event allows you to implement specific logic based on the files chosen by users. If such customization isn't necessary for your application, you can choose not to implement this event handler.

If you have any further questions or need assistance with specific scenarios related to file handling in the uploader component, please feel free to reach out to us.

Regards,

Yohapuja S