newosinadjango/osinaweb/static/js/uploader-bar.js

document.addEventListener("DOMContentLoaded", () => {
    const fileInput = document.querySelector("#uploader");
    const progressArea = document.querySelector(".progress-area");
    const uploadedArea = document.querySelector(".uploaded-area");
    
    const uploadTrigger = fileInput.closest('div').querySelector('p');
  
    // Add event listener to the upload trigger element
    uploadTrigger.addEventListener("click", () => {
      fileInput.click();
    });
  
    fileInput.onchange = ({ target }) => {
      let file = target.files[0];
      if (file) {
        let fileName = file.name;
        if (fileName.length >= 12) {
          let splitName = fileName.split('.');
          fileName = splitName[0].substring(0, 13) + "... ." + splitName[1];
        }
        // Clear previous progress and uploaded file information
        progressArea.innerHTML = "";
        uploadedArea.innerHTML = "";
        uploadFile(fileName, file);
      }
    };
  
    function uploadFile(name, file) {
      let xhr = new XMLHttpRequest();
      xhr.open("POST", "upload"); // Change URL to your upload endpoint
      xhr.upload.addEventListener("progress", ({ loaded, total }) => {
        let fileLoaded = Math.floor((loaded / total) * 100);
        let fileTotal = Math.floor(total / 1000);
        let fileSize;
        (fileTotal < 1024) ? fileSize = fileTotal + " KB" : fileSize = (loaded / (1024 * 1024)).toFixed(2) + " MB";
        let progressHTML = `<li class="flex items-center mb-4">
                              <i class="fas fa-file-alt text-blue-500 mr-2"></i>
                              <div class="flex-grow">
                                <div class="flex justify-between text-gray-500">
                                  <span>${name} • Uploading</span>
                                  <span>${fileLoaded}%</span>
                                </div>
                                <div class="bg-gray-300 h-2 rounded-lg mt-1">
                                  <div class="bg-secondosiblue h-2 rounded-lg" style="width: ${fileLoaded}%"></div>
                                </div>
                              </div>
                            </li>`;
        uploadedArea.classList.add("onprogress");
        progressArea.innerHTML = progressHTML;
        if (loaded === total) {
          progressArea.innerHTML = "";
          let uploadedHTML = `<div class="w-full px-3 py-3 bg-secondosiblue bg-opacity-70 rounded-md flex justify-between items-center gap-3 mt-3">
                                    <div class="flex justify-start items-center gap-2">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="text-white h-6 w-6" color="#000000" fill="none">
                                            <path d="M16 17L9 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M16 13L13 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                            <path d="M20.5 14C20.5 17.7712 20.5 19.6569 19.2552 20.8284C18.0104 22 16.0069 22 12 22H11.2273C7.96607 22 6.33546 22 5.20307 21.2022C4.87862 20.9736 4.59058 20.7025 4.3477 20.3971C3.5 19.3313 3.5 17.7966 3.5 14.7273V12.1818C3.5 9.21865 3.5 7.73706 3.96894 6.55375C4.72281 4.65142 6.31714 3.15088 8.33836 2.44135C9.59563 2 11.1698 2 14.3182 2C16.1173 2 17.0168 2 17.7352 2.2522C18.8902 2.65765 19.8012 3.5151 20.232 4.60214C20.5 5.27832 20.5 6.12494 20.5 7.81818V14Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round" />
                                            <path d="M3.5 12C3.5 10.1591 4.99238 8.66667 6.83333 8.66667C7.49912 8.66667 8.28404 8.78333 8.93137 8.60988C9.50652 8.45576 9.95576 8.00652 10.1099 7.43136C10.2833 6.78404 10.1667 5.99912 10.1667 5.33333C10.1667 3.49238 11.6591 2 13.5 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                        <p class="text-white">${name}</p>
                                    </div>

                                    <div class="flex justify-end items-center gap-2">
                                        <p class="text-white">${fileSize}</p>
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="text-white h-6 w-6" fill="none">
                                            <path d="M5 14.5C5 14.5 6.5 14.5 8.5 18C8.5 18 14.0588 8.83333 19 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                    </div>
                                 
                              </div>`;
          uploadedArea.classList.remove("onprogress");
          uploadedArea.innerHTML = uploadedHTML;
        }
      });
      let formData = new FormData();
      formData.append('file', file);
      xhr.send(formData);
    }
  });