How to pass different types of data on ajax send() function to PHP?

Question

I am trying to send a file(pdf file) as well as user text input using ajax using vanilla javascript please dont post any jquery answers.

formData contains the pdf file and formVal contains the user text input.

If I remove formVal from the request.send function then the file is uploaded but if I include formVal the send function does not work as nothing gets uploaded.

var formData = new FormData();
var dropzone = document.getElementById('dropzone');
var sub = document.getElementById('subForm');

var uploadFile = function (formVal) {
    var request = new XMLHttpRequest();

    request.onload = function(){
        var data = this.responseText;
        console.log(data);
        //window.location.reload();
    }
    request.open('post', 'index.php');
    request.send(formData, formVal);
}
dropzone.ondrop = function (event) {
    event.preventDefault();
    document.getElementById('para1').innerHTML = "File uploaded";

    var files = event.dataTransfer.files;
    //uploadFile(event.dataTransfer.files,);
    var i;
    for(i = 0; i<files.length; i = i+1){
        formData.append('file[]', files[i]);
    }
    return false;
}

sub.onclick = function () {
    var code = document.getElementById('cCode').value;
    var size = document.getElementById('cSize').value;
    var dd = document.getElementById('cDD').value;
    var val = "c=" +code+"&s="+size+"&d="+dd;
    if(formData.get('file[]') === null){
        alert("Drang and drop PDF file");
    }else{
        uploadFile(val);
    }


}