Uploader     

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:

Basic Usage

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

Vue Properties

Common input frame properties:

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
}

Examples:

<!--
  Show an icon button (with 'warning' as icon)
-->
<q-uploader
  :url="url"
  :after="[
    {
      icon: 'warning',
      handler () {
        // do something...
      }
    }
  ]"
/>

Vue Methods

Vue Events

Examples

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.
-->
<q-uploader
  url=""
  method="PUT"
  :headers="{ 'x-amz-acl': <acl>, 'content-type': <file-type> }"
  :url-factory="getSignedUrl"
  :send-raw="true"
/>

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
}