UZ ¶

TL;DR ¶

git clone https://github.com/js29a/uz.git or grab source:/uz/src/UploadZone.vue​ and source:/uz/src/UploadTest.vue​

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 ¶

The first thing you need to do is to import the component and create an instance of it. Place the following line in your code - be careful to specifiy correct relative component path:

import UploadZone from './UploadZone.vue';

Then at your template code instantiate it. You will have to specify correct target upload URL. Endpoint specified here should handle POST requests.

<component :is='UploadZone' target='http://...'>
</component>

As you see nothing will appear in browser. Why? You need to provide some UI. To remain generic the component has no UI by itself. This allows it to be extremely flexible. You need to use slots and provide some CSS styles. To remain concise this step is demonstrated in the repository (source:/uz/src/UploadTest.vue​). After creating the UI and navigating to proper URL you should see the uploader.

Component properties ¶

target ¶

Destination URL. It should handle POST requests.

max-jobs ¶

Maximum number of concurrent jobs.

auto-start ¶

Start automatically after adding files, i.e. without wait to add more files.

auto-reset ¶

Automatically back to idle state after uploading given files.

keep-going ¶

Do not abort on error(s) - upload all files that can be uploaded.

Slots ¶

Common slot properties ¶

• abort - ,
• current - ,
• error - ,
• errors - ,
• pick - ,
• progress - ,
• queue - ,
• reset - ,
• result - ,
• start - ,

idle ¶

Shown when nothing is to be done. Slot props:

• pick - callback function for picking files.

hover ¶

Displayed when files are ready to drop. Has no scope props.

wait ¶

Used when some files are waiting for upload. Props:

• start - begin processing callback function,
• reset - reset component to idle state,
• queue - vector of files awaiting to upload.

uploading ¶

Shown when uploading files. Slot props:

• progress - uploaded items,
• current - files that are now processed,
• queue - remaining files,
• errors - error list,
• abort - abort function callback.

done ¶

Displayed upon completion. Props:

• result - results vector,
• reset - reset to idle state callback function.

error ¶

aborted ¶

with-errors ¶

Instance methods ¶

start ¶

pick ¶

reset ¶

---

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