append an array of blobs to a google doc using google script

Question

I have a script where users can submit pictures to a google doc, but when I upload multiple pictures with the file input, google script doesnt append all the images. How would i rewrite my code so it appends all the images i selected with the <input type="file" multiple />

Is theForm.theFile an array of all the pictures i uploaded? because theForm.theFile[0] does not work.

code.gs:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function serverFunc(theForm) {
   doc = DocumentApp.openById("my top-secret id...");

   var img=doc.appendParagraph(theForm.theFile.getName()+":\n").setIndentStart(4).appendInlineImage(theForm.theFile)

   //resize image to fit in page if necessary
   while(img.getWidth()>750){
     img.setWidth(img.getWidth()/1.1).setHeight(img.getHeight()/1.1)
   }
}

index.http:

   <form style="outline:2px solid blue;">
      <input type="file" name="theFile" multiple />
      <input type="button"  value="UpLoad" id="button" onclick="google.script.run.serverFunc(this.parentNode)" />
   </form>

Answer 1

Works with http://www.fyneworks.com/jquery/multiple-file-upload/# . You can then access each file through:

for (i = 0; i < theForm.theFile.length-1; i++) { 
  var blob = theForm.theFile[i];
  var file = folder.createFile(blob);
}

I would also recommend looking into this example but using the DocsList Service instead: https://developers.google.com/apps-script/guides/html/communication#forms

Hope this helps you get your head around it.