I'm a beginner, so please don't throw stones))).

I don't understand why the data from "file" is not being sent to the PHP handler. I print out any value from the handler and the response comes back to JS, but when I try to print "file" an empty response comes up.

I do all this to make sure that the file flies to the handler, in order to then write this file to the server in a folder

//$(function() {
//alert('Form_mail.js is connected');
//});
$("#sendMail").on("click", function() {
  let name= $("#name").val().trim();
  let email= $("#email").val().trim();
  let tel= $("#tel").val().trim();
  let number_order= $("#number_order").val().trim();
  let message= $("#message").val().trim();
  let file= $("#file").val();
  $.ajax({
    url: 'assets/ajax/mail.php',
    type: 'POST',
    cache: false
    data: {
      'name': name,
      'email': email,
      'tel': tel,
      'number_order': number_order,
      'message': message
      'file': file
    },
    dataType: 'html'
    beforeSend: function() {
      $("#sendMail").prop("disable", true);
    },
    success: function(data) {
      $("#form_contact").trigger("reset");
      alert(data);
      //if(data) {
      //$("#form_contact").trigger("reset");
      //$("#sendMail").prop("disable", false);
      //alert("Message sent");
      //}else{
      //alert("Error");
      //}
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><form id="form_contact" action="mail.php" method="post" enctype="multipart/form-data" class="contact-one__form">  <!---->  <div class="row">    <div class="col-lg-6">      <div class="input-box">        <label for="name">Your name</label>        <input required type="text" id="name" placeholder="Ivan Ivanov" name="name" value="">      </div>    </div>    <!--/.col-lg-6 -->    <div class="col-lg-6">      <div class="input-box">        <label for="email">Email</label>        <input required type="email" id="email" placeholder="Email" name="email" value="">      </div>    </div>    <!--/.col-lg-6 -->    <div class="col-lg-6">      <div class="input-box">        <label for="tel">Phone number</label>        <input required type="tel" id="tel" placeholder="+79997772255" name="tel" value="">      </div>    </div>    <!--/.col-lg-6 -->    <div class="col-lg-6">      <div class="input-box">        <label for="number_order">Order No.</label>        <input required id="number_order" type="text" placeholder="0000000-i00" name="number_order" value="">      </div>    </div>    <!--/.col-lg-6 -->    <div class="col-lg-12">      <div class="input-box">        <label for="message">Message</label>        <textarea required id="message" placeholder="Your message" name="message"></textarea>      </div>    </div>    <!--/.col-lg-12 -->    <div class="col-lg-6">      <input id="file " type="file" name="file" value="">    </div>    <!--/.col-lg-6 -->    <div class="col-lg-12 text-left">      <br>      <button type="button" id="sendMail" class="main-btn">Submit</button> </div>    <!--/.thm-btn contact-one__btn -->  </div>  <!--/.row --></form>