title: Google Script Video Upload Fails
body: <p>I am very new to Google Scripts - like I just started learning how to use it yesterday. I have put together a google drive dropzone based on code from <a href="https://stackoverflow.com/a/34777747/3052484">this answer</a>. I have my script working, and it uploads photos to the correct folder. The problem is, I am not able to upload files larger than 10mb, and I need to be able to upload video. I did a little research, and I found other questions addressing the same issue, but none of them had a solution to the problem. </p>
  
  <p><em>Sorry for the messy code since this is another projet I modified.</em></p>
  
  <p>Here is <code>form.html</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/flatly/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Catamaran:900" rel="stylesheet"&gt;
  
    &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="flex-center-wrap"&gt;
      &lt;div class="flex-center"&gt;
        &lt;div class="panel panel-default"&gt;
          &lt;div class="panel-heading"&gt;
            &lt;h2&gt;Media Dropzone&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div class="panel-body"&gt;
            &lt;form class="dropzone" id="myForm" action="#"&gt;
              &lt;div class="fallback"&gt;
                &lt;input name="file" type="file" multiple/&gt;
              &lt;/div&gt;
            &lt;/form&gt;
            &lt;div id="status" class="hidden"&gt;
              &lt;br&gt;
              &lt;p id="status-message"&gt;&lt;/p&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;    
    &lt;/div&gt;
  
    &lt;script&gt;
      $(document).ready(function(){
        var numUploads = {};
        numUploads.done = 0;
        numUploads.total = 0;
  
        var myDropzone = new Dropzone("#myForm", { url: "#"});
        myDropzone.on("addedfile", function() {
          iteratorFileUpload();
        });
  
        // Upload the files into a folder in drive
        // This is set to send them all to one folder (specificed in the .gs file)
        function iteratorFileUpload() {
          myDropzone.disable();
          var allFiles = document.getElementsByTagName("input")[0].files;
          if (allFiles.length == 0) {
            alert('No file selected!');
          } else {
            numUploads.total = allFiles.length;
            $("#status").removeClass("hidden");
            $("#status-message").text("Uploading file " + numUploads.done + " of " + numUploads.total + "...");
            for (var i = 0; i &lt; allFiles.length; i++) {
              sendFileToDrive(allFiles[i]);
            }
          }
        }
  
        function sendFileToDrive(file) {
          var reader = new FileReader();
          reader.onload = function (e) {
            var content = reader.result;
            console.log('Sending ' + file.name);
            var currFolder = 'Something';
            google.script.run.withSuccessHandler(function(){
              numUploads.done = numUploads.done + 1;
              if(numUploads.done !== numUploads.total){
                $("#status-message").text("Uploading file " + numUploads.done + " of " + numUploads.total + "...");
              } else{
                $("#status-message").text("Uploading finished!");
              }
              
            }).withFailureHandler(function(e){
              alert(e.message);
            }).uploadFileToDrive(content, file.name, currFolder);
          }
          reader.readAsDataURL(file);
        }
      });
    &lt;/script&gt;
  
    &lt;style&gt;
      body, html{
        margin: 0;
        padding: 0;
      }
  
      html{
        height: 100%;
      }
  
      body{
        min-height: 100%;
        overflow-x: hidden;
        background-color: #3498db;
      }
  
      .flex-center-wrap{
        height: 100vh;
        width: 100vw;
        padding: 0;
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        display: -webkit-flex;
        display: -moz-flex;
        display: -o-flex;
        display: -ms-flex;
        display: flex;
        align-items: center;
        justify-content: center;
      }
  
      .flex-center{
        position: relative;
        max-height: 80vh;
        width: 500px;
        max-width: 90vw;
      }
      
      .dropzone{
        height: 300px;
        border: 3px dashed  #3498db;
      }
      
      .dropzone .dz-message{
        margin: 117px 0 !important;
      }
  
      .dz-progress,
      .dz-error-message,
      .dz-success-mark,
      .dz-error-mark{
        display: none !important;
      }
      
      h1,h2,h3,h4,h5,h6{
        text-align: center;
        font-family: 'Catamaran', sans-serif;
        margin: 10px 0;
      }
      
      p{
        text-align: center;
      }
    &lt;/style&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is <code>server.gs</code>:</p>
  
  <pre><code>function doGet() {
    return HtmlService.createHtmlOutputFromFile('form')
      .setSandboxMode(HtmlService.SandboxMode.IFRAME);
  }
  
  function uploadFileToDrive(base64Data, fileName) {
    try{
      var splitBase = base64Data.split(','),
          type = splitBase[0].split(';')[0].replace('data:','');
  
      var byteCharacters = Utilities.base64Decode(splitBase[1]);
      var ss = Utilities.newBlob(byteCharacters, type);
      ss.setName(fileName);
  
      var folder;
  
      try{
        folder = DriveApp.getFolderById(""); //removed this for security
      } catch(e){
        folder = DriveApp.createFolder("social-media-dropzone");
      }
  
      var file = folder.createFile(ss);
      return file.getName();
    } catch(e){
      return 'Error: ' + e.toString();
    }
  }
  </code></pre>
  
  <p>Is there any way to increase the limit, or should I scrap this method and try something other than Google scripts?</p>
  
  <p>And here is <code>server.gs</code> using the Advanced Drive API:</p>
  
  <pre><code>function doGet() {
    var output = HtmlService.createHtmlOutputFromFile('form').setSandboxMode(HtmlService.SandboxMode.IFRAME);
    output.addMetaTag('viewport', 'width=device-width, initial-scale=1');
    return output;
  }
  
  function uploadFileToDrive(base64Data, fileName) {
      var splitBase = base64Data.split(','),
          type = splitBase[0].split(';')[0].replace('data:','');
  
      var byteCharacters = Utilities.base64Decode(splitBase[1]);
      var ss = Utilities.newBlob(byteCharacters, type);
      ss.setName(fileName);
  
      //var file = folder.createFile(ss);
      var folderId = ""; //removed for security
      var file = {
        title: fileName,
        mimeType: ss.type,
        parents: [{id: folderId }]
      };
      Drive.Files.insert(file, ss);
  
      return null;
  }
  </code></pre>
  
  <p>Even with the advanced API, uploads fail when they get too big. I tested it with an 8mb video and a 15mb video, and the latter failed.</p>