ajax загрузка не появляется

Question

у меня есть функция ajax пост, который срабатывает после upload_btn щелчка по моему модальному

// the modal
    <div class="modal-footer">      
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" id="upload_btn" class="btn btn-primary btn-sm"><i class="fa fa-upload" data-toggle="tooltip" data-placement="top" title="Upload template"></i> Upload</button>
      </div>

$("#upload_btn").on('click', function(){
    var mydata = new FormData(document.getElementById("form_upload"));
    $.ajax({
      type : "POST",
      data: mydata,
      contentType: false,
      dataType : 'json',
      url : "<?php echo base_url();?>/C_MRCR_A/do_upload",
      cache: false,
      processData: false,
      beforeSend:function(){
        $("#loader").show();
      },
      success:function(response){        
        if(response.upload_success){
          $('#response-alert').html('<div class="alert alert-success" role="alert"> '+response.upload_success+' </div>');
        } else if(response.upload_success_partial){
          $('#response-alert').html('<div class="alert alert-warning" role="alert"> '+response.upload_success_partial+' </div>');
        } else if(response.upload_error){
          $('#response-alert').html('<div class="alert alert-danger" role="alert"> '+response.upload_error+' </div>');
        } else if(response.detail_error){
          $('#response-alert').html('<div class="alert alert-danger" role="alert"> '+response.detail_error+' </div>');
        } else {
          $('#response-alert').html('<div class="alert alert-danger" role="alert"> '+response.db_error+' </div>');
        }
        $("#form_result").removeAttr("style", true);
        $("#loader").hide();
      }
...

//i place this outside my modal
<!-- loader -->
<div id='loader' style='display: none;'>
  <img src='<?php echo base_url(); ?>assets/loading/ajax-loader.gif' width='32px' height='32px'>
</div>
<!-- loader -->

, предполагается, что загрузка появится после того, как я нажму upload_btn и исчезну после success:function. но это не так. что я сделал не так?