From 052136c0a81b1edf10a99bbb01946c483a6179d8 Mon Sep 17 00:00:00 2001 From: Mohammad Aminsafaei Date: Mon, 13 Nov 2023 10:15:36 +0330 Subject: [PATCH] feat(blazorui): improve remove method in BitFileUpload #6003 (#6006) --- .../FileUpload/BitFileUpload.razor.cs | 211 ++++++++++-------- .../Components/FileUpload/BitFileUpload.scss | 34 ++- .../FileUpload/_BitFileUploadItem.razor | 15 +- 3 files changed, 156 insertions(+), 104 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.razor.cs index 9ba262c110..71f6859612 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.razor.cs @@ -204,28 +204,13 @@ public long? ChunkSize /// public string? InputId { get; private set; } + /// + /// Loading when do remove a file + /// + public bool IsRemoving { get; private set; } protected override string RootElementClass => "bit-upl"; - protected override Task OnInitializedAsync() - { - InputId = $"FileUpload-{UniqueId}-input"; - - _dotnetObj = DotNetObjectReference.Create(this); - - return base.OnInitializedAsync(); - } - - protected override async Task OnAfterRenderAsync(bool firstRender) - { - if (firstRender) - { - dropZoneInstance = await _js.SetupFileUploadDropzone(RootElement, inputFileElement); - } - } - - - /// /// Starts Uploading the file(s). /// @@ -300,12 +285,52 @@ public void CancelUpload(BitFileInfo? fileInfo = null) } } - - /// - /// Select file(s) by browse button or drag and drop. + /// Remove file. /// + /// + /// null => all files | else => specific file + /// /// + public async Task RemoveFile(BitFileInfo? fileInfo = null) + { + if (Files is null) return; + if (IsRemoving) return; + + IsRemoving = true; + + if (fileInfo is null) + { + foreach (var file in Files) + { + await RemoveOneFile(file); + } + } + else + { + await RemoveOneFile(fileInfo); + } + + IsRemoving = false; + } + + protected override Task OnInitializedAsync() + { + InputId = $"FileUpload-{UniqueId}-input"; + + _dotnetObj = DotNetObjectReference.Create(this); + + return base.OnInitializedAsync(); + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + dropZoneInstance = await _js.SetupFileUploadDropzone(RootElement, inputFileElement); + } + } + private async Task HandleOnChange() { if (UploadUrl is null) return; @@ -390,65 +415,6 @@ private async Task PauseUploadOneFile(int index) file.PauseUploadRequested = false; } - /// - /// 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(); - } - private void UpdateChunkSize(int fileIndex) { if (Files is null || AutoChunkSizeEnabled is false) return; @@ -530,33 +496,23 @@ private async Task CancelUploadOneFile(int index) file.CancelUploadRequested = false; } - /// - /// Remove file. - /// - /// - /// null => all files | else => specific file - /// - /// - public async Task RemoveFile(BitFileInfo? fileInfo = null) + private async Task RemoveOneFile(BitFileInfo fileInfo) { - if (Files is null) return; + if (fileInfo.Status is BitFileUploadStatus.Removed) return; - if (fileInfo is null) + if (fileInfo.TotalSizeOfUploaded > 0) { - foreach (var file in Files) - { - await RemoveOneFile(file); - } + await RemoveOneFileFromServer(fileInfo); } else { - await RemoveOneFile(fileInfo); + await UpdateStatus(BitFileUploadStatus.Removed, fileInfo); } } - private async Task RemoveOneFile(BitFileInfo fileInfo) + private async Task RemoveOneFileFromServer(BitFileInfo fileInfo) { - if (Files is null || RemoveUrl.HasNoValue()) return; + if (RemoveUrl.HasNoValue()) return; try { @@ -629,6 +585,65 @@ private static string AddQueryString(string uri, IReadOnlyDictionary + /// 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) { -
-