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.
Uploader
We can add an upload widget into our Vue app with Quasar’s q-uploader 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-uploader
url="http://localhost/upload"
label="Upload files"
color="purple"
square
flat
bordered
style="max-width: 300px;"
>
</q-uploader>
</div>
<script>
new Vue({
el: "#q-app",
data: {}
});
</script>
</body>
</html>
We set the URL to upload to with the url prop.
label is displayed on the widget.
color changes the color of the top var.
bordered, square and flat change the appearance of the widget.
We can enable multiple uploads with the multiple prop.
And the batch prop lets us upload items in parallel.
Restrict File Type
We can restrict the file type allowed with the accept 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-uploader
url="http://localhost/upload"
label="Upload files"
color="purple"
square
flat
bordered
style="max-width: 300px;"
accept=".jpg, image/*"
@rejected="onRejected"
>
</q-uploader>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
methods: {
onRejected(files) {
console.log(files);
}
}
});
</script>
</body>
</html>
We set the accept prop to the MIME types.
And the rejected event listener has the rejected files in an array in the first parameter of the listener function.
We can restrict the file size of the files that are accepted with the filter 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-uploader
url="http://localhost/upload"
label="Upload files"
color="purple"
square
flat
bordered
style="max-width: 300px;"
:filter="checkFileSize"
@rejected="onRejected"
>
</q-uploader>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
methods: {
onRejected(files) {
console.log(files);
},
checkFileSize(files) {
return files.filter((file) => file.size < 1000);
}
}
});
</script>
</body>
</html>
We pass the checkFileSize method to chekc the file size.
The size property is in bytes.
Async Factory Function
We can add an async factory function to create the q-uploader :
<!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-uploader :factory="factoryFn" multiple> </q-uploader>
</div>
<script>
new Vue({
el: "#q-app",
data: {},
methods: {
factoryFn(files) {
return Promise.resolve({
url: "http://localhost/upload"
});
}
}
});
</script>
</body>
</html>
We return a promise in the factoryFn method and pass the fucntion to the factory prop.
This will apply the settings in the resolved object.
Conclusion
We can add a file uploader into our Vue app with Quasar’s q-uploader component.
