+ /// Receive upload progress notification from underlying javascript.
+ ///
+ [JSInvokable("HandleUploadProgress")]
+ public async Task HandleUploadProgress(int index, long loaded)
+ {
+ if (Files is null) return;
+
+ var file = Files[index];
+ if (file.Status != BitFileUploadStatus.InProgress) return;
+
+ file.SizeOfLastChunkUploaded = loaded;
+ await UpdateStatus(BitFileUploadStatus.InProgress, file);
+ StateHasChanged();
+ }
+
+ ///
+ /// Receive upload finished notification from underlying JavaScript.
+ ///
+ [JSInvokable("HandleFileUpload")]
+ public async Task HandleFileUpload(int fileIndex, int responseStatus, string responseText)
+ {
+ if (Files is null || UploadStatus == BitFileUploadStatus.Paused) return;
+
+ var file = Files[fileIndex];
+ if (file.Status != BitFileUploadStatus.InProgress) return;
+
+ file.TotalSizeOfUploaded += ChunkedUploadEnabled ? _internalChunkSize : file.Size;
+ file.SizeOfLastChunkUploaded = 0;
+
+ UpdateChunkSize(fileIndex);
+
+ if (file.TotalSizeOfUploaded < file.Size)
+ {
+ await Upload(file);
+ }
+ else
+ {
+ file.Message = responseText;
+ if (responseStatus is >= 200 and <= 299)
+ {
+ await UpdateStatus(BitFileUploadStatus.Completed, file);
+ }
+ else if ((responseStatus is 0 && (file.Status is BitFileUploadStatus.Paused or BitFileUploadStatus.Canceled)) is false)
+ {
+ await UpdateStatus(BitFileUploadStatus.Failed, file);
+ }
+
+ var allFilesUploaded = Files.All(c => c.Status is BitFileUploadStatus.Completed or BitFileUploadStatus.Failed);
+ if (allFilesUploaded)
+ {
+ UploadStatus = BitFileUploadStatus.Completed;
+ await OnAllUploadsComplete.InvokeAsync(Files.ToArray());
+ }
+ }
+
+ StateHasChanged();
+ }
+
public void Dispose()
{
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.scss b/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.scss
index bc28a21e61..7b8dc74b47 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.scss
@@ -21,6 +21,16 @@
background-color: $color-background-disabled;
}
}
+
+ @keyframes bit-upl-spinner-animation {
+ 0% {
+ transform: rotate(0deg);
+ }
+
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
}
.bit-upl-fi {
@@ -90,9 +100,6 @@
}
}
-.bit-upl-ip {
-}
-
.bit-upl-uld {
.bit-upl-us {
color: $color-state-success;
@@ -186,3 +193,24 @@
}
}
}
+
+.bit-upl-ldg {
+ height: 100%;
+ display: flex;
+ width: spacing(4);
+ margin-right: spacing(0.5);
+ align-items: center;
+ justify-content: center;
+}
+
+.bit-upl-spn {
+ border-radius: 50%;
+ width: spacing(2);
+ height: spacing(2);
+ border-width: spacing(0.2125);
+ border-style: $shape-border-style;
+ border-color: $color-border-secondary;
+ border-top-color: $color-primary-dark;
+ animation: bit-upl-spinner-animation 1.3s linear infinite;
+ animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67);
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/_BitFileUploadItem.razor b/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/_BitFileUploadItem.razor
index 1572c8c12d..f7ae1fd818 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/_BitFileUploadItem.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/_BitFileUploadItem.razor
@@ -48,9 +48,18 @@
}
else if (FileUpload.ShowRemoveButton)
{
- FileUpload.RemoveFile(Item)">
-
-
+ @if (FileUpload.IsRemoving)
+ {
+
+ }
+ else
+ {
+ FileUpload.RemoveFile(Item)">
+
+
+ }
}
}