> For the complete documentation index, see [llms.txt](https://docs.gapvelocity.ai/webmap-for-blazor-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.gapvelocity.ai/webmap-for-blazor-documentation/blazor-ai-migrator/research-for-blazor/file-upload-functionality.md).

# 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.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdV912ejwycBVtpXP9cog4Fet2HtRe5eIYA50BjxpJ8UZRw7VZpnc5WfdDX6xCW3M_2hiDuZ3hBINCpXXV6uEz3t2Cd6L5qMh_8CHTKEhb-WNAw23KD9TW7t0VxdQoLj3_k8QKFKQ?key=shDO6SBn3qb460Yhv85Ivw" alt=""><figcaption></figcaption></figure>

<div data-full-width="true"><figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXf5B81NtjIkaxqxUxM1GKQJI3wD5s0oSi-TIrHKR5-bopkjnO2U6FFsGYfZsIt_mpbXG8IMbWyoKmLObwcjx3zrDCfHeASVJUby525tk3cGiA8dnZ10TgSYB4g-sw5G9AmbUNwq?key=shDO6SBn3qb460Yhv85Ivw" alt="" width="563"><figcaption></figcaption></figure></div>

### 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.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXd8vyZ6yPmI5stnVdSZ0f_1Oap4NCu6UXzeaDRNiWJ-ONlYLn3fa7ecyVCcYGbxJ1E0Bg6MzV4z3FRRzAUpCNfT7xKUY6KrvupLNzuOWMoVZuRtSlo2DWShkUKi7eLzciIbSWbb?key=shDO6SBn3qb460Yhv85Ivw" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXeXIXJ0zNg4D-1Jwj3AxxWQR0OAm2va9TS1ldqzCUhqdng02IA_LhglF9-ShlmRggAVHXjPuryJMsca8j--dgyn60Kv-dDqmQhN42Y5RF4BaYL2TRKH4rzSGJQYvraCKx387pbiEA?key=shDO6SBn3qb460Yhv85Ivw" alt=""><figcaption></figcaption></figure>

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfjNfvyrTPLcirZQlItvD1ZIy3g_fFFNBjYGx3Mj1rObFJk0HA18tQ4Y3MC1qbSxr0N1atYS4soRXwUUs8fn7KSIob_PNMGByfUhdBxtbmkRDUxhiPOkK_EWlidG-35kWQfq6o_?key=shDO6SBn3qb460Yhv85Ivw" alt=""><figcaption></figcaption></figure>

### 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.