Quasar is a popular Vue UI library for developing good looking Vue apps.
In this article, we’ll take a look at how to create Vue apps with the Quasar UI library.
Clearable File Input
We can add a clearable file input with the clearable prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-file
clearable
standout
v-model="model"
label="Label"
counter
clearable
>
</q-file>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
model: undefined
}
});
</script>
</body>
</html>
Disable and Readonly File Inputs
We can add the disable and readonly prop to disable interaction with the file input.
disable changes the styles but readonly doesn’t.
For instance, we can use it by writing:
<!DOCTYPE html>
<html>
<head>
<link
href="[https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons](https://medium.com/r/?url=https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DRoboto%3A100%2C300%2C400%2C500%2C700%2C900%7CMaterial%2BIcons)"
rel="stylesheet"
type="text/css"
/>
<link
href="[https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css](https://medium.com/r/?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fquasar%401.12.13%2Fdist%2Fquasar.min.css)"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="[https://cdn.jsdelivr.net/npm/vue@](https://medium.com/r/?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue%40)^2.0.0/dist/vue.min.js"></script>
<script src="[https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js](https://medium.com/r/?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fquasar%401.12.13%2Fdist%2Fquasar.umd.min.js)"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-file
disable
filled
v-model="model"
hint="Disable"
style="width: 250px;"
>
</q-file>
<q-file
readonly
filled
v-model="model"
hint="Readonly"
style="width: 250px;"
>
</q-file>
<q-file
disable
readonly
filled
v-model="model"
hint="Disable and readonly"
style="width: 250px;"
>
</q-file>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
model: undefined
}
});
</script>
</body>
</html>
Select Mutliple Files
We can let users select multiple files with the multiple prop:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-file
v-model="files"
label="Pick files"
filled
multiple
style="max-width: 300px;"
>
</q-file>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
files: undefined
}
});
</script>
</body>
</html>
Appending Files
By default, the file input resets the selected files each time we select files.
With the append prop, we can let users keep adding files:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-file
v-model="files"
label="Pick files"
filled
multiple
append
style="max-width: 300px;"
>
</q-file>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
files: undefined
}
});
</script>
</body>
</html>
File Input Counter
The file input comes with a counter for the number of files selected and the total size of the selected files.
We just have to add the counter prop to enable it:
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
rel="stylesheet"
type="text/css"
/>
<link
href="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.min.css"
rel="stylesheet"
type="text/css"
/>
</head>
<body class="body--dark">
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.12.13/dist/quasar.umd.min.js"></script>
<div id="q-app">
<q-layout
view="lHh Lpr lFf"
container
style="height: 100vh;"
class="shadow-2 rounded-borders"
>
<div class="q-pa-md">
<q-file
v-model="files"
label="Pick files"
filled
counter
style="max-width: 300px;"
>
</q-file>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
files: undefined
}
});
</script>
</body>
</html>
Conclusion
We can add file inputs with various options into our Vue app with Quasar.
