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

by

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>

More Related Contents:

  1. How much faster are arrays than accessing Google Sheets cells within Google Scripts?
  2. What does “[Ljava.lang.Object;@” mean?
  3. Javascript Array – Split string at numbers [closed]
  4. JS join arrays with replacement
  5. How can I group an array of objects by key?
  6. How to sort an array of integers correctly
  7. How to create an array containing 1…N
  8. How to loop through an array containing objects and access their properties
  9. Long processing time likely due to getValue and cell inserts
  10. How to check if a string contains text from an array of substrings in JavaScript?
  11. Merging or Combining two onEdit trigger functions
  12. How to convert a string of numbers to an array of numbers?
  13. Convert array of strings into an array of objects
  14. Why do I need to copy an array to use a method on it?
  15. Convert simple array into two-dimensional array (matrix)
  16. Convert JSON string to array of JSON objects in Javascript
  17. Phone mask with jQuery and Masked Input Plugin
  18. Remove duplicate values from an array of objects in javascript [duplicate]
  19. Does Javascript slice method return a shallow copy?
  20. How to use lodash to find and return an object from Array?
  21. Javascript pushing objects into array changes entire array
  22. Why is math.max() returning NaN on an array of integers?
  23. How do you search an array for a substring match?
  24. What’s the difference between empty items in a JavaScript array and undefined? [duplicate]
  25. JavaScript Multidimensional Arrays [duplicate]
  26. Javascript – Loop through array backwards with forEach
  27. Determining whether one array contains the contents of another array in JavaScript/CoffeeScript
  28. JavaScript foreach loop on an associative array object
  29. Why can’t I check if an array is empty with array == []?
  30. javascript – find unique objects in array based on multiple properties

Leave a Comment