hps_learning/app/views/admin/online_courses/_file_uploader.html.erb

<% content_for :page_specific_css do %>
  <style>
    #presentationUploader .control-groups {
      margin : 15px 10px;
      text-align: center;
    }
    #presentationUploader .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="presentationUploader" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
  <div class="modal-header">
    <h3 id="myModalLabel"><%= t("hps_learning.upload_presentation") %></h3>
  </div>
  <div class="modal-body">
    <div class="control-groups">
      <div class="controls presentation-upload-input">
        <span class="btn btn-info fileinput-button">
          <i class="glyphicon glyphicon-plus"></i>
          <span>Select files</span>
          <input type="file" name="presentation_file" id="presentation-file" />
        </span>
      </div>
      <div class="controls notifcation-area">
        Please use Google Chrome or Firefox to upload files more than 300MB of size. Only Zip File allowed. Please make sure that <i>index.html</i> should be present in the root of zip file.
      </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="presentation-upload-btn">Upload</button>
    <button class="btn btn-danger hide" id="presentation-upload-abort-btn">Abort</button>
  </div>
</div>
<script type="text/javascript">
  var progressbar = $("#presentationUploader .progress div.bar"),
      presentation_temp_id = "",
      presentation_path = "",
      uploadBtn = $("#presentationUploader #presentation-upload-btn"),
      closeBtn = $("#presentationUploader button[data-dismiss=modal]"),
      abortUploadBtn = $("#presentationUploader #presentation-upload-abort-btn"),
      notificationArea = $("#presentationUploader .notifcation-area"),
      presentationUploadInput = $("#presentationUploader .presentation-upload-input"),
      presentationUploadInstance = null;

   $("#presentation-file").fileupload({
      autoUpload : false,
      url : "/admin/online_courses/upload_temp_file",
      maxChunkSize :  8 * 1024 * 1024,
      acceptFileTypes: /(\.|\/)(zip)$/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/online_courses/get_temp_dir_name",
            dataType : "json",
            type : "get",
            data : {"filename" : uploadData.files[0].name}
          }).done(function(data){
            presentation_temp_id = data.presentation_id;
            presentation_path = data.path;
            $("#presentation_temp_id").val(presentation_temp_id);
            presentationUploadInstance = uploadData.submit()
              .error(function (jqXHR, textStatus, errorThrown) {
                  presentationUploadInput.slideDown();
                  presentationUploadInput.find("input").val("");
                  closeBtn.removeClass("hide");
                  abortUploadBtn.addClass("hide");
                  uploadBtn.removeClass("hide");
                  $.ajax({
                    url : "/admin/online_courses/clear_temp_dir",
                    dataType : "json",
                    type : "post",
                    data : {presentation_id : presentation_path}
                  })
                  if (errorThrown === 'abort') {
                      notificationArea.addClass("error").text("File upload aborted.");
                  }else{
                      notificationArea.addClass("error").text("There was an error.");
                  }
                  $("#presentation_temp_id").val("");
              })
          })
        })
      }
    }).bind('fileuploadsubmit',function (e,data) {
      data.formData = {presentation_id : presentation_temp_id, path : presentation_path};
      closeBtn.addClass("hide");
      abortUploadBtn.removeClass("hide");
      uploadBtn.addClass("hide");
      presentationUploadInput.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. Extracting.");
      extract_zip(presentation_temp_id, presentation_path, data.files[0].name)
    })

    abortUploadBtn.on("click",function(){
      if(confirm("This will abort the current upload. Are you sure?")){
        presentationUploadInstance.abort();
      }
    })
  
    $("#presentationUploader").on("shown",function(){
      presentationUploadInput.find("input").val("");
    })

    var extract_zip = function(id, path, filename){
      $.ajax({
        url : "/admin/online_courses/extract_zip",
        dataType : "json",
        type : "post",
        data : {"presentation_id" : id, "path" : path}
      }).done(function(d){
        if(d.success){
          notificationArea.removeClass("error").text("Extraction successful. You may close this window.");
          $("#presentation_file_name").text(filename);
        }else{
          notificationArea.addClass("error").text(d.msg);
        }
      })
    }

    $("#presentation-file").on("change",function(){
      var file = $(this)[0].files[0].name.split(".");
      if(file[file.length - 1] == "zip"){
        return true;
      }else{
        uploadBtn.addClass("hide");
        notificationArea.addClass("error").text("Only zip file allowed.");
        return false;
      }
    })
  
</script>