I am trying to upload files ( image, video, and zip ) from the front-end using jQuery Ajax call.

Here is the jQuery code:

$(document).on("submit", "#add_training_video", function (e) {
  e.preventDefault();
  var form = $(this);
  var actionUrl = handle.ajaxurl;
  var data = new FormData(this);

  $.ajax({
    dataType: "html",
    type: "POST",
    url: actionUrl,
    data: data,
    processData: false,
    contentType: false,
    beforeSend: function () {
      $(".video-button").val("Please wait...");
      $(".video-button").prop("disabled", true);
    },
    success: function (data) {
      $(".video-button").val("Add A New Video");
      $(".video-button").prop("disabled", false);
      $(".ajax_response").html(data);
      // console.log(data);
      // $(".ajax_response").html("");
      // if(!data.success) {
      //   data.message.forEach(function(key, ele){
      //     $(".ajax_response").append("<div class='error-message'>" + key +"</div>");
      //   });
      // } else {
      //   $(".ajax_response").append("<div class='success-message'>" + data.message +"</div>");
      // }
    },
  });
});

Now, If I upload a file that is more than 5 MB then I am getting a 0 or Bad Request from ajax response.

Can you tell me why?

Thank You!