How do I alter my Google Apps Script code to allow multiple files to be uploaded to Google Drive?

Question

I have developed a web form that connects to Google Drive and allows for files to be uploaded to a specific folder. The current code only uploads the first file selected, and I would like to be able to upload all of the files selected. My current code is posted below. Any suggestions?

index.html

<body>

  <h2 class="col-sm-offset-4 col-sm-8" style="padding-bottom: 50px;">Smart-HR Connect Data Gather</h2>

  <form class="form-horizontal" id="genericForm">


    <div class="form-group" id="show-me6" style="display: none;">
      <label class="col-sm-3 control-label">Please upload your Chart of Payroll Accounts &amp; your Last Journal Entry:</label>
      <div>
        <input name="chartAccJournalEntry" type="file" id="file" multiple>
      </div><br><br>

    </div>


    <input class="col-sm-offset-3" type="submit" onclick="this.value='Thank you ...'; google.script.run.withSuccessHandler(formSubmitted) .writeForm(this.parentNode); return false;">

  </form>



  <div id="output"></div>
  <!-- where the confirmation message goes -->
  
  <script>
    var file,
      reader = new FileReader();

    // Upload the file to Google Drive


    reader.onloadend = function(e) {
      google.script.run
        .withSuccessHandler(showMessage)
        .uploadFileToGoogleDrive(
          e.target.result, file.name,
          $('input#distinguishedName').val()
        );
    };

    function showMessage(e) {
      $('#progress').html(e);
    }

    function formSubmitted(status) {
      document.getElementById('genericForm').style.display = 'none'; //matches your form name or whatever you want to disappear post-submission
      document.getElementById('output').innerHTML = status; //displays in item with the 'output' id
      file = $('#file')[0].files[0];
      reader.readAsDataURL(file);
      showMessage("Uploading file..");


    }
  </script>
</body>

Code.gs

//basic function that builds the form using index.html as the template
function doGet(e) {
     return HtmlService
     .createTemplateFromFile('index')
     .evaluate()
     .setTitle("Smart-HR Connect Data Gather")
     .setSandboxMode(HtmlService.SandboxMode.NATIVE);
}
 
function uploadFileToGoogleDrive(data, file, name, email) {

  try {

    var submissions = "Data Gather File Uploads";
    var folder, folders = DriveApp.getFoldersByName(submissions);

    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(submissions);
    }

    var contentType = data.substring(5,data.indexOf(';')),
        bytes = Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)),
        blob = Utilities.newBlob(bytes, contentType, file);

    folder.createFolder([name, email].join(" ")).createFile(blob);

    return "OK";

  } catch (f) {
    return f.toString();
  }

}

score 0 · Answer 1 · answered Jun 13 '17 at 15:56

You may refer with this Multiple File Upload to Google Drive Using Google Script tutorial.

function doGet() {
  return HtmlService.createHtmlOutputFromFile('form')
    .setSandboxMode(HtmlService.SandboxMode.IFRAME);
}


function uploadFileToDrive(base64Data, fileName, dropbox) {
  try{
    var splitBase = base64Data.split(','),
        type = splitBase[0].split(';')[0].replace('data:','');

    var byteCharacters = Utilities.base64Decode(splitBase[1]);
    var ss = Utilities.newBlob(byteCharacters, type);
    ss.setName(fileName);

    //var dropbox = "WTELNSD2016"; // Folder Name
    var folder, folders = DriveApp.getFoldersByName(dropbox);

    if (folders.hasNext()) {
      folder = folders.next();
    } else {
      folder = DriveApp.createFolder(dropbox);
    }
    var file = folder.createFile(ss);
    return file.getName();
  }catch(e){
    return 'Error: ' + e.toString();
  }
}

As stated in this SO thread, the multiple attribute only works in IFRAME mode, but file inputs are broken in IFRAME mode.

Hope this helps.

How do I alter my Google Apps Script code to allow multiple files to be uploaded to Google Drive?

1 Answers1