progress bar finished

index.html

@@ -23,9 +23,15 @@
  </form>
  <div class="progress-container">
  <div class="bg-progress"></div>
+
  <div class="inner-container">
- <h3>Uploading</h3>
+ <div class="status">Uploading...</div>
+ <div class="percent-container">
+ <span class="percentage" id="progressPercent">0</span>%
+ </div>
+ <div class="progress-bar"></div>
  </div>
+
  </div>
  </section>
  <script src="index.js"></script>

index.js

@@ -2,6 +2,11 @@ const dropZone = document.querySelector(".drop-zone");
 const fileInput = document.querySelector("#fileInput");
 const browseBtn = document.querySelector("#browseBtn");
 
+const bgProgress = document.querySelector(".bg-progress");
+const progressPercent = document.querySelector("#progressPercent");
+const progressContainer = document.querySelector(".progress-container")
+const progressBar = document.querySelector(".progress-bar")
+
 browseBtn.addEventListener("click", () => {
  fileInput.click();
 });
@@ -34,33 +39,38 @@ fileInput.addEventListener("change", () => {
 });
 
 const uploadFile = () => {
+
  console.log("file added uploading");
+
  files = fileInput.files;
  const formData = new FormData();
  formData.append("myfile", files[0]);
 
+ //show the uploader
+ progressContainer.style.display = "block"
+
+
  // upload file
  const xhr = new XMLHttpRequest();
 
  // listen for upload progress
  xhr.upload.onprogress = function (event) {
  let percent = Math.round((100 * event.loaded) / event.total);
- console.log(`File is ${percent} uploaded.`);
+ progressPercent.innerText = percent;
+ const scaleX = `scaleX(${percent / 100})`
+ bgProgress.style.transform = scaleX; 
+ progressBar.style.transform = scaleX; 
  };
 
  // handle error
  xhr.upload.onerror = function () {
  console.log(`Error during the upload: ${xhr.status}.`);
  };
 
- // upload completed successfully
- xhr.onload = function () {
- console.log("Upload completed successfully.");
- };
-
  // listen for response which will give the link
  xhr.onreadystatechange = function () {
  if (xhr.readyState == XMLHttpRequest.DONE) {
+ fileInput.value = '';
  console.log(xhr.responseText);
  }
  };

style.css

@@ -1,6 +1,10 @@
+:root {
+ --main-bg-color: #edf5fe;
+}
+
 body {
  font-family: system-ui;
- background: #edf5fe;
+ background: var(--main-bg-color);
  height: 98vh;
 }
 
@@ -28,8 +32,9 @@ body,
  transition: .2s all ease-in;
 }
 
+/* will be added when user drags */
 .drop-zone.dragged{
- background: #edf5fe;
+ background: var(--main-bg-color);
  border-color: #0288d1;
 }
 
@@ -78,3 +83,48 @@ body,
  color: #2196f3;
  cursor: pointer;
 }
+
+/* uploading progress styles */
+.progress-container{
+ border: 2px solid var(--main-bg-color);
+ width: 500px;
+ height: 70px;
+ border-radius: 10px;
+ margin-bottom: 25px;
+ position: relative;
+ display: none;
+}
+
+.progress-container .inner-container{
+ margin: 10px 15px;
+ z-index: 2;
+ position: absolute;
+ width: calc(100% - 30px);
+}
+
+.progress-container .percent-container{
+ font-size: 14px;
+ margin: 5px;
+ opacity: .7;
+}
+
+.progress-container .bg-progress{
+ position: absolute;
+ background: var(--main-bg-color);
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+ transition: transform 200ms linear;
+ transform: scaleX(0);
+ transform-origin: left;
+}
+
+.progress-container .progress-bar{
+ width: 100%;
+ height: 3px;
+ border-radius: 2px;
+ background: #03a9f4;
+ transition: transform 200ms linear;
+ transform: scaleX(0);
+ transform-origin: left;
+}