title: upload picture from mit app inventor to google drive
body: <p>I'm trying to send a picture to my Google Drive through MIT App Inventor.
  So far the website will take a picture without the submit button - it will upload as soon as selected.</p>
  
  <p>I saw PHP ways of doing this but I have no background in making websites and have no idea how to link the two together.</p>
  
  <p><a href="http://i.stack.imgur.com/iR9CX.png" rel="nofollow">This code makes a link to upload files to my google drive</a></p>
  
  <p><a href="http://i.stack.imgur.com/Q8OPG.png" rel="nofollow">These are my app's blocks and how it sends to the link</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function doGet(e) {
    return HtmlService.createHtmlOutputFromFile('form.html');
  }
  
  function uploadFiles(form) {
    try {
      var dropbox = "pics";
      var folder, folders = DriveApp.getFoldersByName(dropbox);
      if (folders.hasNext()) {
        folder = folders.next();
      } else {
        folder = DriveApp.createFolder(dropbox);
      }
      var blob = form.myFile;    
      var file = folder.createFile(blob);    
      return "File uploaded successfully " + file.getUrl();
    } catch (error) {
      return error.toString();
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="drive_upload.php" method="post" enctype="multipart/form-data"&gt;
      &lt;input type="file" name="myFile" onchange="
                      google.script.run.withSuccessHandler(fileUploaded)
                      .uploadFiles(this.parentNode);
                      return false;"&gt;           
  &lt;/form&gt;
  &lt;form id="myForm"&gt;
  
      &lt;input type="file" name="myFile" onchange="
                      google.script.run.withSuccessHandler(fileUploaded)
                      .uploadFiles(this.parentNode);
                      return false;"&gt;
  &lt;/form&gt;
  &lt;div id="output"&gt;&lt;/div&gt;
  &lt;script&gt;
      function fileUploaded(status) {
          document.getElementById('myForm').style.display = 'none';
          document.getElementById('output').innerHTML = status;
      }
  &lt;/script&gt;
  &lt;style&gt;
   input { display:block; margin: 20px; }
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>