Quasar supplies a way for you to upload files through QUploader component.

Works well with QField for additional functionality such as a helper, error message placeholder and many others.

The documentation website only allows static content, so a demo with QUploader 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:

Uploader Screenshot 1
Uploader Screenshot 2

Basic Usage

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

Vue Properties

Vue PropertyTypeDescription
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
url-factoryFunctionFunction (with file object received as parameter) which returns a Promise that resolves to a URL.
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
hide-upload-progressBooleanHides the upload progress. Useful when you want some other means of signaling upload progress to the user.
additionalFieldsArrayAdditional fields to send along the upload request. Useful for authentication and so on. Array of Objects containing name and value props.
send-rawBooleanDon’t use multipart/form-data and send the file content inside the request body. If using this approach you will need to specify the correct Content-Type header. Defaults to false.

Common input frame properties:

prefixStringA text that should be shown before the textfield.
suffixStringA text that should be shown after the textfield.
float-labelStringA text label that will “float” up above the input field, once the input field gets focus.
stack-labelStringA text label that will be shown above the input field and is static.
colorStringOne from Quasar Color Palette.
invertedBooleanInverted mode. Color is applied to background instead.
darkBooleanIs QUploader rendered on a dark background?
alignStringOne of ‘left’, ‘center’ or ‘right’ which determines the text align within textfield.
disableBooleanIf set to true, textfield is disabled and the user cannot type anything.
errorBooleanIf set to true, the input fields colors are changed to show there is an error.
beforeArray of ObjectsIcon buttons on left side of input frame. Read below more details.
afterArray of ObjectsIcon buttons on right side of input frame. Read below more details.

Icon buttons

This section refers to before and after properties which can add additional buttons as icons to the textfield. Here is the structure of the two properties:

// required icon
icon: String,
// required function to call when
// icon is clicked/tapped
handler: Function,

// Optional. Show icon button
// if model has a value
content: Boolean,

// Optional. Show icon button
// if textfield is marked with error
error: Boolean


Show an icon button (with 'warning' as icon)
icon: 'warning',
handler () {
// do something...

Vue Methods

Vue MethodDescription
upload()Start file(s) upload.
abort()Abort uploading file(s).

Vue Events

Vue EventDescription
@add(files)Triggered when file is picked for upload
@remove:abort(file)Triggered when file is removed from upload queue while uploading.
@remove:cancel(file)Triggered when file is removed from upload queue before uploading.
@remove:done(file)Triggered when file is removed from upload list after it has been uploaded.
@uploaded(file, xhr)Triggered individually for each file that has just been uploaded
@fail(file, xhr)Triggered individually for each file that has encountered error while uploading
@startTriggered when upload has started
@finishTriggered when upload of file(s) has ended (with success or failure)


AWS S3 - Uploading Using Pre-Signed URLs

x-amz-acl and content-type headers must match the ACL and ContentType
specified when generating the signed url.
:headers="{ 'x-amz-acl': <acl>, 'content-type': <file-type> }"
async getSignedUrl (file) {
const contentType = file.type // To send the correct Content-Type
const fileName = file.name // If you want to use this value to calculate the S3 Key.
const response = await api.getSignedUrl({ fileName, contentType }) // Your api call to a sever that calculates the signed url.
return response.data.url