CODEWITHSUNDEEP
javascripthtmlfetch-apibunnycdn
Wraith
Wraith

Reputation: 82

Upload Progress with Fetch in Vanilla JS

I made a very simple video uploader for BunnyCDN. I want to show the video loading with but I couldn't find how to add it even though I searched. Most people have done it in axios and similar ways, but when I do it this way, the video cannot be loaded for some reason. So I have to do it without going outside of the Fetch API.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" id="fileHandler">
    <p id="fileName"></p>
    <progress id="progressBar" max="100" value="0"></progress>
</body>
    <script>
        const libraryId = 'LIBRARY_ID';
        const AccessKey = 'API_KEY';
        const fileHandler = document.getElementById('fileHandler');
        const fileName = document.getElementById('fileName');
        fileHandler.addEventListener('change', function(e) {
            const file = e.target.files[0];
            fileName.innerHTML = file.name;
            const options = {
                method: 'POST',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/*+json',
                    AccessKey
                },
                body: JSON.stringify({
                    title: file.name,
                })
            };

            fetch('https://video.bunnycdn.com/library/'+libraryId+'/videos', options).then(r => r.json())
            .then(res => {
                console.log(res);
                const guid = res.guid;
                const options = {
                    method: 'PUT',
                    headers: {'Content-Type': 'application/octet-stream',AccessKey},
                    body: file
                };
                const req = fetch('https://video.bunnycdn.com/library/'+libraryId+'/videos/'+guid, options);
                req.then(r => r.json()).then(r => {
                    if (r.statusCode == 200) {
                        document.querySelector('#progressBar').value = 100;
                    } else {
                        console.log('upload failed');
                    }
                });

            }).catch(err => console.error(err));
        });
       
    </script>
</html>

Upvotes: 0

Views: 35

Answers (0)

Related Questions