'Is it possible to rename files directly in html form using Javascript or Jquery?

I use google services to create forms and upload photos to google drive. File name rule decision so I want to automatically rename the file according to the rules available on the html form. Is that work even possible?

In the [Attachment filename] the selected file name will be displayed.
The [Attachment file name after rename] will display the file name after automatically renaming it.

※The file name rule I want to change is title_date

<!DOCTYPE html>
<html>
   <head>
    
      <base target="_top">
      <style>
        
         body{
         margin: 0 auto;
         margin-top:30px;
         }
         .container{
         font-family: 'PT Sans', sans-serif;
         box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
         margin-top: 10px;
         width:100%;
         }
         input[type=text], select, textarea,input[type=date] {
         width: 100%;
         padding: 12px;
         border: 1px solid #ccc;
         border-radius: 4px;
         resize: vertical;
         }
      
        
  
         .container {
         border-radius: 5px;
         background-color: #f2f2f2;
         padding: 20px;
         width: 800px;
         margin: 0 auto;
         }
        
      </style>
   
      
     
   </head>
   <body>
      <?var url = getUrl();?>
      <form method="post" action="<?= url ?>" >
         <div class="container" >
            <h1 style="color:#7c795d">TITLE</h1>
            
               <label for="part6"> Attachment</label><br>
               <script>
                  updateList = function() {
                  var input = document.getElementById('myFile');
                  var output = document.getElementById('fileList');
                  var children = "";
                  for (var i = 0; i < input.files.length; ++i) {
                    children += '<li>' + input.files.item(i).name + '</li>';
                  }
                  output.innerHTML = '<ul>'+children+'</ul>';
                  }
               </script>
               <input type="file" onchange="javascript:updateList()" name="filename" id="myFile" multiple>
               <input type="hidden" id="fileData" name="fileData" />
               <input type="hidden" id="mimeType" name="mimeType" />
               <input type="hidden" id="fileName" name="fileName" />
               <p>Attachment file name:</p>
               <div id="fileList"></div>
               <div id="output" ></div>
               <div id="progressbar" >
                  <div class="progress-label" ></div>
               </div>
               <input type="submit"  value="Send" onclick="iteratorFileUpload()"　 > 
            </div>
         </div>
      </form>

   </body>
</html>

javascript jquery

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Is it possible to rename files directly in html form using Javascript or Jquery?

Sources

Related Questions