Add Append parameter to BitFileUpload component (#1562)#9887
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis update revises the file upload functionality in both Blazor and JavaScript parts. The Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant C as BitFileUpload Component
participant JS as JavaScript Uploader
U->>C: Select files
C->>C: Check Appended parameter
alt Appended is false
C->>C: Clear _files list
end
C->>C: Append new files to _files
C->>JS: Invoke setup with appended flag
JS->>JS: Update file indexing & uploader queue
JS->>C: Return upload progress/status
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (8)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.ts (3)
17-25: Consider adding validation for file uniqueness.When appending files, there's no check to prevent duplicate files from being added. Consider adding validation to prevent duplicates based on file name or content.
const lastIndex = appended ? FileUpload._fileUploaders.length : 0; const files = Array.from(inputElement.files!).map((file, index) => ({ name: file.name, size: file.size, type: file.type, fileId: Utils.uuidv4(), file: file, index: (index + lastIndex) })); + +// Add duplicate check when appending +if (appended) { + const existingFileNames = FileUpload._fileUploaders.map(u => u.file.name); + files = files.filter(f => !existingFileNames.includes(f.name)); +}
33-34: Consider moving input reset.The input reset could be moved before the file processing to prevent potential memory issues with large files.
-const files = Array.from(inputElement.files!).map((file, index) => ({ +// Reset input early to free up memory +const selectedFiles = Array.from(inputElement.files!); +inputElement.value = ''; + +const files = selectedFiles.map((file, index) => ({ name: file.name, size: file.size, type: file.type, fileId: Utils.uuidv4(), file: file, index: (index + lastIndex) })); - -inputElement.value = '';
149-152: Consider adding file type validation.When uploading chunks, consider validating the file type before processing to prevent potential security issues.
upload(from: number, to: number, uploadUrl: string, headers: Record<string, string>): void { const file = this.file; if (file === null) return; + + // Validate file type before upload + const allowedTypes = ['image/jpeg', 'image/png', 'application/pdf']; + if (!allowedTypes.includes(file.type)) { + console.error('Invalid file type:', file.type); + return; + }src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs (3)
41-44: Consider improving parameter documentation.The documentation for the
Appendedparameter could be more detailed to explain the behavior and use cases./// <summary> - /// Additional files are selected they will be appended to the existing list. + /// When set to true, newly selected files will be appended to the existing list instead of replacing them. + /// This is useful when you want to allow users to add more files to their current selection. + /// Default value is false, which means new selections will replace existing files. /// </summary>
437-456: Consider adding file count validation.The
HandleOnChangemethod should validate the total number of files when appending to prevent potential memory issues.private async Task HandleOnChange() { var url = AddQueryString(UploadUrl, UploadRequestQueryStrings); if (Appended is false) { _files.Clear(); } + else + { + const int maxTotalFiles = 100; // Consider making this configurable + if (_files.Count >= maxTotalFiles) + { + // Consider adding an OnError event to handle this case + return; + } + } _files.AddRange(await _js.BitFileUploadSetup(UniqueId, _dotnetObj, _inputRef, Appended, url, UploadRequestHttpHeaders));
519-527: Consider adding cancellation token support.Long-running operations like file uploads should support cancellation tokens for better resource management.
- private async Task PauseUploadOneFile(int index) + private async Task PauseUploadOneFile(int index, CancellationToken cancellationToken = default) { if (_files.Any() is false) return; - await _js.BitFileUploadPause(UniqueId, index); + await _js.BitFileUploadPause(UniqueId, index).WaitAsync(cancellationToken); var file = _files[index]; - await UpdateStatus(BitFileUploadStatus.Paused, file); + await UpdateStatus(BitFileUploadStatus.Paused, file).WaitAsync(cancellationToken); file.PauseUploadRequested = false; }src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs (2)
22-27: Improve the parameter description for clarity.The description of the
Appendedparameter could be more precise and grammatically correct.- Description = "Additional files are selected they will be appended to the existing list." + Description = "When true, additional selected files will be appended to the existing list instead of replacing them."
584-584: Improve readability of the MaxSize value.The hardcoded value
1024 * 1024 * 1could be more readable with a comment indicating the size in MB.-<BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" MaxSize="1024 * 1024 * 1" /> +<BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" MaxSize="1024 * 1024 * 1" @* 1MB *@ />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs(17 hunks)src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.ts(3 hunks)src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadJsRuntimeExtensions.cs(1 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor(3 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs(4 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build and test
🔇 Additional comments (10)
src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadJsRuntimeExtensions.cs (1)
12-12: LGTM!The changes correctly integrate the new
appendedparameter into theBitFileUploadSetupmethod and its JavaScript invocation.Also applies to: 16-16
src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.ts (3)
9-15: LGTM: Clear implementation of appended mode.The conditional clearing of existing uploaders based on the
appendedparameter is well-implemented.
27-31: LGTM: Clean uploader creation.The creation of uploaders with the new file reference is well-implemented.
118-118: LGTM: Improved file handling in BitFileUploader.The change from storing
inputElementto storing theFileobject directly is a good improvement that simplifies the code and reduces dependencies.Also applies to: 125-131
src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs (1)
18-18: LGTM: Improved file state management.Using a non-nullable list with collection expression syntax is a good choice for maintaining file state.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs (1)
503-549: LGTM! Well-structured implementation with proper error handling.The helper methods for calculating upload progress, file size, and handling file type validation are well-implemented with proper edge case handling.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor (4)
35-38: LGTM! Clear demonstration of the new Appended feature.The new demo section effectively showcases the Appended feature with a clear description and straightforward example.
40-43: LGTM! MaxSize section properly maintained.The MaxSize section has been correctly preserved with its functionality intact while being renumbered to accommodate the new Appended section.
45-164: LGTM! Sections properly renumbered.All subsequent sections have been systematically renumbered while preserving their original content and functionality.
35-164:Details
❓ Verification inconclusive
Verify code-behind references.
Please ensure that the code-behind file (
BitFileUploadDemo.razor.cs) has been updated with the corresponding example code references (example5RazorCode,example5CsharpCode, etc.) for the new and renumbered sections.
🏁 Script executed:
#!/bin/bash # Description: Check for example code references in the code-behind file # Search for example code references rg -A 1 'example[0-9]+[RC]azorCode' src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.csLength of output: 1945
Verify code-behind references for both Razor and C# code.
We confirmed that the code-behind file (
BitFileUploadDemo.razor.cs) contains updated Razor code references for all demo examples (e.g.,example5RazorCodethroughexample13RazorCode). Please ensure that the corresponding C# code references (such asexample5CsharpCode, etc.) have also been updated and correctly aligned with the new and renumbered sections.
msynk
changed the title
2 participants
This closes #1562
Summary by CodeRabbit
New Features
Documentation