Fonction innerHTML

const form = document.querySelector("form"),
fileInput = document.querySelector(".file-input"),
progressArea = document.querySelector(".progress-area"),
uploadedArea = document.querySelector(".uploaded-area");

form.addEventListener("click", () =>{
  fileInput.click();
});

fileInput.onchange = ({target})=>{
  let file = target.files[0]; 
  if(file){
    let fileName = file.name; 
    if(fileName.length >= 350){ 
      let splitName = fileName.split('.');
      fileName = splitName[0].substring(0, 351) + "... ." + splitName[1];
    }
    uploadFile(fileName); 
  }
}


function uploadFile(name){
  let xhr = new XMLHttpRequest(); 
  xhr.open("POST", "php/upload.php"); 
  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="row">
                          <i class="fas fa-file-alt"></i>
                          <div class="content">
                            <div class="details">
                              <span class="name">${name} • Uploading</span>
                              <span class="percent">${fileLoaded}%</span>
          </div>
                            <div class="progress-bar">
                              <div class="progress" style="width: ${fileLoaded}%"></div>
                            </div>
                          </div>
                        </li>`;
   
    uploadedArea.classList.add("onprogress");
    progressArea.innerHTML = progressHTML;
    if(loaded == total){
      progressArea.innerHTML = "";
   
      let uploadedHTML = `<li class="row">
                            <div class="content upload">
                              <i class="fas fa-file-alt"></i>
                              <div class="details">
                                <span class="name">${name} • Uploaded</span>
                                <span class="size">${fileSize}</span>
                              </div>
                            </div>
                            <i class="fas fa-check"></i>
<button onclick="document.getElementById('id${name}').style.display='block'" class="w3-button">Details</button>
<div id="id${name}" class="w3-modal">
  <div class="w3-modal-content">
    <div class="w3-container">
      <span onclick="document.getElementById('id${name}').style.display='none'"
      class="w3-button w3-display-topright">×</span>
      <p>${name}
   <br>${fileSize}
   
 </p>
      <p> ICI LE RESULTAT DE UPLOAD.PHP</p>
    </div>
  </div>
</div> </li>`;
    
      uploadedArea.classList.remove("onprogress");
      
      uploadedArea.insertAdjacentHTML("afterbegin", uploadedHTML); 
    }
  });
  let data = new FormData(form); 
  xhr.send(data);


}