Files - Uploads

These blocks cover the common upload patterns. The dropzone ones use the UiDropfile component and add a real browse button, because the dropzone itself reacts to the mouse only. Files are checked for type, size and duplicates in the browser, and previews come from object URLs that the blocks revoke when they are not needed any more.

No file is sent anywhere. The progress bars are simulated with a timer, so replace them with real upload progress from your request, and check type and size again on the server.

Style One

Dropzone with a browse button, checks for type, size and duplicates, a list of rejected files and a list of the chosen files.

Style Two

Multi file progress with speed and time left, pause and resume, cancel for one file or all and an overall progress bar.

Style Three

Avatar upload with an instant preview, type and size checks, remove, cancel and save.

Style Four

Image upload with a thumbnail grid, a cover image, a limit counter and remove buttons.

Style Five

Upload dialog with an upload tab and an import from link tab. It shows progress and closes when the file is done.

Style Six

Failed uploads with a clear reason for each one, retry for network errors, replace file for bad files and a retry all button.