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.
File Type and Size Validation
We can validate file type and size with Quasar’a file picker in our Vue app.
To add it, we write:
<!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
style="max-width: 300px;"
v-model="filesMaxSize"
filled
label="Filtered"
multiple
:filter="checkFileSize"
@rejected="onRejected"
>
</q-file>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
files: [],
filesMaxSize: null,
filesPng: null
},
methods: {
checkFileSize(files) {
return files.filter((file) => file.size < 2048);
},
onRejected(rejectedEntries) {
this.$q.notify({
type: "negative",
message: `${rejectedEntries.length} file(s) did not pass validation constraints`
});
}
}
});
</script>
</body>
</html>
We add the checkFileSize method to return files that are less than the given size in bytes.
files has an array of files.
size has the file size.
onRejected lets us display a message if we have any files that don’t meet the requirements.
rejectedEntries has an array of rejected files.
We set the filter prop to the checkFileSize method.
onRejected is the value of the rejected listener.
We can check file types of the selected files with:
<!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
style="max-width: 300px;"
v-model="filesMaxSize"
filled
label="Filtered"
multiple
:filter="checkFileType"
@rejected="onRejected"
>
</q-file>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
files: [],
filesMaxSize: null,
filesPng: null
},
methods: {
checkFileType(files) {
return files.filter((file) => file.type === "image/png");
},
onRejected(rejectedEntries) {
this.$q.notify({
type: "negative",
message: `${rejectedEntries.length} file(s) did not pass validation constraints`
});
}
}
});
</script>
</body>
</html>
checkFileType lets us check the file type. We get the type property of each file and compare it.
Forms
We can add forms with the q-form component.
For instance, we can write:
<!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-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
<q-input
filled
v-model="name"
label="Your name *"
hint="Name"
lazy-rules
:rules="[ val => val && val.length > 0 || 'Please type something']"
>
</q-input>
<q-input
filled
type="number"
v-model="age"
label="Your age *"
lazy-rules
:rules="[
val => val !== null && val !== '' || 'Please type your age',
val => val > 0 && val < 130 || 'Please type a real age'
]"
>
</q-input>
<div>
<q-btn label="Submit" type="submit" color="primary"></q-btn>
<q-btn
label="Reset"
type="reset"
color="primary"
flat
class="q-ml-sm"
></q-btn>
</div>
</q-form>
</div>
</q-layout>
</div>
<script>
new Vue({
el: "#q-app",
data: {
name: "",
age: ""
},
methods: {
onSubmit() {
this.$q.notify({
color: "green-4",
textColor: "white",
icon: "cloud_done",
message: "Submitted"
});
},
onReset() {
this.name = null;
this.age = null;
}
}
});
</script>
</body>
</html>
We add the q-input components inside our q-form with the rules prop.
The rules are for validating the inputs.
When we click Submit, the rules will be checked.
They return true if the value is valid or an error message otherwise.
We also add a q-btn with type reset to let us reset the form values.
We listen to the submit and reset events with the methods used as handlers for each event.
Conclusion
We can add forms and file size and type validation into our Vue app with Quasar.
