Uploader

Aim of this article

In this article I'm about to demonstrate how to create and use generic file uploader component. You can use it not only with bare Vue-3 but also with Quasar, Vuetify or other Vue-3 toolkit. This article describes only browser-side concerns. You need to provide server side by you own.

The repository is also mirrored on GitHub.

Prerequisites

To use code covered by this wiki pages you need to have following skills:

• basic Vue-3 knowledge (especially SFC),
• very basic POST knowledge,
• rudimental knowlegde of jQuery ajax command.

General info

Described component is based on a simple state machine. It has no UI by itself so you need to provide some UI on your own. To accomplish this not only component instantation is needed but there is also need to fill its slots. The component has several config options from which actually only one needs to be provided (i.e. target upload URL). Other options control component behavior but they will be explained later. After providing target upload URL there is need to fill component slots by your own UI. Here I will describe generic browser UI only. If you are familiar with e.g. Quasar you can implement the UI on your own.

Basic component usage

---

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.