Image upload with Nativescript and PHP - 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.