Image upload with Nativescript and PHP

Question

I've tried many examples posted online about uploading images via Nativescript (this part I seem to be getting right bar one or two issues), but my PHP server isn't responding with anything and I don't know how to access the file being uploaded to the server as nowhere in the upload data is the file name mentioned from what I can see. I'm using the background-http plugin, but have a few issues in general, namely: - Where do I include user data in the image upload to the server using background-http? - The completed handler on background-http doesn't receive the response from my server, it remains and empty object. - On the server side, I'm struggling to pick up the file and have no idea how to receive the user data too.

What I'm asking for: Does anyone have a working example of uploading from Nativescript Core using the Background-http plugin (and submitting user data along with the image), through to the PHP file that will receive it and process it and provide response? For the life of me I can't get it working.

I've tried the Background-http plugin example to the tee, it shows it's uploading but never shows the server response, just shows the responseCode of 200.

On the server side, I have tried many examples I've found online, but none seem to be working - I suspect this is because they are mostly web examples. I need something specific to Nativescript.

Nativescript JS file

exports.uploadImage = () => {
    // file path and url
    var file = cameraViewModel.imageAsset;
    var url = "https://www.wesignit.co.za/api/wsi_1/WSI_1_PROD/image_upload.php";
    var name = file.substr(file.lastIndexOf("/") + 1); //this gets the filename

    // upload configuration
    var bghttp = require("nativescript-background-http");
    var session = bghttp.session("image-upload");
    var request = {
            url: url,
            method: "POST",
            headers: {
                "Content-Type": "application/octet-stream"
            },
            description: "Uploading file: " + name
        };

    var task = session.uploadFile(file, request);

    task.on("progress", progressHandler);
    task.on("error", errorHandler);
    task.on("responded", respondedHandler);
    task.on("complete", completeHandler);

    // event arguments:
    // task: Task
    // currentBytes: number
    // totalBytes: number
    function progressHandler(e) {
        cameraViewModel.uploadOutputs = "Uploading file: " + name + " - uploaded " + e.currentBytes + " / " + e.totalBytes + "(" + (Math.round(e.currentBytes/e.totalBytes * 100) * 10 / 10) + "%)";
    }

    // event arguments:
    // task: Task
    // responseCode: number
    // error: java.lang.Exception (Android) / NSError (iOS)
    // response: net.gotev.uploadservice.ServerResponse (Android) / NSHTTPURLResponse (iOS)
    function errorHandler(e) {
        cameraViewModel.uploadOutputs = "received " + e.responseCode + " code.";
        //cameraViewModel.uploadOutputs = "Error uploading file - try again!";
        //var serverResponse = e.response;
        //alert(e.response);
        alert("Error uploading file - try again!");
    }


    // event arguments:
    // task: Task
    // responseCode: number
    // data: string
    function respondedHandler(e) {
        cameraViewModel.uploadOutputs = "received " + e.responseCode + " code. Server sent: " + e.data;
    }

    // event arguments:
    // task: Task
    // responseCode: number
    // response: net.gotev.uploadservice.ServerResponse (Android) / NSHTTPURLResponse (iOS)
    function completeHandler(e) {
        cameraViewModel.uploadOutputs = "received " + e.responseCode + " code";
        var serverResponse = e.response;
        alert(JSON.stringify(e));
    }


}

PHP upload file

header('Content-Type: application/json; charset=utf-8');
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: PUT, GET, POST");
$response = array();
$upload_dir = 'uploads/';
$server_url = 'https://www.wesignit.co.za';
if($_FILES['avatar'])
{
    $avatar_name = $_FILES["file"]["name"];
    $avatar_tmp_name = $_FILES["file"]["tmp_name"];
    $error = $_FILES["file"]["error"];
    if($error > 0){
        $response = array(
            "status" => "error",
            "error" => true,
            "message" => "Error uploading the file!"
        );
    }else
    {
        $random_name = rand(1000,1000000)."-".$avatar_name;
        $upload_name = $upload_dir.strtolower($random_name);
        $upload_name = preg_replace('/\s+/', '-', $upload_name);

        if(move_uploaded_file($avatar_tmp_name , $upload_name)) {
            $response = array(
                "status" => "success",
                "error" => false,
                "message" => "File uploaded successfully",
                "url" => $server_url."/".$upload_name
              );
        }else
        {
            $response = array(
                "status" => "error",
                "error" => true,
                "message" => "Error uploading the file!"
            );
        }
    }

}else{
    $response = array(
        "status" => "error",
        "error" => true,
        "message" => "No file was sent!"
    );
}
echo json_encode($response);

I expect to see a server response, even if just a dummy response object (which I've also tried), but am only receiving responseStatus, responseCode etc.... The response object which I expect to be populated is empty.

On the server: it's clear that the server is not receiving the file and processing it.

Please help. I'm struggling here. I just need a working example that I can copy going forward.