JSFiddle - React, Tailwind, and code Playground

by netnguyen270

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div class="vb-content">
    <h1>File upload progress</h1>
    <input type="file" id="file-uploader">
    <div id="feedback"></div>
    <label id="progress-label" for="progress"></label>
    <progress id="progress" value="0" max="100"> </progress>
  </div>
</body>
</html>

CSS

html {
  min-height: 100vh;
}

body {
  background: #000000;
  color: #FFFFFF;
}

.vb-content {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-family: 'Roboto Mono', monospace;
}

#feedback {
  padding: 10px;
}

JavaScript

const fileUploader = document.getElementById('file-uploader');
const feedback = document.getElementById('feedback');
const progress = document.getElementById('progress');

const reader = new FileReader();

fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  const file = files[0];
  reader.readAsDataURL(file);
  
  reader.addEventListener('progress', (event) => {
    if (event.loaded && event.total) {
      const percent = (event.loaded / event.total) * 100;
      progress.value = percent;
      document.getElementById('progress-label').innerHTML = Math.round(percent) + '%';
      
      if (percent === 100) {
        let msg = `<span style="color:green;">File <u><b>${file.name}</b></u> has been uploaded successfully.</span>`;
        feedback.innerHTML = msg;
      }
    }
  });
});