title: YouTube API Browser-Based Upload with Ajax for Progress Bar
body: <p>I am trying to use the YouTube API to perform a browser-based upload, but also use Ajax for the purpose of showing a progress bar.</p>
  
  <p>I started off here:
  <a href="https://developers.google.com/youtube/2.0/developers_guide_protocol_browser_based_uploading" rel="nofollow">https://developers.google.com/youtube/2.0/developers_guide_protocol_browser_based_uploading</a></p>
  
  <p>It works 100% if I just use the basic HTML form post.</p>
  
  <pre><code>    &lt;form id="frmYouTube" enctype="multipart/form-data" method="post" action="https://uploads.gdata.youtube.com/action/FormDataUpload/YOUTUBE_URL_HERE?nexturl=https%3a%2f%2fdomain%2fpageafter%2fVideoUploadDone%3fid2%3dLOCAL_ID"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type="file" name="file" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;input type="hidden" name="token" value="YOUTUBE_TOKEN_HERE" /&gt;
                  &lt;input type="submit" value="Upload" /&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>However if I try to add some Javascript I run into a problem. I'm also including MooTools and the Request.File class from <a href="http://mootools.net/forge/p/form_upload" rel="nofollow">http://mootools.net/forge/p/form_upload</a>.</p>
  
  <p>Here is a simplified version of the code:
      </p>
  
  <pre><code>var yt = $('frmYouTube');
  
  var ytDone = function () {
  
       // Code to display: 'Video upload complete. Return to &lt;a href="/Acount"&gt;your account&lt;/a&gt;.';
  };
  
  var ytProgress = function (event, xhr) {
  
      var loaded = event.loaded, total = event.total;
  
      // Code to display: 'Uploading... ' + (parseInt(loaded / total * 100, 10)) + '%';
  };
  
  yt.addEvents({ 'submit': function (ev) {
  
      ev.stop();
  
      var rf = new Request.File({
          url: yt.get('action'),
          onProgress: ytProgress,
          onFailure: function (xhr) {
  
              ytError('Upload Failed (1).');
          },
          onCancel: function () {
              ytError('Upload Canceled.');
          },
          onException: function () {
              ytError('Upload Failed (2).');
          },
          onSuccess: ytDone
      });
  
      yt.getElements('input').each(function (field) {
  
          if (field.files) {
  
              rf.append(field.get('name'), field.files[0]);
          } else {
  
              rf.append(field.get('name'), field.get('value'));
          }
      });
  
      rf.send();
  }
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>At this point the file gets uploaded successfully, and YouTube returns a 302 redirect to my "nexturl," but because of cross-origin rules the redirect is not followed and I can not access the location header using Javascript.</p>
  
  <p>I've seen a few solutions that involved iframes, but that won't work if you want a progress bar. Has anyone come up with a work-around to do browser based uploads to YouTube and show a progress bar.</p>