node-axios-s3-example/index.html at master · jayralbano/node-axios-s3-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en" data-theme="dim">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <div id="app">
        <section class="flex items-center justify-center h-screen">
            <div class="flex flex-col space-y-4">
                <p>Upload AWS Demo</p>
                <input type="file" class="file-input w-full max-w-xs" @change="fileChange" />
                <div v-if="progress !== 0" class="flex justify-center">
                    <!-- <span class="loading loading-spinner text-primary"></span> -->
                    <div class="radial-progress bg-primary text-primary-content border-4 border-primary"
                        :style="{
                            '--value': progress
                        }"
                        role="progressbar">{{ progress }}%</div>
                </div>
                <button class="btn btn-primary" @click="upload" :disabled="uploading">Upload</button>
                <div class="toast toast-top toast-center" v-if="success ?? error">
                    <div class="alert" :class="{
                        'alert-warning': error,
                        'alert-success': success
                    }">
                        <span>{{ success ?? error }}</span>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        const { createApp, ref } = Vue

        const api = axios.create({
            baseURL: 'http://localhost:3000',
        })

        createApp({
            setup() {
                const uploading = ref(false)
                const formData = ref(null)
                const error = ref(null)
                const success = ref(null)
                const progress = ref(0)

                function fileChange(event) {
                    const file = event.target.files[0]
                    const data = new FormData()
                    data.append('upload', file)
                    formData.value = data
                }

                async function upload() {
                    try {
                        success.value = null
                        error.value = null
                        uploading.value = true
                        progress.value = 0

                        const response = await api.post('/upload', formData.value, {
                            headers: {
                                'Content-Type': 'multipart/form-data',
                            },
                            onUploadProgress: (progressEvent) => {
                                progress.value = Math.round((progressEvent.loaded / progressEvent.total) * 100)
                            },
                        })
                        success.value = response.data.message
                    } catch (err) {
                        error.value = err?.response?.data?.message || err.message
                    } finally {
                        uploading.value = false
                        formData.value = null
                    }
                }

                return {
                    upload,
                    uploading,
                    fileChange,
                    error,
                    success,
                    progress,
                }
            }
        }).mount('#app')
    </script>
</body>

</html>