Quasar supplies a way for you to upload files.

The documentation website only allows static content, so a demo with Uploader is not possible as this assumes a server script running. As a result you can only see some screenshots (may be out of date) below:

Basic Usage

<q-uploader :url="url"></q-uploader>

Vue Properties

Vue PropertyTypeDefault ValueDescription
urlString(Required) URL or path to the server which handles the upload
nameStringName of the file, if it should be different than the file’s name.
headersObjectSpecify what headers need to be added to the XHR request
buttonClassStringCSS classes used for “Add” and “Upload” buttons
methodStringHTTP method to use (POST/PUT). Defaults to POST
extensionsStringExtensions to allow for uploading. Example: '.gif,.jpg,.jpeg,.png'
multipleBooleanAllow multiple file uploads
hide-upload-buttonBooleanHides the Upload button. You can then trigger it manually by calling upload() on the Vue ref
labelsObjectYou can overwrite default add, remove, upload, failed and uploading labels. Specify which prop to overwrite.
additionalFieldsArrayAdditional fields to send along the upload request. Useful for authentication and so on. Array of Objects containing name and value props.

Vue Methods

Vue MethodDescription
upload()Start file(s) upload.

Vue Events

Vue EventDescription
@addTriggered when file is picked for upload
@removeTriggered when file is removed from upload queue
@uploadTriggered individually for each file that has just been uploaded
@startTriggered when upload has started
@finishTriggered when upload of file(s) has ended (with success or failure)
@failTriggered when upload of file(s) has ended with a failure