api-upload-nodejs/sample.html at main · othiagofernando/api-upload-nodejs · 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!-- index.html -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Envio de Arquivos com Socket.io</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.min.js"></script>

    <style>
        #progress {
            margin-top: 5px;
            width: 100%;
            height: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            overflow: hidden;
            background-color: #fff;
        }

        #progress::-webkit-progress-bar {
            background-color: #eee;
        }

        #progress::-webkit-progress-value {
            background-color: #4CAF50;
        }

        #progress::-moz-progress-bar {
            background-color: #4CAF50;
        }
    </style>
</head>

<body>
    <form id="upload-form" enctype="multipart/form-data">
        <input type="file" name="file">
        <select name="platform_id" id="platform_id">
            <option value=""></option>
            <option value="5">MarketingPlace IM</option>
        </select>
        <button type="submit">Enviar</button>
    </form>

    <progress id="progress" value="0" max="100"></progress>
    <span id="message"></span>

    <script>
		const url_base = 'http://localhost:3333'
		const authToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6NiwibmFtZSI6IlRoaWFnbyBGZXJuYW5kbyBkYSBSb3NhIiwiZW1haWwiOiJ0aHlhZ29nb3RoQGdtYWlsLmNvbSIsImlhdCI6MTY4MzEzMDk0MCwiZXhwIjoxNjgzMjE3MzQwfQ.nnCaGV-1F24JrGKFckTcZvODYnjiojSlFOnSuk35n6k'

        const socket = io(url_base);

        const form = document.getElementById('upload-form')
        const progress = document.getElementById('progress')
        const message = document.getElementById('message')

        const platform_id = document.getElementById('platform_id')

        form.addEventListener('submit', (event) => {
            event.preventDefault();

			platform_id.value = 5

            const file = event.target.elements.file.files[0];
            const filename = file.name;
            const filesize = file.size;

            socket.emit('start', { filename, filesize });

            const formData = new FormData();
            formData.append('file', file);
            formData.append('platform_id', platform_id.value);

            const xhr = new XMLHttpRequest();
            xhr.open('POST', `${url_base}/files`);

            // Inclui o cabeçalho de autenticação
            xhr.setRequestHeader('Authorization', 'Bearer ' + authToken);

            xhr.upload.addEventListener('progress', (event) => {
                const percent = Math.round((event.loaded / event.total) * 100);
                progress.value = `${percent}`;
                message.innerHTML = `${percent}%`
            });

            xhr.addEventListener('load', () => {
                if (xhr.status === 201) {
					let response = JSON.parse(xhr.responseText);
        			message.innerHTML = xhr.responseText;
				} else {
					message.innerHTML = 'Erro ao enviar o arquivo';
				}
            });
            xhr.send(formData);
        });

        socket.on('upload-progress', (data) => {
			try {
				progress.value = `${data.progress}`;
				message.innerHTML = `${data.progress}% concluído`
			} catch (err) {
				console.error(err);
			}
		});

        socket.on('complete', (data) => {
            message.innerHTML = `Upload concluído`
        });

    </script>
</body>

</html>