How to upload several files at once to Google Drive using Google app script?

Question

I am trying to Upload several files at once to Google Drive using Google app script. I have created an upload.html page that contain -

    <input type="file" name="myFile" id="file-select" multiple/>

But I need to change more stuff in the JavaScript part either, and i got no idea what to change and i haven't find a documentation about the issue.

I need to deal with each file separately in the 'Code.gs' file.

For example:

In the .gs file I got

    var file = form.myFile; 

But unfortunately this refers to the first file I uploaded and not to all of them. How do i refer all of them?

The question is still relevant. Thanks in advance to anyone that can help!

Answer 1

I'm wondering if Caja is somehow not allowing the multiple file ability for the Input element. Caja is a sanitation program used on the HTML.

Google Caja Developers Page

If you look at this documentation:

Mozilla Documentation - File List

You should be able to access all the file name in the INPUT element, and iterate the contents. Loop through all the files in the INPUT element using client side code instead of Google .gs server side code.

// Get all the files out of the INPUT element
var fileInput = document.getElementById("file-select");
console.log('fileInput: ' + fileInput);

// files is a FileList object (similar to NodeList)
var files = fileInput.files;
console.log('files: ' + files);

But, I'm getting an error msg in the console log that files variable is undefined.

The HTML <input> tag, configured to be a file picker, puts the names of the files into an object. The information in the object needs to somehow get passed to the .gs file. Because the file picker can choose multiple files, the code needs to process multiple files. You could upload the files one after the other, looping through all of them one at a time, or somehow run asynchronous code. A .gs script can start uploading a second file before the first one is done. It's faster to be uploading multiple files at the same time rather than having the code wait to upload the next file before the current one is done.

You can run a .gs script directly from a submit button:

<input type="button" value="Submit"
  onclick="google.script.run.withSuccessHandler(gsFunctionName).processForm(this.parentNode)" />

Or run JavaScript in an HTML tag, which then runs the .gs server side code:

<form onsubmit="fncMyClientSideCode(this)" id="idUploadForm">
  <input>
  <button type="submit" id="btnUpload">Upload Now!</button>
</form>

<script>
  window.fncMyClientSideCode = function(objArgPassed) {
     //my statements here
     google.script.run.withFailureHandler(onUploadFail)
      .withSuccessHandler(onRegSccss)
     .fncUploadFiles(objArgPassed);
  }
</script>

I'm showing a couple different ways to use the HTML just for general information. You need to modify it for your use, test and debug it.

That's just the beginning. You need to know how to access the information in the object, write code to loop through each file, save it to a specific folder maybe. There are lots of questions dealing with saving files to Google Drive with Apps Script.