fix progress bar

index.html

@@ -32,6 +32,9 @@
  <div class="progress-bar"></div>
  </div>
 
+ </div>
+ <div class="sharing-container">
+
  </div>
  </section>
  <script src="index.js"></script>

index.js

@@ -4,8 +4,9 @@ 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")
+const progressContainer = document.querySelector(".progress-container");
+const progressBar = document.querySelector(".progress-bar");
+const status = document.querySelector(".status");
 
 browseBtn.addEventListener("click", () => {
  fileInput.click();
@@ -39,16 +40,14 @@ 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"
-
+ progressContainer.style.display = "block";
 
  // upload file
  const xhr = new XMLHttpRequest();
@@ -57,24 +56,31 @@ const uploadFile = () => {
  xhr.upload.onprogress = function (event) {
  let percent = Math.round((100 * event.loaded) / event.total);
  progressPercent.innerText = percent;
- const scaleX = `scaleX(${percent / 100})`
- bgProgress.style.transform = scaleX; 
- progressBar.style.transform = scaleX; 
+ const scaleX = `scaleX(${(percent / 100).toFixed(2)})`;
+ console.log((percent / 100).toFixed(2));
+ bgProgress.style.transform = scaleX;
+ progressBar.style.transform = scaleX;
  };
 
  // handle error
  xhr.upload.onerror = function () {
- console.log(`Error during the upload: ${xhr.status}.`);
+ alert(`Error during the upload: ${xhr.status}.`);
  };
 
  // listen for response which will give the link
  xhr.onreadystatechange = function () {
  if (xhr.readyState == XMLHttpRequest.DONE) {
- fileInput.value = '';
- console.log(xhr.responseText);
+ onFileUploadSuccess(xhr.responseText);
  }
  };
 
  xhr.open("POST", "http:https://localhost:3000/api/files");
  xhr.send(formData);
 };
+
+const onFileUploadSuccess = (res) => {
+ fileInput.value = ""; // reset the input
+ status.innerText = "Uploaded";
+ const { file } = JSON.parse(res);
+ console.log(file);
+};

style.css

@@ -114,7 +114,7 @@ body,
  width: 100%;
  height: 100%;
  z-index: 1;
- transition: transform 200ms linear;
+ transition: transform 250ms linear;
  transform: scaleX(0);
  transform-origin: left;
 }