File upload succeeds but File Upload component shows it failed.
I am trying to upload a file using File upload component. The file uploads correctly to the server, however the UI reports that the file upload failed. What could the underlying issue be?
UI showing file upload failed:
Files uploaded successfully:
UploadFiles_OnFailure => FailureEventArgs args:
{"chunkIndex":0.0,"chunkSize":0.0,"e":{"ValueKind":1},"event":null,"file":{"fileSource":null,"id":"2021-12-02 11_21_33-Pay People _ Payments _ Ally - Brave_1.png","input":null,"list":null,"name":"2021-12-02 11_21_33-Pay People _ Payments _ Ally - Brave.png","rawFile":{"ValueKind":1},"size":14512.0,"status":"File failed to upload","statusCode":"0","type":"png","mimeContentType":"image/png","lastModifiedDate":"2021-12-02T17:21:45.613Z","validationMessages":{"maxSize":"","minSize":""}},"retryFiles":null,"operation":"upload","response":{"headers":"","readyState":{"ValueKind":4},"statusCode":{"ValueKind":4},"statusText":"","withCredentials":false},"statusText":"File failed to upload","totalChunk":0.0}
UI Code:
<div class="row">
<div class="col-md-10">
<SfUploader @ref="UploadFiles" ID="UploadFiles" MaxFileSize="1000000" AllowedExtensions="@AllowedFileExtensionsAsCommaSeperatedString" AllowMultiple="true" AutoUpload="false">
<UploaderEvents OnRemove="UploadFiles_OnRemove" BeforeRemove="UploadFiles_BeforeRemove" Success="UploadFiles_Success" FileSelected="UploadFiles_FileSelected"
OnFailure="UploadFiles_OnFailure"/>
<UploaderAsyncSettings SaveUrl="api/FileUpload/Save" RemoveUrl="api/FileUpload/Remove" ChunkSize="@ChunkSize" RetryCount="5" RetryAfterDelay="3000"/>
</SfUploader>
</div>
<SfQRCodeGenerator Width="200px" Height="150px" Value="Syncfusion"></SfQRCodeGenerator>
</div>
<div class="pt-5 mt-5 delimiter-top">
<button type="submit" class="btn btn-sm btn-primary" @onclick="@GenerateQRCodeButtonClick">Generate QR Code</button>
</div>
</div>
