File Upload
Drop zone with file queue, progress bar and progress fill variants.
Empty drop zones
Drop zone variants (no files yet)
Click to upload
or drag and drop
SVG, PNG, JPG or GIF (max. 800x400px)Click to upload
or drag and drop
SVG, PNG, JPG, GIF, PDF, FIG or MP4razor
<FileUpload Accept="image/*,.pdf"
AcceptHint="SVG, PNG, JPG or GIF (max. 800x400px)"
OnFilesSelected="HandleFilesSelected" />
@code {
private Task HandleFilesSelected(IReadOnlyList<IBrowserFile> files)
{
// handle the dropped files
return Task.CompletedTask;
}
}Dropzone style
Compact card with an inner gray drop panel (file-plus icon, hint only)
SVG, PNG, JPG or GIF (max. 800x400px)
PDF, DOC or DOCX (max. 10MB)
razor
<FileUpload Style="dropzone"
Accept="image/*"
AcceptHint="SVG, PNG, JPG or GIF (max. 800x400px)"
OnFilesSelected="HandleFilesSelected" />File type icon
Replace the cloud / file-plus icon with a typed document badge (PDF, JPG, FIG, etc.)
Click to upload
or drag and drop
PDF only (max. 10MB)JPG only (max. 800x400px)
Figma file (FIG)
MP4 video (max. 100MB)
razor
@* Default style with a PDF badge *@
<FileUpload FileIconType="pdf"
Accept=".pdf"
AcceptHint="PDF only (max. 10MB)"
OnFilesSelected="HandleFilesSelected" />
@* Dropzone style with a JPG / FIG / MP4 badge *@
<FileUpload Style="dropzone" FileIconType="jpg" ... />
<FileUpload Style="dropzone" FileIconType="fig" ... />
<FileUpload Style="dropzone" FileIconType="mp4" ... />Progress bar style — with files
Separate bar beneath each file row
Click to upload
or drag and drop
SVG, PNG, JPG or GIF (max. 800x400px)Tech design requirements.pdf
100%
Dashboard recording.mp4
40%
Dashboard prototype FINAL.fig
80%
razor
<FileUpload Accept="image/*,.pdf"
AcceptHint="SVG, PNG, JPG or GIF"
OnFilesSelected="HandleFilesSelected">
<FileUploadItem FileName="tech-requirements.pdf"
FileSize="204800"
TotalFileSize="204800"
Progress="100"
DisplayType="progress-bar"
OnRemove="@(() => { })" />
<FileUploadItem FileName="recording.mp4"
FileSize="6553600"
TotalFileSize="16777216"
Progress="40"
DisplayType="progress-bar"
OnRemove="@(() => { })" />
</FileUpload>Progress fill style — with files
Fill background of the row itself
Click to upload
or drag and drop
SVG, PNG, JPG, GIF, PDF, FIG or MP4Tech design requirements.pdf
Dashboard prototype.mp4
Dashboard prototype FINAL.fig
razor
<FileUpload Accept="image/*,.pdf,.fig,.mp4"
AcceptHint="SVG, PNG, JPG, GIF, PDF, FIG or MP4"
OnFilesSelected="HandleFilesSelected">
<FileUploadItem FileName="design.fig"
FileSize="4404019"
TotalFileSize="4404019"
Progress="80"
DisplayType="progress-fill"
OnRemove="@(() => { })" />
</FileUpload>Live upload — stream to disk
Interactive demo wired up to IFileUploadService — drop real files to see progress tracking.
Click to upload
or drag and drop
Any file type (max. 50 MB)Live upload — Azure Blob Storage
Click to upload
or drag and drop
Any file type (max. 100 MB)