Ajax $_POST & $_FILES not getting data

Question

I'm working on a website similar to YouTube but for my company. What I want to do is making possible for users to upload photos and videos by themselves (instead of asking me everytime).

I got issues with the video upload part, I used the same technique for the photo upload and it worked just fine !

Here is my code:

$(function () {
  $('#my_form').on('submit', function (e) {

    e.preventDefault();

    var $form = $(this);
    var formdata = (window.FormData) ? new FormData($form[0]) : null;
    var data = (formdata !== null) ? formdata : $form.serialize();
    $.ajax({
          url: 'MgtImportVideo.php',
          type: 'POST',
          contentType: false,
          processData: false,
          dataType: 'html',
          data: data, //data = serialized form
          xhr: function(){      
               //do stuff like showing percentage progress
          },
          beforeSend : function (){
               //do some stuff like incrementing variables
          },
          success: function (response) {
               //do other stuff like diplaying error/sucess messages
          }
     });
});

I put contentType and processData to false because I heard it was required for the upload.

And the actual video file is stored like this :

$('#my_form').find('input[name="fileVideo[]"]').on('change', function (e) {
        var files = $(this)[0].files;
        var urivideo=false;

        urivideo=window.URL.createObjectURL(files[0]);

        //Then do some other stuff (I guess not really important here)
});

Then in my MgtImportVideo.php file, the $_POST and $_FILES are not getting any data and showing as empty arrays.

Can someone help me figuring this out ?

https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload — unalignedmemoryaccess, Jun 23 '17 at 12:24
Possible duplicate of [jQuery Ajax File Upload](https://stackoverflow.com/questions/2320069/jquery-ajax-file-upload) — B. Desai, Jun 23 '17 at 12:25

score 0 · Answer 1 · answered Jun 23 '17 at 12:26

To upload file using ajax use formData instead of serialized form data as serialize encode a set of form elements as a string for submission. To upload a file you have to make a formData object and append the file into it and submit that formData object.

Ex:

var file_data = $('#pic').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);

$.ajax({
    url         : 'upload.php',     // point to server-side PHP script 
    dataType    : 'text',           // what to expect back from the PHP script, if anything
    cache       : false,
    contentType : false,
    processData : false,
    data        : form_data,                         
    type        : 'post',
    success     : function(output){
        alert(output);              // display response from the PHP script, if any
    }
});

My bad my code was not full, I am using formdata object ! Updated the question. — Natty, Jun 23 '17 at 12:33

score 0 · Answer 2 · answered Jun 23 '17 at 13:18

add success and if data returns true then you can do any actions in success function

var data_ser = (formdata !== null) ? formdata : $form.serialize();
$.ajax({
      url: 'MgtImportVideo.php',
      type: 'POST',
      contentType: false,
      processData: false,
      dataType: 'html',
      data: data_ser, //data = serialized form
      success: function(return_data){  //data return in ajax call.      
           if(return_data){
                 alert('success');     //if data returns true 
           }
      }

 });

Ajax $_POST & $_FILES not getting data

2 Answers2