Send input file with other strings in PHP error

Question

I want to send input file and some strings via ajax, but I can't send the file because it doesn't have to be processed ( so i should use processData: false) but if I use it every string I pass result as not indexed

JS script:

var Name = document.getElementById("Name").value;
    var Surname = document.getElementById("Surname").value;
    var Residence = document.getElementById("Residence").value;
    var Email = document.getElementById("Email").value;
    var Phone = document.getElementById("Phone").value;
    var JCurriculum = document.getElementById("Curriculum").files[0];
    var Curriculum = new FormData();
    Curriculum.append("Curriculum", JCurriculum);
    $.ajax({
        method: 'POST',
        url: "scripts/register.php",
        data: {
            Name: Name,
            Surname: Surname,
            Residence: Residence,
            Email: Email,
            Phone: Phone,
            Curriculum: Curriculum
        },            
        success: function (Curriculum) {
            alert('Success');
        }
    });

PHP script:

$Name = $_POST['Name'];
$Email = $_POST['Email'];
$Surname = $_POST['Surname'];
$Residence = $_POST['Residence'];
$Phone = $_POST['Phone'];
$Curriculum = $_POST['Curriculum'];

$Name = filter_var($Name, FILTER_SANITIZE_STRING);
$Surname = filter_var($Surname, FILTER_SANITIZE_STRING);
$Email = filter_var($Email, FILTER_SANITIZE_EMAIL);
$Residence = filter_var($Residence, FILTER_SANITIZE_STRING);;
$Phone = filter_var($Phone, FILTER_SANITIZE_STRING);;

If I put processData:false in the before success: I have this error Undefined index

Answer 1

The data you're sending is incorrect. Instead of serialising a FormData object along with form-urlencoded data, you need to append() all information (input values and files) in to the FormData object and then send that only.

You will also need to set both contentType and processData properties to false. Try this:

var formData = new FormData();
formData.append('Name', $('#Name').val());
formData.append('Surname', $('#Surname').val());
formData.append('Residence', $('#Residence').val());
formData.append('Email', $('#Email').val());
formData.append('Phone', $('#Phone').val());
formData.append('Curriculum', $('#Curriculum')[0].files[0]);

$.ajax({
  method: 'POST',
  url: "scripts/register.php",
  data: formData,
  processData: false,
  contentType: false,
  success: function(Curriculum) {
    alert('Success');
  }
});

Also note that if all the information you want to send in the request is contained within a single <form /> element then you can simplify the FormData creation by providing the reference to the form element to the object constructor:

var formData = new FormData($('#yourForm')[0]);