Fylo data

Community feedback

• 

  solitary_coder•1,000

  @kabir-afkPosted about 1 year ago

  hey , nice project ,so I fixed your "%" query , it took me a while . . . took the help of gpt for taking the exact file size as input... but readjusted the updateDataAnimation() on my own... you can see the updated js down below . . .

  const fileField = document.querySelectorAll("input");
  const Bar = document.querySelector(".container-data__bar");
  const loaderBar = document.querySelector(".container-data__loader");
  const leftData = document.querySelector(".mb");
  const usedMBLabel = document.querySelector(".used-mb");
  
  const updateDataAnimation = (sizeInMB) => {
    let finalLeftData = parseInt(leftData.textContent) - sizeInMB;
  
    const animation = setInterval(() => {
      leftData.textContent--;
      usedMBLabel.textContent++;
  
      if (leftData.textContent == finalLeftData) {
        clearInterval(animation);
      }
    }, 10);
    let completedMBPercentage = (parseInt(usedMBLabel.textContent) / 1000) * 100;
    // console.log(Bar.offsetWidth);
    loaderBar.style.width =
      (completedMBPercentage / 100) * Bar.offsetWidth + "px";
  };
  
  fileField.forEach((field) => {
    field.addEventListener("change", () => {
      const selectedFile = field.files[0];
  
      // Get the size of the selected file in bytes
      const fileSizeInBytes = selectedFile.size;
  
      // Convert file size to kilobytes, megabytes, etc. if needed
      const fileSizeInKilobytes = fileSizeInBytes / 1024;
      const mb = fileSizeInKilobytes / 1024;
  
      updateDataAnimation(Math.floor(mb));
    });
  });
  

  Hope I was able to help, happy coding!!! 🥂🥂

  Marked as helpful

  0

  ---

  

  Nature Son•1,100

  @NatureSon22Posted about 1 year ago

  @kabir-afk, Thank you so much! I was having a hard time with that part. Interestingly, I had worked out a calculation similar to yours before, but I ended up deleting it. Your solution is truly helpful.

  0

  

  Nature Son•1,100

  @NatureSon22Posted about 1 year ago

  nice doggo too

  1

  

  solitary_coder•1,000

  @kabir-afkPosted about 1 year ago

  @NatureSon22 hehe . . . Thanks!!! 😅😅 btw your choice of using flex-direction:column was a nice pick , altho it gave me a hard time finding its width , which eventually helped me learn offsetWidth prop,ig it was the only way, feels good to learn something new , also the code will break when a file of size less than 1 MB is inputted, what else . . . . keep the grind !!!! 💪💪

  Marked as helpful

  0