How to get the content off an JS variable to an input

Im having some problems with getting my content from an JS variable to transport it to an span html,in this variables are the name of the file and the size of the file,also i want it to be in a html tag cause whit that i can send it to php and store it in a database,here is the code:

<?php

    if(isset($_POST['submit_enviar_dados'])){    
    $flag=false;
    $flag_referencia=false;
    $material=$_POST['material'];
    $layers=$_POST['layers'];
    $camadas=$_POST['camadas'];
    $quantidade=$_POST['quantidade'];
    $dimensao_x=$_POST['dimensao_x'];
    $dimensao_y=$_POST['dimensao_y'];
    $cor=$_POST['cor'];
    $superficie=$_POST['superficie'];
    $slikscreen=$_POST['slikscreen'];
    $nome_produto=$_POST['nome_produto'];
    $tamanho=$_POST['tamanho'];
    

    
    /* Existiu um erro */
    if($flag==true){
    
    }else{
     $inserir="INSERT INTO produto_pcb                  (material,layers,camadas,quantidade,dimensao_x,dimensao_y,cor,superficie,slikscreen,nome_produto,tamanho) VALUES ('".$material."','".$layers."','".$camadas."','".$quantidade."','".$dimensao_x."','".$dimensao_y."','".$cor."','".$superficie."','".$slikscreen."','".$nome_produto."','".$tamanho."')";
        
        $result=mysqli_query($ligax,$inserir);
    }
    if($result==1){

?>
<script>
alert("Dados inseridos com sucesso.");
</script>
<?php } else {
?>
<script>
alert("Dados não inseridos!");
</script>
<?php
}
    
}
?>
<div class="tabela">
<div class="wrapper">
  <form action="#" enctype="multipart/form-data" method="post" id="file_form"  >
    <input type="file" class="file-input" name="fileToUpload" id="fileToUpload" accept=".zip"hidden>
    <span class="material-symbols-rounded">upload</span>
    <p>Add gerber file</p>
  </form>


<div class="file-info" style="display: none;">
<div class="let"><form action="" method="POST">
  <p>Nome do ficheiro: <span name="nome_produto" class="file-name" id="nome_produto" disabled></span> (<span name="tamanho" class="file-size" id="tamanho" ></span> KB)</p>
  
  </div> 
</div>
                <p><input required type="submit" name="submit_enviar_dados" value="Registar"></p>

</form>

<script>
const form = document.querySelector("form");
const fileInput = form.querySelector(".file-input");
const progressBar = document.querySelector(".progressbar");
const counter = document.querySelector(".counter");
const fileInfo = document.querySelector(".file-info");
const fileNameElement = document.querySelector(".file-name");
const fileSizeElement = document.querySelector(".file-size");
const wrapper = document.querySelector(".wrapper");
var nome_produto = document.getElementById("nome_produto");
var tamanho = document.getElementById("tamanho");


// Function to handle file input change
const handleFileInputChange = (file) => {
  const fileName = file.name;
  const fileSize = Math.round(file.size / 1024); // Convert bytes to KB

  // Display file info
  fileNameElement.textContent = fileName;
  fileSizeElement.textContent = fileSize;
    
    nome_produto.textContent = fileName;
    tamanho.textContent = fileSize;
</script>

I tried already to pick with the php the name and size when the form is called but dind´t work.