Pass files by ajax

Question

I am creating the product registration form of a website, and in it, all forms are submitted by ajax to an api. The problem is that in this particular form I need to send images to the server. I am trying to use the Formdata object to send, but without success. Follow the javascript code I am using:

$("#formProduto").submit((e) => {
    var formProduto = document.getElementById('formProduto');
    var formData = new FormData(formProduto);
    $.ajax("/admin/produto/api", {
        type: "POST",
        data: formData,
        success: (data) => {
            //Sucesso
        }
    }
    return e.preventDefault();
});

Using data: $("#formProduto").serialize() (without the file, of course) ajax works normally, when I change the above code it just ignores the e.preventDefault(); and submit the form to the page itself.

Answer 1

First check if your form has the attribute enctype="multipart/form-data" which allows you to upload files, then change your code to something like:

var fData = new FormData($('#formProduto')[0]);
$.ajax({
  url : "/admin/produto/api",
  dataType: 'json',
  processData: false,
  data: fData,
  type: 'POST',
  contentType: false,
  success : function() {
    console.log("success", success);        
  },
  complete: function() {
    console.log("complete", complete);
  },
  error: function() {
    console.log("error", error);        
  }
});

Adding the options processData: false and contentType: false