Angularjs files uploads says this request has no response data available - angularjs

Question

I used the code below to upload Image and username to server. it works fine.
Now I want to return the username and filename in a console but it says this request has no response data available. I have tried to use a successcallback() function but still with no luck. it seems the issue is from the successcallback(). can someone help me fix that.
file.upload = Upload.upload({
method: 'post',
url: 'image.php',
data: {username: $scope.username, file: file},
}).then(function successCallback(response) {
alert(response.data[0].username);
alert(response.data[0].file);
console.log(response.data[0].username);
});
below is the entire code
//inject angular file upload directives and services.
var app = angular.module('fileUpload', ['ngFileUpload']);
app.controller('MyCtrl', ['$scope', 'Upload', '$timeout','$http', function ($scope, Upload, $timeout, $http) {
$scope.uploadPic = function(file) {
file.upload = Upload.upload({
url: 'upload.php',
data: {username: $scope.username, file: file},
});
file.upload.then(function (response) {
$timeout(function () {
file.result = response.data;
console.log(response.data[0].username);
});
}, function (response) {
if (response.status > 0)
$scope.errorMsg = response.status + ': ' + response.data;
}, function (evt) {
// Math.min is to fix IE which reports 200% sometimes
file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
});
}
}]);
image.php
<?php
error_reporting(0);
$data = json_decode(file_get_contents("php://input"));
$username = strip_tags($data->username);
$return_arr[] = array("username"=>$username);
echo json_encode($return_arr);
exit();

Answer 1

The issue mentioned in the post above has been resolved.
I was sending the form parameter username as json_decode()
$data = json_decode(file_get_contents("php://input"));
$username = strip_tags($data->username);
Sending everything as post parameter solved my problem as in case below
$username = $_POST['username'];
Thanks