CODEWITHSUNDEEP
javascriptgoogle-apps-scriptgoogle-sheetsgoogle-drive-api
GPni
GPni

Reputation: 143

Upload Local Files from multiple upload element in Google Drive using Google Apps Script

I have a web application wherein the users should be able to upload and submit their documents. I search the Google and found a code tutorial from Tanaike but it was for multiple files in one upload element. Here's the link: https://tanaikech.github.io/2018/12/22/uploading-multiple-files-from-local-to-google-drive-using-google-apps-script/

Here is my html body code:

 <body>

  <div class= "container-md"> 
    
    <div class="form-inline">
    <div class="form-group mb-2"><label for="appLetter">Application Letter:</label></div>
    <div class="form-group mx-sm-3 mb-2"> <input name="file" type="file" class="form-control-file" id="appLetter" accept="application/pdf"> </div>
    </div>

    <div class="form-inline">
    <div class="form-group mb-2"><label for="appPDS">Personal Data Sheet:</label></div>
    <div class="form-group mx-sm-3 mb-2"> <input name="file" type="file" class="form-control-file" id="appPDS" accept="application/pdf"> </div>
    </div>
    
    <div class="form-inline">
    <div class="form-group mb-2"><label for="appTOR">Transcript of Records:</label></div>
    <div class="form-group mx-sm-3 mb-2"> <input name="file" type="file" class="form-control-file" id="appTOR" accept="application/pdf"> </div>
    </div>

    <div class="form-row"> <button id = "uploadbtn" type="submit" class="btn btn-primary">Submit</button> </div>
  </div>  <!-- CLOSE CONTAINER -->

</body>

Here is the javascript code:

    <script>

     document.getElementById("uploadbtn").addEventListener("click",getFiles);


   function getFiles(){
   const appLtr = document.getElementById("appLetter");
   const appPDS = document.getElementById("appPDS");
   const appTOR = document.getElementById("appTOR");
   
   const fileList = [
      ...appLtr.files, 
      ...appPDS.files, 
      ...appTOR.files
   ];
   
   console.log(fileList);
   const r = Promise.all(fileList.map(((file, i) => {
   const fr = new FileReader();
   return new Promise((r) => {
   fr.onload = (e) => {
   const data = e.target.result.split(",");
   return r({fileName: fileList.files[i].name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]});
   }
   fr.readAsDataURL(file);
   });
   })))
   .then((appObject) => {

   google.script.run.withSuccessHandler((id) => {
   console.log(id);
   }).creatZip(appObject);
   });
   }
   </script>

I modified the code from the tutorial. I tried to create an array which will contain the details of the documents. But I don't know how to modify it in such a way that it will process the files individually. What I'm aiming for is to upload the files from the web application to the google drive and zip the files in one folder. Meaning, I will have one zip file containing the files from multiple upload elements. Tanaike's tutorial was very very helpful but it was for a single upload element with single/multiple files but my problem is how to upload files from multiple upload elements to a zip file.

By the way here is his google app script code for zipping the files:

function creatZip(appObject){
var appName = "Applicant1"
var fileBlobs = appObject.map(function(e){
  return Utilities.newBlob(Utilities.base64Decode(e.data), e.mimeType, e.fileName)
});
var zip = Utilities.zip(fileBlobs, appName + " Files");
return DriveApp.createFile(zip).getId();

}

Thank you very much in advance for your help and inputs.

Upvotes: 1

Views: 553

Answers (1)

Tanaike
Tanaike

Reputation: 201553

I believe your goal as follows.

  • You want to upload the multiple files and zip the files as one zip file using Google Apps Script.

In your script, how about the following modification? I think that fileList.files[i].name is required to be modified to file.name. Ref

From:

return r({fileName: fileList.files[i].name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]});

To:

return r({fileName: file.name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]});

Note:

  • At Utilities.zip, when the files with the same filenames are used, an error occurs. Please be careful this.
  • And, in the current stage, the maximum size of Blob for creating a file of Google Apps Script is 50 MB. Please be careful this.

References:

Upvotes: 2

Related Questions