File Upload | Fluent UI Recipes

File UploadA collection of file upload components built with React and Fluent UI 2

Upload file

Basic file uploader

Upload file with droppable area

Drop your file here or click to browseSingle file uploader

Drop your file here or click to browse

Single file uploader w/ button

Drop your file here or click to browse

document.pdf

Single file uploader w/ list

Upload files

Drag & drop or click to browse

All files ∙ Max 10 files

document.pdf516.34KB

intro.zip246.95KB

conclusion.xlsx344.6KB

Multiple file uploader w/ list

Files (3)

document.pdf516.34KB

intro.zip246.95KB

conclusion.xlsx344.6KB

Multiple file uploader w/ list

Upload by clicking here or drag and drop your filesFill out the . Kindly fill in the necessary data, and once completed, kindly re-upload the files.File uploader w/ fancy background

Avatar upload button

Avatar uploader with droppable area

Files (3)

intro.zip246.95KB

image-01.jpg1.46MB

audio.mp31.46MB

Mixed content w/ image grid preview

Files (3)

intro.zip246.95KB

image-01.jpg1.46MB

audio.mp31.46MB

File upload with simulated progress

Avatar uploader with cropper