File upload

Simple AJAX file upload with Bootstrap styled progress bar

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<form>
  <span class="fileUpload btn btn-default">
        <span class="glyphicon glyphicon-upload"></span> 
  <input type="file" id="uploadFile" />
  </span>
</form>

<p id="fileUploadError" class="text-danger hide"></p>

<div class="list-group" id="files"></div>

<script id="fileUploadProgressTemplate" type="text/x-jquery-tmpl">
  <div class="list-group-item">
    <div class="progress progress-striped active">
      <div class="progress-bar progress-bar-info" style="width: 0%;"></div>
    </div>
  </div>
</script>

<script id="fileUploadItemTemplate" type="text/x-jquery-tmpl">
  <div class="list-group-item">
    <button type="button" class="close">&times;</button>
    <span class="glyphicon glyphicon-file"></span> File name (type, date, etc)
  </div>
</script>

JavaScript

$("#uploadFile").change(function() {
  var formData = new FormData();
  formData.append('name', "mytestfile.mp4");
  formData.append('source', this.files[0]);
  console.log(this.files[0]);
  var file = this.files[0];
  var sessionId = null;
  $("#files").append($("#fileUploadProgressTemplate").tmpl());
  $("#fileUploadError").addClass("hide");


  startTransfer(this.files[0]);

  function startTransfer() {
    var fileSize = file.size;
    console.log("starting upload size", fileSize);
    var url = 'https://graph-video.facebook.com/v2.8/act_1413754988677013/advideos?access_token=EAAT0ggdqG5wBALjGbRZAQASjICi5CdA7njpf7c00LhtWtckN4DgiYXmLqnG6PsJr546JFA3zM0K4NJHtk7GvygLMdBrkuUOWwpUZBMjjDdnydi8Wze4BZBrtty8nvFmHZAum8MeRPdLPFSy9eqpYweSO7blJQsD6zqZCqIzIoJAZDZD&upload_phase=start&file_size=' + fileSize;
    makeRequest(url, null).then(function(rdata) {
      console.log("data", rdata);


      var chunk = file.slice(rdata.start_offset, rdata.end_offset);
      var formData = new FormData();
      sessionId = rdata.upload_session_id;
      formData.append("video_file_chunk", chunk);
      transfer(formData, rdata.start_offset);

    });
  }

  function transfer(formData, startOffset) {

    var url = 'https://graph-video.facebook.com/v2.8/act_1413754988677013/advideos?access_token=EAAT0ggdqG5wBALjGbRZAQASjICi5CdA7njpf7c00LhtWtckN4DgiYXmLqnG6PsJr546JFA3zM0K4NJHtk7GvygLMdBrkuUOWwpUZBMjjDdnydi8Wze4BZBrtty8nvFmHZAum8MeRPdLPFSy9eqpYweSO7blJQsD6zqZCqIzIoJAZDZD';

    formData.append("upload_session_id", sessionId);
    formData.append("upload_phase", "transfer");
    formData.append("start_offset", startOffset);

    console.log("transfering upload", startOffset, formData);

    makeRequest(url, formData).then(trasnferThen);

  }

  function trasnferThen(tdata) {
    console.log("transfer completed", tdata);
    if (tdata.start_offset < tdata.end_offset) {
      var chunk = file.slice(tdata.start_offset, tdata.end_offset);
      var formData = new FormData();
     ...