Skip to main content

File Upload

Basic file upload component

<blaze-file-upload>
  <button class="c-button c-button--info">Upload file</button>
</blaze-file-upload>

Drop zone

Drop to upload your files
<blaze-file-upload drop multiple>Drop to upload your files</blaze-file-upload>

Attributes

NameDescription
drop: booleanConverts the file uploader into a drop zone. A dropzone will automatically attempt to upload the files based on the url value.
multiple: booleanAllow multiple files to be selected
url: stringThe end point to upload the files to, defaults to '/'

Events

Events are only dispatched from a dropzone. Each event has an upload state and a list of files that are being uploaded.

NameDescription
uploadingDispatched when files are dropped into the dropzone
completedDispatched when the upload is done, query the event message for errors

CSS

Basic

<div class="c-file-upload">
  <button class="c-button c-button--info">Upload file</button>
  <input type="file" />
</div>

Drop zone

Drop to upload your files
<div class="c-file-upload c-file-upload--drop">
  Drop to upload your files
  <input type="file" />
</div>