Handling multiple files from an input element in an array with Google Apps Script

Question

I have a form, which allows to select an item from a dropdown list and upload a file. The name and the ID of the item are saved in a Spreadsheet document. Works with one file...but I want to upload multiple files. Could you help me fixing the script?

The HTML part looks like this

<div class="col-md-4 col-sm-6 ">
           <div class="caption">
             <h3>Bildauswahl</h3>
             <p align="center"><input type="file" name="myFiles[]" id="myFiles" multiple></p>
         </div>
         </div>

My script, which is not working, is the following:

var dropBoxId = "XYZ"; 
var logSheetId = "ABC";

function doGet(e) {
  return HtmlService.createHtmlOutputFromFile('InputForm.html');
}

function uploadFiles(formObject) {
  try {
    // Create a file in Drive from the one provided in the form
    var folder = DriveApp.getFolderById(dropBoxId);
    var input = document.getElementById('myFiles');

    for (i = 0; i<input.files.length; i++) {
      var blob = input.files[i];
      var file = folder.createFile(blob);
      var ss = SpreadsheetApp.openById(logSheetId);
      var sheet = ss.getSheets()[0];
      sheet.appendRow([file.getName(), file.getUrl(), formObject.myName]);
    }


    // Return the new file Drive URL so it can be put in the web app output
    return file.getUrl();
  } catch (error) {
    return error.toString();
  }
}

Thanks.

Frist, There is no `document.getElementbyId()` in Google Apps Script, it is for javascript. You have to pass those files into `formObject` variable to your `uploadFiles()` function. — rpm, Jan 26 '15 at 22:50

Spencer Easton · Accepted Answer · 2015-01-28T03:10:32.427

As of right now you have to use a work around to work with multiple files. The multiple attribute only works in IFRAME mode, but file inputs are broken in IFRAME mode.

To see this workaround take a look at the bug submission for this issue: https://code.google.com/p/google-apps-script-issues/issues/detail?id=4610

Also in your code you have some mixing of server side and client side code that will not work:

var folder = DriveApp.getFolderById(dropBoxId); //server side
var input = document.getElementById('myFiles'); //client side

You will need to do your multiple file processing on the client side

I came up with a nice solution for multi-file uploading. Limitations are files must be under 10 MB.

CODE.GS

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

}

function saveFile(data,name,folderId) {

var contentType = data.substring(5,data.indexOf(';'));
var file = Utilities.newBlob(Utilities.base64Decode(data.substr(data.indexOf('base64,')+7)), contentType, name);
  DriveApp.getFolderById(folderId).createFile(file);

}

index.html

<div>
 <input type="file"  id="myFiles" name="myFiles" multiple/>
 <input type="button" value="Submit" onclick="SaveFiles()" />
</div>

<script>

  var reader = new FileReader();
  var files;
  var fileCounter = 0;
  var folderId = "";




  reader.onloadend = function () {
   google.script.run
    .withSuccessHandler(function(){
      fileCounter++;      
      postNextFile();
    }).saveFile(reader.result,files[fileCounter].name,folderId);

  }



function SaveFiles(){
  var folderSelect = document.getElementById("folderSelectId");
  folderId = folderSelect.options[e.selectedIndex].value;
  files = document.getElementById("myFiles").files;  
  postNextFile();
 }


function postNextFile(){if(fileCounter < files.length){reader.readAsDataURL(files[fileCounter]);}else{fileCounter=0;alert("upload done")}}

</script>

Thanks Spencer, that helped a lot. My aim is to save the files to a folder, which gets its name from the dropdown item value. Can you tell me how to reference to the dropdown menu when creating a folder instead of saving the files to the root directory? — deesch, Jan 27 '15 at 17:20
Check the code above on how to pass the folderID from a select to the savefolder function — Spencer Easton, Jan 28 '15 at 02:41
Wow, got my code running! You really helped me out. Thank you! — deesch, Jan 28 '15 at 10:17
not working for me. I keep pressing submit but nothing happens. I copied the code exactly. Is it a browser issue? Using Chrome — John Olsen, Sep 09 '15 at 22:32
The OP asked for code to upload to a specific folder. On the client side there is a var of folderId. Did you set that? — Spencer Easton, Sep 10 '15 at 23:37

Handling multiple files from an input element in an array with Google Apps Script

1 Answers1

Linked