Uploading Multiple Files From Local To Google Drive using Google Apps Script

submit.md

Uploading Multiple Files From Local To Google Drive using Google Apps Script

This is a sample script for uploading multiple files from local PC to Google Drive using Google Apps Script. The dialog, sidebar and Web Apps can be used as the GUI interface.

Sample 1

In this sample, the following flow is run.

1. Select files at browser.
2. Upload the files every file.
3. Save each file in Google Drive.

When you use this, please copy and paste the Google Apps Script and HTML to the script editor, and run the HTML using the dialog, sidebar and Web Apps.

Google Apps Script: Code.gs

function saveFile(obj) {
  var blob = Utilities.newBlob(Utilities.base64Decode(obj.data), obj.mimeType, obj.fileName);
  return DriveApp.createFile(blob).getId();
}

HTML: Index.html

<input name="file" id="files" type="file" multiple>
<input type='button' value='Upload' onclick='getFiles()'>

<script>
function getFiles() {
  const f = document.getElementById('files');
  [...f.files].forEach((file, i) => {
    const fr = new FileReader();
    fr.onload = (e) => {
      const data = e.target.result.split(",");
      const obj = {fileName: f.files[i].name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]};
      google.script.run.withSuccessHandler((id) => {
        console.log(id);
      }).saveFile(obj);
    }
    fr.readAsDataURL(file);
  });
}
</script>

Sample 2

In this sample, the following flow is run.

1. Select files at browser.
2. Upload the files as a one object.
3. Parse each file and zip files.
4. Save the zip file in Google Drive.

When you use this, please copy and paste the Google Apps Script and HTML to the script editor, and run the HTML using the dialog, sidebar and Web Apps.

Google Apps Script: Code:gs

function createZip(obj) {
    var blobs = obj.map(function(e) {
        return Utilities.newBlob(Utilities.base64Decode(e.data), e.mimeType, e.fileName);
    });
    var zip = Utilities.zip(blobs, "filename.zip");
    return DriveApp.createFile(zip).getId();
}

HTML: Index.html

<input name="file" id="files" type="file" multiple>
<input type='button' value='Upload' onclick='getFiles()'>

<script>
function getFiles() {
  const f = document.getElementById('files');
  const r = Promise.all([...f.files].map((file, i) => {
    const fr = new FileReader();
    return new Promise((r) => {
      fr.onload = (e) => {
        const data = e.target.result.split(",");
        return r({fileName: f.files[i].name, mimeType: data[0].match(/:(\w.+);/)[1], data: data[1]});
      }
      fr.readAsDataURL(file);
    });
  }))
  .then((obj) => {
    google.script.run.withSuccessHandler((id) => {
      console.log(id);
    }).createZip(obj);
  });
}
</script>

Limitations

There are some limitations for this situation. Please be careful those when you use these scripts.

1. Maximum size of the data which can be sent from HTML side to GAS side is 50 MB.
   • In this case, the size when the file is converted to base64 is the maximum size. Please be careful this.
2. Maximum size of blob for creating a file at Google Apps Script is 50 MB.

Namely, these indicates the following situations.

• When each file is uploaded and saved, the maximum size is 50 MB.
• When several files are uploaded and zipped as a zip file, the total size before the files are zipped is the maximum size which is 50 MB.

When I used these scripts in my environment, the following results were obtained.

1. Upload time were about 30 seconds and 90 seconds for 10 MB and 30 MB text file.
2. Time for uploading and zipping files (5 MB and 30 MB) was about 90 seconds.

Note:

• In the case of the method which sends the data using google.script.run, when the data size becomes large, the process speed becomes much slow. At that time, I recommend to use Drive API.
  • Upload Files to Google Drive using Javascript
• At October 11, 2019, I published a Javascript library to to run the resumable upload for Google Drive. When this is used, the large file can be uploaded. You can also use this js library.

Thanks Tanaike, the code worked perfect , but I was wondering how to make the files uploaded to inside a folder instead of just the root of the drive.

How about using getFolderById(id)?