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
– rpm, Commented Jan 26, 2015 at 22:50

Spencer Easton · Accepted Answer · 2015-01-28 03:10:32Z

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?
Check the code above on how to pass the folderID from a select to the savefolder function
Wow, got my code running! You really helped me out. Thank you!
not working for me. I keep pressing submit but nothing happens. I copied the code exactly. Is it a browser issue? Using Chrome
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?

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Linked

Related