Vue Upload Widget

1<template>
2  <button @click="uploadFile">Upload a file...</button>
3</template>
4
5<script lang="ts">
6  import { openUploadModal } from "@bytescale/upload-widget-vue";
7  import type { UploadWidgetConfig, UploadWidgetResult } from "@bytescale/upload-widget";
8  import type { PreventableEvent } from "@bytescale/upload-widget-vue";
9
10  // -----
11  // Configuration:
12  // https://www.bytescale.com/docs/upload-widget#configuration
13  // -----
14  const options: UploadWidgetConfig = {
15    apiKey: "free", // Get API key: https://www.bytescale.com/get-started
16    maxFileCount: 10
17  };
18
19  export default {
20    name: "App",
21    methods: {
22      uploadFile(event: PreventableEvent) {
23        openUploadModal({
24          event,
25          options,
26          onComplete: (files: UploadWidgetResult[]) => {
27            if (files.length === 0) {
28              alert("No files selected.");
29            } else {
30              alert(files.map(f => f.fileUrl).join("\n"));
31            }
32          }
33        })
34      }
35    }
36  };
37</script>

1<template>
2  <UploadDropzone :options="options"
3                  :on-complete="onFilesUploaded"
4                  :on-update="onFileListChanged"
5                  width="600px"
6                  height="375px" />
7</template>
8
9<script lang="ts">
10  import { UploadDropzone } from "@bytescale/upload-widget-vue";
11  import type { UploadWidgetConfig, UploadWidgetResult, UploadWidgetOnUpdateEvent } from "@bytescale/upload-widget";
12
13  // -----
14  // Configuration:
15  // https://www.bytescale.com/docs/upload-widget#configuration
16  // -----
17  const options: UploadWidgetConfig = {
18    apiKey: "free", // Get API key: https://www.bytescale.com/get-started
19    maxFileCount: 10,
20    showFinishButton: true
21  };
22
23  export default {
24    name: "App",
25    components: {
26      UploadDropzone
27    },
28    data() {
29      return {
30        options
31      };
32    },
33    methods: {
34      onFileListChanged({ uploadedFiles, pendingFiles, failedFiles }: UploadWidgetOnUpdateEvent) {
35        const uploadedFileUrls = uploadedFiles.map(x => x.fileUrl).join("\n");
36        console.log(uploadedFileUrls);
37      },
38      onFilesUploaded(files: UploadWidgetResult[]) {
39        if (files.length === 0) {
40          alert("No files selected.");
41        } else {
42          alert(files.map(f => f.fileUrl).join("\n"));
43        }
44      }
45    }
46  };
47</script>