how to combine two ajax together

I have two ajax functions. One is to put up your webcam and take a picture, another ajax is to upload a file and detect if there's a face in the picture. I want to combine those two ajax so that I can take a picture from the webcam, and use that picture for the facial detection function. How should I combine those two ajax?

// Upload image to sever
 document.getElementById("upload").addEventListener("click", function(){
            var dataUrl = canvas.toDataURL("image/jpeg", 0.85);
            $("#uploading").show();
            $.ajax({
                type: "POST",
                url: "html5-webcam-save.php",
                // url: "form-post.php",
                data: {
                    imgBase64: dataUrl,
                    user: "Joe",
                userid: 25
        }
        }).done(function(msg) {
                console.log("saved");
                $("#uploading").hide();
                $("#uploaded").show();
            });
        });
    }, false);
    
    //Face detection
    <form method="post" enctype="multipart/form-data" action="form-post.php"> 
    <input type="file" id="imageFile" name="file"><button type="button" id="testDetect">Submit</button>
</form>

<script>
$("#testDetect").click(function () {
    var file = $('#imageFile')[0].files[0]; 
    var reader  = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = function () {
      var imageData = parseImageData(reader.result);
      var data = {};
      data.image = imageData;
      $.ajax({
      url      : "http://localhost/Karios/simple-detect/form-post.php",
      type     : "POST",
      data     :  data,
      dataType : 'text'
    }).done(function(response) {
      alert(response)
      console.log(response)

    })
    }
});

Solution

Hopefully, this article could help http://www.htmlgoodies.com/beyond/javascript/making-promises-with-jquery-deferred.html

You will need to gather your ajax calls as promises, and get their responses together as in the code below (adapted from the link above)

var xhr1 = $.ajax("/some1");
var xhr2 = $.ajax("/some2");

$.when(xhr1, xhr2).done(function(x1, x2) {
  //Handle
});