FileUpload Component Samples

The FileUpload control lets users select files for upload, emulating the ASP.NET Web Forms <asp:FileUpload> control. It renders as an HTML <input type="file">.

---

Basic File Upload

A simple file picker, just like the default Web Forms FileUpload:

Code:

<FileUpload @ref="basicUpload" />
<Button Text="Check File" OnClick="CheckBasicFile" />

@code {
    FileUpload basicUpload;
    void CheckBasicFile()
    {
        if (basicUpload.HasFile)
            status = $"Selected: {basicUpload.FileName}";
    }
}

---

Restrict to Images Only

Use Accept to limit file types, similar to adding a RegularExpressionValidator in Web Forms:

Code:

<FileUpload Accept="image/*" />

---

Accept Specific File Types

Restrict to PDF and Word documents:

Code:

<FileUpload Accept=".pdf,.doc,.docx" />

---

Multiple File Selection

Set AllowMultiple="true" to allow selecting more than one file at a time:

Code:

<FileUpload AllowMultiple="true" />

---

Disabled FileUpload

Set Enabled="false" to prevent interaction, just like Web Forms:

Code:

<FileUpload Enabled="false" />

---

Styled FileUpload

Apply styling with CssClass, BackColor, and Width:

Code:

<FileUpload CssClass="form-control"
            BackColor="WebColor.LightCyan"
            Width="Unit.Pixel(400)" />

---

Visibility Toggle

Use the Visible property to show/hide, matching Web Forms behavior:

Code:

<FileUpload Visible="@uploadVisible" />