Почему не работает event.preventDefault()

$(document).on('change', '#file_input', function() { 
 
  var form = document.getElementById('file_upload'); 
 
  form.submit(function(event) { 
 
    event.preventDefault(); 
    NProgress.start(); 
 
    $.ajax({ 
      type: $(this).attr('method'), 
      url: $(this).attr('action'), 
      data: new FormData(this), 
      statusCode: { 
        404: function() { 
          alert("Страница не найдена."); 
        } 
      }, 
      success: function(result) { 
 
        console.log(result.src); 
 
        if (result.notify) { 
          $('#notify').append('<div class="notify_block">' + result.notify + '</div>'); 
          setTimeout(function() { 
            hideNotify(); 
          }, 5000); 
        } 
        NProgress.done(); 
      }, 
      error: function(xhr, textStatus, thrownError) { 
        // console.log(xhr.responseText); 
        NProgress.done(); 
      } 
    }); 
  }); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div id="file_preview"></div> 
 
<div class="input_block"> 
  <form action="{{route('files.upload', $company->id)}}" method="POST" id="file_upload" enctype="multipart/form-data"> 
    @csrf 
    <input type="hidden" name="company_id" value="{{$company->id}}"> 
    <input type="file" name="file[]" multiple id="file_input"> 
  </form> 
</div>