Vue Upload Widget

npm install @upload-io/vue-uploader

yarn add @upload-io/vue-uploader

<script src="https://js.upload.io/vue-uploader/v3"></script>

1<template>
2  <button @click="uploadFile">Upload a file...</button>
3</template>
4
5<script lang="ts">
6  // Installed by "@upload-io/vue-uploader".
7  import { Uploader } from "uploader";
8  import { openUploadModal } from "@upload-io/vue-uploader";
9  import type { UploadWidgetOptions, UploadWidgetResult } from "uploader";
10  import type { PreventableEvent } from "@upload-io/vue-uploader";
11
12  // Initialize once (at the start of your app).
13  const uploader = Uploader({ apiKey: "free" }); // Replace "free" with your API key.
14
15  export default {
16    name: "App",
17    methods: {
18      uploadFile(event: PreventableEvent) {
19        openUploadModal({
20          event,
21          uploader,
22          options: {
23            multi: true
24          },
25          onComplete: (files: UploadWidgetResult[]) => {
26            if (files.length === 0) {
27              alert("No files selected.");
28            } else {
29              alert(files.map(f => f.fileUrl).join("\n"));
30            }
31          }
32        })
33      }
34    }
35  };
36</script>

1<template>
2  <UploadDropzone :uploader="uploader"
3                  :options="options"
4                  :on-update="onFileUploaded"
5                  width="600px"
6                  height="375px" />
7</template>
8
9<script lang="ts">
10  // Installed by "@upload-io/vue-uploader".
11  import { Uploader } from "uploader";
12  import { UploadDropzone } from "@upload-io/vue-uploader";
13  import type { UploadWidgetOptions, UploadWidgetResult } from "uploader";
14
15  // Initialize once (at the start of your app).
16  const uploader = Uploader({ apiKey: "free" }); // Replace "free" with your API key.
17
18  export default {
19    name: "App",
20    components: {
21      UploadDropzone
22    },
23    data() {
24      return {
25        uploader,
26        options: {
27          multi: true
28        },
29      };
30    },
31    methods: {
32      onFileUploaded(files: UploadWidgetResult[]) {
33        if (files.length === 0) {
34          alert("No files selected.");
35        } else {
36          alert(files.map(f => f.fileUrl).join("\n"));
37        }
38      }
39    }
40  };
41</script>