How to return json from my php code

Question

I am trying to upload a file from angular to server using php using the below php code. I am getting error in console log, below are the details

<?php

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type,x-prototype-version,x-requested-with');
header('Cache-Control: max-age=900');
header("Content-Type: application/json"); // tell client that we are sending json data

$response = array();
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
    if($check !== false) {
        $response['status'] = "File is an image - " . $check["mime"] . ".";
        $uploadOk = 1;
    } else {
        $response['status'] = "File is not an image.";
        $uploadOk = 0;
    }
}
// Check if file already exists
if (file_exists($target_file)) {
    $response['status'] = "Sorry, file already exists.";
    $uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
    $response['status'] = "Sorry, your file is too large.";
    $uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "docx"
&& $imageFileType != "gif" ) {
     $response['status'] =  "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
     $response['status'] =  "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
         $response['status'] =  "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
    } else {
         $response['status'] =  "Sorry, there was an error uploading your file.";
    }


}
    echo json_encode($response);
    exit;
?>

Just for reference i am attaching the error and response i am getting while uploading from angular form.

My code in angular:

fileChange(event) {
   // let fileList: FileList = event.target.files;
   let fileList: FileList = event.srcElement.files;
    if(fileList.length > 0) {
        let file: File = fileList[0];
        let formData:FormData = new FormData();
        formData.append('uploadFile', file, file.name);
        console.log(file);
        let headers = new Headers();
        headers.append('Content-Type', 'multipart/form-data');
        headers.append('Accept', 'text/html');
        headers.append('Content-Type', 'application/x-www-form-urlencoded');
      //  let options = new RequestOptions({ headers: headers });
        this.http.post(`http://funiks.com/adminv8/products-api/upload.php`, formData, { headers: headers })
            .map(res => res.json())
           // .catch(error => Observable.throw(error))
            .subscribe(
                data => console.log('success'),
                error => console.log(error)
            )
    }
}

In console.log it is show this -

XMLHttpRequest cannot load http://funiks.com/adminv8/products-api/upload.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

Answer 1

Try this.

            <?php
    error_reporting(0);
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: GET, POST, OPTIONS');
    header('Access-Control-Allow-Headers: Content-Type,x-prototype-version,x-requested-with');
    header('Cache-Control: max-age=900');
    header("Content-Type: application/json"); // tell client that we are sending json data

    $response = array();
    $target_dir = "uploads/";
    $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
    $uploadOk = 1;
    $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);

    echo "request";
    print_r($_REQUEST);
    // Check if image file is a actual image or fake image
    echo "_FILES";
    print_r($_FILES);

    echo "_POST";
    print_r($_POST);

    if(isset($_POST["submit"])) {
        $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
        if($check !== false) {
            $response['status']= "File is an image - " . $check["mime"] . ".";
            $uploadOk = 1;
        } else {
            $response['status']= "File is not an image.";
            $uploadOk = 0;
        }

    if (file_exists($target_file)) {
        $response['status'] ="Sorry, file already exists.";
        $uploadOk = 0;
    }else if ($_FILES["fileToUpload"]["size"] > 500000) {
        $response['status'] = "Sorry, your file is too large.";
        $uploadOk = 0;
    }else if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "docx"
    && $imageFileType != "gif" ) {
         $response['status'] =  "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
        $uploadOk = 0;
    }else if ($uploadOk == 0) {
         $response['status'] =  "Sorry, your file was not uploaded.";

    } else {
        if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
             $response['status'] =  "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
        } else {
             $response['status'] =  "Sorry, there was an error uploading your file.";
        }

    }

    echo json_encode($response['status']);
    exit;
    }
    ?>