File Picker
v1.8+

QFile is a component which handles the user interaction for picking file(s).

TIP

If you also want a component to also handle the upload for you, please consider using QUploader instead.

Installation


// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QFile'
    ]
  }
}

Design

WARNING

For your QFile you can use only one of the main designs (filled, outlined, standout, borderless). You cannot use multiple as they are self-exclusive.

Design Overview



Decorators

Decorators



Coloring

Coloring



Clearable

As a helper, you can use clearable prop so user can reset model to null through an appended icon. The second QFile in the example below is the equivalent of using clearable.

Clearable



Disable and readonly

Disable and readonly



Usage

WARNING

Under the covers, QFile uses a native input. Due to browser security policy, it is not allowed to programmatically fill such an input with a value. As a result, even if you set v-model from the beginning to a value, the component will show those file(s) but the input tag itself won’t be filled in with that value. A user interaction (click/tap/ENTER key) is absolutely required in order for the native input to contain them. It’s best to always have the initial value of model set to null or undefined/void 0.

Basic

Single file



Multiple files



Counters

Basic counter



Counter label



Using chips

With chips



Using file slot

The example below highlights how you can customize the display of each file and even incorporate a possible upload progress indicator:

With progress indicator



Restricting files

Basic restrictions



You can even combine the restrictions above.

TIP

In the example above, we’re using accept property. Its value must be a comma separated list of unique file type specifiers. Maps to ‘accept’ attribute of native input type=file element. More info.

WARNING

Recommended format for the accept property is <mediatype>/<extension>. Examples: “image/png”, “image/png”. QFile uses an <input type="file"> under the covers and it relies entirely on the host browser to trigger the file picker. If the accept property (that gets applied to the input) is not correct, no file picker will appear on screen or it will appear but it will accept all file types.

You can also apply custom filters (which are executed after user picks files):

Filter



Native form submit
v1.9+

When dealing with a native form which has an action and a method (eg. when using Quasar with ASP.NET controllers), you need to specify the name property on QFile, otherwise formData will not contain it (if it should):

Native form



QFile API