Feature/progress bar when uploading files - #4
Merged
Conversation
Improved SubirArchivo.razor to allow multiple file selection and display upload progress. Updated SubirArchivoMetodo for multi-file handling, progress updates, and better error/UI state management. Refactored ArchivoService and IArchivoService to support progress callbacks, enabling real-time progress updates during chunked uploads.
Changed input handler to store selected files in archivosSeleccionados. Added UI to list selected files and enable upload button when files are chosen. Refactored SubirArchivos to upload all selected files with progress bar and disabled button during upload. Updated UI to reflect upload state and removed navigation to "/archivos" after upload.
There was a problem hiding this comment.
Pull request overview
This PR improves the FrontApp file upload UX by enabling multi-file selection and surfacing upload progress to the UI via a service-layer progress callback.
Changes:
- Added multi-file selection UI with selected-file list, disabled upload button while uploading, and a progress bar in
SubirArchivo.razor. - Extended
IArchivoService.SubirArchivoAsync/ArchivoService.SubirArchivoAsyncto accept a progress callback and report progress during chunked uploads. - Minor cleanup in upload-related code (with some leftover commented code that should be removed).
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| FrontApp/Servicios/IArchivoService.cs | Extends the upload API to accept a progress callback. |
| FrontApp/Servicios/ArchivoService.cs | Reports per-chunk upload progress during chunked uploads. |
| FrontApp/Pages/SubirArchivo.razor | Adds multi-file selection UX and a progress bar during uploads. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
12
to
16
| private readonly HttpClient _httpClient; | ||
|
|
||
| //public Action<int>? OnProgresoActualizado; | ||
|
|
||
| public ArchivoService(HttpClient httpClient) |
Comment on lines
+86
to
92
| // porcentaje de carga de chunks, para actualizar la barra de progreso | ||
| int porcentaje = (int)((chunkIndex + 1) * 100.0 / chunksTotales); | ||
| OnProgresoActualizado?.Invoke(porcentaje); | ||
|
|
||
| using var resp = await _httpClient.SendAsync(req, HttpCompletionOption.ResponseHeadersRead); | ||
| resp.EnsureSuccessStatusCode(); | ||
| chunkIndex++; |
Comment on lines
15
to
+18
| <label for="formFileMultiple" class="form-label">Seleccionar archivos:</label> | ||
| <InputFile class="form-control" OnChange="SubirArchivoMetodo" multiple/> | ||
| <!-- <InputFile class="form-control" OnChange="SubirArchivoMetodo" multiple /> --> | ||
| <InputFile class="form-control" OnChange="ArchivosSeleccionados" multiple /> | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request enhances the file upload experience in the application by implementing multi-file upload with progress tracking and updating the service layer to support progress callbacks. The UI now allows users to select multiple files, displays selected files, and shows a progress bar during uploads. The backend services are updated to report upload progress for each file.
User Interface Improvements
SubirArchivo.razorto support selecting multiple files, display selected files and their sizes, and show a progress bar during uploads. The upload button is now disabled while uploading, and progress is updated in real-time.Service Layer Enhancements
IArchivoServiceand its implementation to accept a progress callback (Action<int> OnProgresoActualizado) in theSubirArchivoAsyncmethod, enabling progress updates during file uploads. [1] [2]ArchivoServiceto invoke the progress callback after each chunk, allowing the UI to reflect upload progress accurately.Code Cleanup