How to use serialize in a form with File type input?

There seems to be no way to do it with serialize() , for your case it can be done with FormData in the following way:

$('#crear-producto').click(function(){
    let data = new FormData($('#nuevo-producto')[0]);
    ajaxRequest(constants.URL.PRODUCTOS.CREAR, 'POST', data, 'json', 'successRequest', 'errorRequest');
});

The form information can be obtained from $_POST and the one from the $_FILES files.
It is also important to assign to the parameters the value of contentType: false because otherwise jQuery will send it as application/x-www-form-urlencoded; charset=UTF-8 which is its default value.

Your ajaxRequest function would look like this:

function ajaxRequest(url, method, data, datatype, successCallback, errorCallback) {
  $.ajax({
    url: url,
    data: data,
    dataType: datatype,
    type: method,
    // Ambos importantes para que jQuery no transforme la información
    contentType: false,
    processData: false,
    success: function (response) {
      eval(successCallback + '(' + JSON.stringify(response) + ')');
    },
    error: function(error){
      eval(successCallback + '(' + JSON.stringify(error) + ')');
    }
  });
}

  

Unable to load a file and use serialize() with AJAX because you can not access the contents of a file stored on the client computer and send it in the application using javascript.

I recommend using FormData objects I'll give you an example that I use a lot.

function upload_files(url, inputFile, input_text, another_variable, form){
    //Obtenemos el campo de file del formulario 
    var archivos = $(inputFile)[0];
    var archivo = archivos.files; 
    var archivos = new FormData();

    //Para múltiples archivos 
    for(i=0; i<archivo.length; i++){
        archivos.append('archivo'+i,archivo[i]); //Añadimos cada archivo a el arreglo con un indice direfente
    }
    /**
     * Si queremos añadir alguna variable extra, por ejemplo algun campo tipo text
     */
    archivos.append('input_text', input_text);
    //Otra variable
    archivos.append('another_variable', another_variable);

    $.ajax({
        //Url_destino
        url:url,
        //Progress Bar
        xhr: function(){
            var xhr = new window.XMLHttpRequest();
            //Upload progress
            xhr.upload.addEventListener("progress", function(evt){
                if (evt.lengthComputable) {
                    var percentComplete = (evt.loaded / evt.total)*100;
                    //Do something with upload progress
                    form.find('.progress').removeClass('hidden');
                    form.find('.bar').css('width',percentComplete+'%');

                    if(percentComplete == 100){
                        setTimeout(function(){ 
                            //Progress Bar effect
                            form.find('.progress').addClass('hidden');
                            form.find('.bar').css('width','0%'); 
                        }, 1000);
                    }
                }
            }, false);
            //Download progress
            xhr.addEventListener("progress", function(evt){
                if (evt.lengthComputable) {
                    var percentComplete = evt.loaded / evt.total;
                    //Do something with download progress
                }
            }, false);
            return xhr;
        },
        type:'POST',
        contentType:false, //Debe estar en false para que pase el objeto sin procesar
        data:archivos, //Le pasamos el objeto que creamos con los archivos
        processData:false, //Debe estar en false para que JQuery no procese los datos a enviar
        cache:false,
        success: function(data){
            //Hacer algo con la data
       },
       error: function (jqXHR, exception) {
            var msg = '';
            if (jqXHR.status === 0) {
                msg = 'Not connect.\n Verify Network.';
            } else if (jqXHR.status == 404) {
                msg = 'Requested page not found. [404]';
            } else if (jqXHR.status == 500) {
                msg = 'Internal Server Error [500].';
            } else if (exception === 'parsererror') {
                msg = 'Requested JSON parse failed.';
            } else if (exception === 'timeout') {
                msg = 'Time out error.';
            } else if (exception === 'abort') {
                msg = 'Ajax request aborted.';
            } else {
                msg = 'Uncaught Error.\n' + jqXHR.responseText;
            }
            console.log(msg);
        },
    });
}

Used as follows:

$('#upload_files').submit(function(e) {
            e.preventDefault();
            var url = 'url/to/action.php';
            var input_text =  $('input[type=text]').val();
            var action_event =  $(this).find('.action_event').val();
            upload_files(url, '#files', input_text, action_event, $('#upload_files'));
            //Para borrar el formulario después de envíarlo y que todo salga ok
            $(this)[0].reset();
        });

The HTML would be something like:

<form  id="upload_files">
    <input type="file" id="files" name="files" multiple="multiple" required>
    <input type="text" autocomplete="off" required>
<div class="progress progress-striped active" style="height: 10px; box-shadow: none; margin: 0; background-color:white;" class="hidden">
                                <div class="bar"></div>
                            </div>
<input type="submit" value="Guardar">
</form>