File Upload Functionality

Overview

The BlazorDCP solution implements file upload using a combination of Blazor UI components, a backend API controller, and dialog abstractions. The process is secure, session-aware, and integrates with the application's dialog infrastructure.

User Interface Layer

Component: WMOpenFileDialogFormComponent.razor

• Purpose: Provides the UI for file selection and upload within a modal dialog, using Telerik's FileUpload (https://www.telerik.com/blazor-ui/documentation/components/upload/overview ) component.

• Key Elements:

  • <TelerikUpload>: Handles file selection and upload.

  • SaveUrl="/api/upload/save": Uploads files to the backend API endpoint.

  • OnUpload: Event handler to add session information to the upload request.

  • OnSuccess: Event handler to process the server response.

  • <TelerikButton>: Allows the user to cancel the dialog.

• Session Handling: On upload, the component retrieves the current session ID from the HTTP context and adds it to the upload request as sessionId. This ensures the backend can associate the upload with the correct user session.

• Dialog Integration: The component receives an OpenFileDialogForm model, which is used to manage dialog state and results. On successful upload, the file name is set on the dialog, the dialog result is set to OK, and the dialog is closed.

• Extension: It extends the WMFormComponent in order to accomplish the dialog behavior.

Dialog Abstractions

Class: OpenFileDialog

• Purpose: Represents the logic for displaying a file open dialog, similar to WinForms' OpenFileDialog.

• Key Implementation: Uses a factory (DialogFormFactory) to create an instance of OpenFileDialogForm. The dialog is shown via ShowCore, which awaits the result of the form's ShowDialog() method.

Backend API Layer

Controller: UploadController

• Purpose: Handles file upload requests from the Blazor UI.

• Endpoint: POST /api/upload/save

• Key Implementation: Accepts a file (IFormFile files) and a sessionId (from the form data). Validates that sessionId is a valid GUID using a strict regex. Saves the uploaded file to a session-specific folder under the web root, using a unique file name. Returns the file save location on success, or an error message and status code on failure.

• Security: Only accepts session IDs that match the GUID format, preventing path traversal and other attacks.

End-to-End Flow

1. User Action: The user opens a file dialog in the Blazor app (via OpenFileDialog and OpenFileDialogForm). Once the ShowDialog method is called, the execution thread gets blocked until the dialog gets closed, just like the behavior in WinForms.

2. File Selection: The WMOpenFileDialogFormComponent displays the upload UI. The user selects a file.

3. Upload Trigger: When the user uploads, the component:

   1. Retrieves the session ID from the HTTP context.

   2. Adds sessionId to the upload request.

   3. Sends the file to /api/upload/save.

4. Backend Processing:

   1. UploadController.Save receives the file and session ID.

   2. Validates the session ID.

   3. Saves the file in a session-specific folder.

   4. Returns the file path or an error.

5. Result Handling: On success, the Blazor component updates the dialog's state and closes it, making the uploaded file available to the application. The main executed thread blocked in step one is resumed.

Security and Session Awareness

• Session Isolation: Each upload is tied to a session, and files are stored in folders named after the session's GUID.

• Input Validation: The backend strictly validates the session ID to be a GUID, mitigating common file upload vulnerabilities.