Form data not being retrieved by handler after it is sent

Question

I'm trying to send an image to an ajax handler via ajax. If I console.log the variable ìmage I am sending, it looks fine. As of now I am sending it to the handler and just trying to echo it back. But I get a blank response. I am sending the image: formData inside an object which I hope is ok.

Ajax:

var form_data = new FormData();

              var image = $('#newImage').prop('files')[0];
              var image_name = image.name;
              var image_extension = image.name.split('.').pop().toLowerCase();
              if(jQuery.inArray(image_extension, ['gif', 'jpg', 'JPG', 'pjpeg', 'x-png', 'png', 'PNG', 'jpeg']) == -1) {
                alert("Invalid Image File Type")
              }
              var image_size = image.size;
              if(image_size > 700000) {
                alert("Image too big!");
              } else {
                form_data.append('file', image);
              }


              let data = {
                action: 'NewEventExhibition',
                name: name,
                description: description,
                notes: notes,
                status: status,
                slug: slug,
                start_date: start_date,
                end_date: end_date,
                event_code: '<?=$code?>',
                image: form_data
              };

              $.ajax({
                url: '/modules/ajax/ajax_handler.php',
                type: 'POST',
                data: data,
                contentType: false,
                cache: false,
                processData: false,
                mimeType: 'multipart/form-data',
                success: function(response) {
                  alert(response);
                },
                fail: function(response) {
                  console.log(response);
                }
              })
            }
          });

Handler

if($_FILES['file']['name'] != '') {
          $test = explode(".", $_FILES['file']['name']);
          $extension = end($test);
          $name = rand(100, 999).'.'.$extension;
          $location = "/assets/images/".$name."";
          move_uploaded_file($_FILES['file']['tmp_name'], $location);
          echo $location;
        }
```

Answer 1

That's not how you send a FormData object with ajax. The form_data object should be the thing that you send, not it being part of a bigger object. I would recommend you to append all the fields of the object data to the form_data and send it.

Something like the following:

form_data.append('action', 'NewEventExhibition');
form_data.append('name', name);
form_data.append('description', description);
form_data.append('notes', notes);
form_data.append('status', status);
form_data.append('slug', slug);
form_data.append('start_date', start_date);
form_data.append('end_date', end_date);
form_data.append('event_code', '<?=$code?>');

instead of let data = {.... } .

Then you can send it with

$.ajax({
  url: '/modules/ajax/ajax_handler.php',
  type: 'POST',
  data: form_data,
  contentType: false,
  cache: false,
  processData: false,
  mimeType: 'multipart/form-data',
  success: function(response) {
    alert(response);
  },
  fail: function(response) {
    console.log(response);
  }
});

Please note the data: form_data .