0

I am trying to use use a form and image uploader using google app scripts. I want to have the option to dynamically increase the number of images uploaded using a button, and then upload those to my drive. I am able to add more file inputs, but can't seem to get the files to upload if I have more than one image. I commented out the for loop, and am using only two images as an example. The if/else statement functions, but it does not upload the image. I am relatively new to programming and very new to google app scripts. Any help would be much appreciated. Thanks!

form.html:

    <form id="myForm">
      <p>Name</p>
      <input type="text" name="PosterName">
      <p>Email</p>
      <input type="text" name="email">
      <p>What are you selling/renting?</p>
      <table>
        <tr>
          <td><input type="radio" name="sell" value="apt" id="apt"></td>
          <td><label for="apt">Apartment</label></td>
        </tr>
        <tr>
          <td><input type="radio" name="sell" value="furn" id="furn"></td>
          <td><label for="furn">Furniture</label></td>
        </tr>
        <tr>
          <td><input type="radio" name="sell" value="books" id="books"></td>
          <td><label for="books">Books</label></td>
        </tr>
        <tr>
          <td><input type="radio" name="sell" value="other" id="other"></td>
          <td><label for="other">Other</label></td>
        </tr>
      </table>
      <p>Give a description</p>
      <textarea name="desc" rows="10" cols="50"></textarea>

      <table id="submittable">
        <tr>
          <td><input type="file" name="myFile1"></td>       
          <td><button onclick="addmore();" id="D">Add More</button></td>
        </tr>
      </table>
      <input type="submit" value="Upload File" 
              onclick="this.value='Uploading...';
                      google.script.run.withSuccessHandler(fileUploaded)
                      .uploadFiles(this.parentNode);
                      return false;">
      <input type="text" id="test" name="appt">;
    </form>

    <div id="output"></div>

    <script>
      function addmore() {
        var tname = document.getElementById('submittable');
        var row = tname.insertRow(-1);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var numrows = tname.rows.length;
        cell1.id = "A";
        cell2.id = "B";
        var place1 = document.getElementById("A");
        var place2 = document.getElementById("B");
        var fle = document.createElement("input");
        var add = document.createElement("button");
        add.setAttribute("onclick", "addmore()");
        var x = document.getElementById('test');
        x.setAttribute("value", numrows);
        fle.setAttribute("type", "file");
        fle.setAttribute("name", "myFile" + numrows);
        var y = fle.getAttribute("name");
        add.innerHTML = y;
        place1.appendChild(fle);
        place2.appendChild(add);
        cell1.id = "C";
        cell2.id = "D";
        var place3 = document.getElementById("D");
        place3.parentNode.removeChild(place3);
      }
    </script>

    <script>
        function fileUploaded(status) {
            document.getElementById('myForm').style.display = 'none';
            document.getElementById('output').innerHTML = status;
        }
    </script>

    <style>
     input { display:block; margin: 20px; }
    </style>

And

code.gs:

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

    function uploadFiles(form) {

      try {

        var dropbox = "shukimages";
        var folder, folders = DriveApp.getFoldersByName(dropbox);

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

        var spreadsheet = DriveApp.getFilesByName(dropbox);
        var ss = SpreadsheetApp.openById("1O4GM0DT5kqu5MNLcYFZe_vrI2KK1lmO9s5XviHWsMEg");
        var sheet = ss.getSheets()[0];
        sheet.appendRow([form.PosterName, form.email, form.sell, form.desc]);
        //return "Files uploaded successfully";
        var nums = form.appt;
        if (nums < 1) {
          var blob = form.myFile1;    
          var file = folder.createFile(blob);
          return "File uploaded successfully";
        } else {
          return "Files uploaded successfully";
          //for (i = 1; i <= nums; i++) {
          var blob = form.myFile2;    
          var file = folder.createFile(blob);              
        //}
        }

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

EDIT:

A little more clarification; if I only attempt to upload one image, it works and the image is uploaded, but it will not upload more than one image.

Where I got createFile: https://developers.google.com/apps-script/reference/drive/drive-app

goalie1998
  • 1,427
  • 1
  • 9
  • 16
  • Could you link back to where you got this? Is it one of these pages I find with "Deprecated" stamped on the top? Maybe take a look a [plupload](http://www.plupload.com/) - It's worked very well for me. – ficuscr May 15 '15 at 19:04
  • @ficuscr, I looked at plupload, am I able to upload the files to a google drive account? I could not find documentation on it. – goalie1998 May 16 '15 at 11:55
  • possible duplicate of [Handling multiple files from an input element in an array with Google Apps Script](http://stackoverflow.com/questions/28147486/handling-multiple-files-from-an-input-element-in-an-array-with-google-apps-scrip) – Zig Mandel May 16 '15 at 12:10
  • A trivial search on s.o. shows many duplicates to this. Did those not work? Google " apps script upload multiple files" – Zig Mandel May 16 '15 at 12:11
  • 1
    @ZigMandel, thank you very much. I tried the other methods on s.o. but couldn't get them to work. More searching (from your advice) led me to using jquery, which got the submission to work much better. Thanks! – goalie1998 May 16 '15 at 20:06

0 Answers0