announcement-test/app/views/admin/announcements/import.html.erb

<% content_for :page_specific_javascript do %>
  <script type="text/javascript" src="/assets/validator.js"></script>
<% end %>
<% if @thread %>
  <div id="threadModal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="threadModal" aria-hidden="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h3 id="threadModal"><%=t("e_paper.#{@thread.key}")%></h3>
        </div>
        <div class="modal-body">
          <div class="thread-status"><%= @thread.status[:status] %></div>
          <div class="thread-count-zone <%= 'hide' unless @thread.status[:current_count]%>">
            <span class="thread-current-count"><%= @thread.status[:current_count].to_i %></span>/<span class="thread-all-count"><%= @thread.status[:all_count].to_i %></span>
          </div>
          <span class="thread-finish_percent"><%= @thread.status[:finish_percent].to_i %></span> % finished
          <br>
          <span class="thread-info"><%= @thread.status[:info].to_s.html_safe %></span>
          <br>
          <span class="thread-file">
            <% if @thread.status[:filename] %>
              <a href="<%=admin_announcement_download_file_from_thread_path(:id=>@thread.id.to_s) %>" title="<%= @thread.status[:filename] %>"><%= @thread.status[:filename] %></a>
            <% end %>
          </span>
        </div>
        <div class="modal-footer">
          <button class="btn" id="modal-close-btn" style="width: 4em;" data-dismiss="modal" aria-hidden="true"><%=t('close')%></button>
        </div>
      </div>
    </div>
  </div>
<% end %>
<form action="<%= admin_announcement_importanns_path %>" method="post" class="form-horizontal main-forms" id="import-anns-xls"  enctype="multipart/form-data">
  <h3 style="padding-left: 30px;"><%= t("announcement.export_to_excel") %></h3>
  <div class="control-group">
    <div class="controls">
      <a href="<%= admin_announcement_export_excel_path %>"><%= t("announcement.export_all_anns") %></a>  
    </div>
  </div>
  <h3 style="padding-left: 30px;"><%= t("announcement.import_from_excel") %></h3>
  <%= hidden_field_tag :authenticity_token, form_authenticity_token %>
  <div class="input-area">
    <div class="control-group">
      <div class="controls">
        <a href="<%= admin_announcement_excel_format_path(:format => "xlsx") %>"><%= t("announcement.download_example_sheet_here") %></a>  
      </div>
    </div>
    <div class="control-group">
      <label for="import-anns" class="control-label muted"><%= t("upload") %></label>
      <div class="controls">
        <input type="file" id="import-anns" name="import_file" data-fv-validation="required;mustbexls;" data-fv-messages="Cannot be empty; Must be an excel file.;" />
      </div>
    </div>
  </div>
  <div class="form-actions">
    <input type="submit" value="<%= t("restful_actions.import") %>" class="btn btn-primary">
  </div>
</form>


<!-- import from wp xml -->
<form action="<%= admin_announcement_import_from_wp_path %>" method="post" class="form-horizontal main-forms" id="import-anns-wp-xml"  enctype="multipart/form-data">
  <h3 style="padding-left: 30px;"><%= t("announcement.import_from_wp_xml") %></h3>
  <%= hidden_field_tag :authenticity_token, form_authenticity_token %>
  <div class="input-area">
     <div class="control-group">
        <label for="import-anns-wp-xml" class="control-label muted"><%= t("upload") %></label>
        <div class="controls">
           <input type="file" id="import-anns-wp-xml" name="import_xml" data-fv-validation="required;mustbexml;" data-fv-messages="Cannot be empty; Must be an XML file.;" />
      </div>
    </div>
  </div>
  <div class="form-actions">
    <input type="submit" value="<%= t("restful_actions.import") %>" class="btn btn-primary">
  </div>
</form>
<!-- <form action="<%#= admin_announcement_import_from_xml_path %>" method="post" class="form-horizontal main-forms" id="import-anns-xml"  enctype="multipart/form-data">
  <h3 style="padding-left: 30px;">Import from XML</h3>
  <%#= hidden_field_tag :authenticity_token, form_authenticity_token %>
  <div class="input-area">
    <div class="control-group">
      <label for="import-anns" class="control-label muted">URL :</label>
      <div class="controls">
          <input type="text" id="import-anns" name="import_xml" data-fv-validation="required;url;" data-fv-messages="Cannot be empty; Must be an URL.;" />
        </div>
      </div>
  </div>
  <div class="form-actions">
    <input type="submit" value="Import" class="btn btn-primary">
  </div>
</form> -->
<script type="text/javascript">
  var form = new FormValidator($("#import-anns-xls"));
  form.validate_functions.mustbexls = function(val){
    var t = val.split("."),
      ext = t[t.length - 1];
    return (ext == "xls" || ext == "xlsx")
  }
  var form = new FormValidator($("#import-anns-wp-xml"));
    form.validate_functions.mustbexml = function(val){
      var t = val.split("."),
          ext = t[t.length - 1];
      return (ext == "xml")
    }
  $(document).ready(function(){
    function update_thread(){
      $.post("<%=admin_threads_get_status_path%>",{"id": "<%=params[:thread_id]%>"}).done(function(data){
        var finish_percent = data["finish_percent"];
        var current_count = data["current_count"];
        var all_count = data["all_count"];
        var is_finish = ((data["status"] == "finish" && data["filename"]) || data["status"] == "error");
        var info = data["info"]
        if(finish_percent){
          $("#threadModal .modal-body .thread-status").text(data["status"]);
          if(data["current_count"]){
            $("#threadModal .modal-body .thread-count-zone").removeClass('hide');
            $("#threadModal .modal-body .thread-current-count").text(current_count);
            $("#threadModal .modal-body .thread-all-count").text(all_count);
          }else{
            $("#threadModal .modal-body .thread-count-zone").addClass('hide');
          }
          $("#threadModal .modal-body .thread-finish_percent").text(finish_percent);
          if(info){
            $("#threadModal .modal-body .thread-info").text(info);
          }
        }
        if(!is_finish){
          window.time_out_id = window.setTimeout(update_thread, 1000);
        }else{
          var id = "<%=@thread.id if @thread%>";
          var filename = data["filename"];
          if(filename){
            $("#threadModal .modal-body .thread-file").html(`<a href="<%=admin_announcement_download_file_from_thread_path%>?id=${id}" title="${filename}">${filename}</a>`);
          }
          if(window.time_out_id)
            window.clearTimeout(window.time_out_id);
          // window.setTimeout(function(){
          //   $("#threadModal").modal("hide");
          //   alert(data["status"]);
          // }, 3000);
          return;
        }
      });
    }
    if($("#threadModal").length != 0){
      $("#threadModal").on('hidden.bs.modal',function(){
        window.clearTimeout(window.time_out_id);
        window.history.replaceState(null,$('title').text(),window.location.pathname);
      })
      $("#threadModal").on('shown.bs.modal',function(){
        window.time_out_id = window.setTimeout(update_thread, 1000);
      })
      $("#threadModal").modal("show");
      $(".show_progress").click(function(){
        $("#threadModal").modal("show");
      })
    }
  })
</script>