vlog/app/views/admin/vlogs/_video_file_uploader.html.erb

<% content_for :page_specific_css do %>
  <style>
    #videoUploader .control-groups {
      margin : 15px 10px;
      text-align: center;
    }
    #videoUploader .controls.notifcation-area {
        font-size: 14px;
        margin-top: 15px;
    }
    .error {
      color : red;
    }

    .fileinput-button {
      position: relative;
      overflow: hidden;
      display: inline-block;
    }
    .fileinput-button input {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        opacity: 0;
        -ms-filter: 'alpha(opacity=0)';
        font-size: 200px;
        direction: ltr;
        cursor: pointer;
    }
  </style>
<% end %>
<div id="videoUploader" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
  <div class="modal-header">
    <h3 id="myModalLabel">Upload Video</h3>
  </div>
  <div class="modal-body">
    <div class="control-groups">
      <div class="controls video-upload-input">
        <span class="btn btn-info fileinput-button">
          <i class="glyphicon glyphicon-plus"></i>
          <span>Select files</span>
          <input type="file" name="video_file" id="video-file" />
        </span>
      </div>
      <div class="controls notifcation-area">
        Please use Google Chrome or Firefox to upload files more than 300MB of size.
      </div>
    </div>
  </div>
  <div class="progress" style="height:5px;margin-bottom:0px;">
    <div class="bar"></div>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary hide" id="video-upload-btn">Upload</button>
    <button class="btn btn-danger hide" id="video-upload-abort-btn">Abort</button>
  </div>
</div>
<script type="text/javascript">
  var progressbar = $("#videoUploader .progress div.bar"),
      server_dirname = "",
      uploadBtn = $("#videoUploader #video-upload-btn"),
      closeBtn = $("#videoUploader button[data-dismiss=modal]"),
      abortUploadBtn = $("#videoUploader #video-upload-abort-btn"),
      notificationArea = $("#videoUploader .notifcation-area"),
      videoUploadInput = $("#videoUploader .video-upload-input"),
      videoUploadInstance = null;

   $("#video-file").fileupload({
      autoUpload : false,
      url : "/admin/vlogs/upload_temp_file",
      maxChunkSize :  8 * 1024 * 1024,
      acceptFileTypes: /(\.|\/)(mov|mpe?g|mp4|flv)$/i,
      add : function(e, data){
        uploadBtn.removeClass("hide");
        notificationArea.removeClass("error").text(data.files[0].name);
        var uploadData = data;
        uploadBtn.one("click",function(){
          $.ajax({
            url : "/admin/vlogs/get_temp_dir_name",
            dataType : "json",
            type : "get"
          }).done(function(data){
            server_dirname = data.dirname;
            $("#video_file_temp_dir").val(server_dirname);
            $("#video_file_temp_name").val(uploadData.files[0].name);
            videoUploadInstance = uploadData.submit()
                                  .error(function (jqXHR, textStatus, errorThrown) {
                                      videoUploadInput.slideDown();
                                      videoUploadInput.find("input").val("");
                                      closeBtn.removeClass("hide");
                                      abortUploadBtn.addClass("hide");
                                      uploadBtn.removeClass("hide");
                                      $.ajax({
                                        url : "/admin/vlogs/clear_temp_dir",
                                        dataType : "json",
                                        type : "post",
                                        data : {dirname : server_dirname}
                                      })
                                      if (errorThrown === 'abort') {
                                          notificationArea.addClass("error").text("File upload aborted.");
                                      }else{
                                          notificationArea.addClass("error").text("There was an error.");
                                      }
                                  });
          })
        })
      }
    }).bind('fileuploadsubmit',function (e,data) {
      data.formData = {"dirname" : server_dirname};
      closeBtn.addClass("hide");
      abortUploadBtn.removeClass("hide");
      uploadBtn.addClass("hide");
      videoUploadInput.slideUp();
      notificationArea.removeClass("error").text("Uploading. Please Wait...");
    }).bind('fileuploadprogressall', function (e, data) {
       var progress = parseInt(data.loaded / data.total * 100, 10);
       progressbar.width(progress + "%");
       notificationArea.removeClass("error").text(progress + "% uploaded.");
    }).bind('fileuploaddone', function (e, data){
      closeBtn.removeClass("hide");
      abortUploadBtn.addClass("hide");
      notificationArea.removeClass("error").text("File uploaded successfully. You may close this window.");
      $("#video_file_name").text(data.files[0].name);
    })

    abortUploadBtn.on("click",function(){
      if(confirm("This will abort the current upload. Are you sure?")){
        videoUploadInstance.abort();
      }
    })
  
    $("#videoUploader").on("shown",function(){
      videoUploadInput.find("input").val("");
    })
  
</script>