Mark files as invalid before uploading

[Tom Matheussen]

We have the uploader component added to our code, and want to do some validation on the selected files before we start uploading them. We use the `ValueChange` method to perform some additional actions to combine the files (adding them to a multi-part form).

In there, we check if the files that are added, are all actually needed/requested (based on filename mapping to some other part of the page), if they are not needed we can skip over them, but the uploader component still shows that the files are 'Uploaded successfully'. Is there a way to mark them as skipped or invalid?

[Ponmani Murugaiyan]

Hi Tom,

You can restrict the file uploading based on the file name using the FileSelected event. In which based on the file name you can prevent using the argument Cancel as like below code snippet.

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_FileSelected

<SfUploader AutoUpload="false">

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

</SfUploader>

 

@code {

    private void onFileSelect(SelectedEventArgs args)

    {

        foreach (var file in args.FilesData)

        {

            if(file.Name == "test.txt")

            {

                args.Cancel = true;

            }

        }

    }

}

Or, you can use the BeforeUpload event, which triggers before the upload process starts.

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#Syncfusion_Blazor_Inputs_UploaderEvents_BeforeUpload

Please find the sample and list of events reference for more information.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Uploader_Events-1379283922

Events: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.UploaderEvents.html#properties

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

Regards,

Ponmani M

[Tom Matheussen]

Hi Ponmani,

we can use this behaviour, but this would invalidate all the selected files. What we would like to have is that we can mark each individual file as 'failed' or similar, imagine something like this follow example:

```

<SfUploader AutoUpload="false">

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

</SfUploader>

 

@code {

    private void onFileSelect(SelectedEventArgs args)

    {

        foreach (var file in args.FilesData)

        {

            if(file.Name == "not-allowed.txt")

            {

                file.Status = "Skipped";

                continue;

            }

            // Some other things happen here to interact with other data

        }

    }

}
```

Is it possible to set the Status or StatusCode of individual files when they are selected (or in the BeforeUpload event) without interacting with a server side part?

[Ponmani Murugaiyan]

Hi Tom, 

We can customize the success and failure status messages only in the success and failure event of the Uploader component. We cannot change before uploading. 

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

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Uploader_Status-2127150664 

<SfUploader AutoUpload="false"> 

    <UploaderEvents ValueChange="OnChange" Success="OnSuccess" OnFailure="OnFailure"></UploaderEvents> 

</SfUploader> 

 

@code { 

    public void OnSuccess(SuccessEventArgs args) 

    { 

        args.StatusText = "File upload Success"; 

    } 

    public void OnFailure(FailureEventArgs args) 

    { 

        args.StatusText = "Failed"; 

    } 

} 

Regards, 

Ponmani M