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>