Pass 2 parameters in $http POST

Question

I have a scenario where a property can have multiple images but that image can only be assigned to one property(one to many, propertyId as FK).

In the html I'm retrieving the propertyId and passing it with the uploadFile function

<div id="imageDiv" ng-controller="uploadImageCtrl">  
                 <input type="button" class="btn btn-info" value="Upload Image" ng-click="uploadFile(pro.id)"/>
                <input type="file" file-input="files"/>  
            </div>

Here I have my app.js where I'm retrieving the image, and propertyId as Id. I'm trying to pass id and form_data.

app.directive("fileInput", function($parse){  
  return{  
       link: function($scope, element, attrs){  
            element.on("change", function(event){  
                 var files = event.target.files;  
                 console.log(files[0].name);  
                 $parse(attrs.fileInput).assign($scope, element[0].files);  
                 $scope.$apply();  
            });  
       }  
  }  
 });  
 app.controller("uploadImageCtrl", function($scope, $http,$routeParams,$location){ 

  $scope.uploadFile = function(id){

     var form_data = new FormData();  
       angular.forEach($scope.files, function(file){  
        form_data.append('file', file);  
          }); 

    $scope.id = id;
    console.log(id);
    $routeParams.id = id;
    //$scope.activePath = null;
    $scope.updateMessage="";

    console.log(form_data);        
  $http.post('php/uploadImage.php/',{'id':id},form_data,  
       {  
            transformRequest: angular.identity,  
            headers: {'Content-Type': undefined,'Process-Data': false}  
       }).success(function(response){  
            alert(response);  

       });  
  }  
 });

Then in uploadImage.php I'm assigning $id to the propertyId retrieved from app.j and uploading the image to that propertyId.

<?php

$data = json_decode(file_get_contents("php://input"));
$id=$data->id;
echo $id;
require_once("connection.php");
$conn = connectToDb();

if(!empty($_FILES))  
 {  
      $path = '../Images/' . $_FILES['file']['name'];  
      if(move_uploaded_file($_FILES['file']['tmp_name'], $path))  
      {  
           $insertQuery = "INSERT INTO tbl_images(imagePath , propertyId) VALUES ('".$_FILES['file']['name']."',$id)";  
           if(mysqli_query($conn, $insertQuery))  
           {  
                echo 'File Uploaded';  
           }  
           else  
           {  
                echo 'File Uploaded But not Saved';  
           }  
      }  
 }  
 else  
 {  
    echo  mysqli_error($conn);
 }
?>

The problem is that it's giving me a blank error with the number 8 and don't why it's not uploading, the 8 represents $id(echo $id).So propertyId is being retrieved succesfully and passed into the php.

The error is probably the last ELSE statment(echo mysqli_error($conn)).

Is form_data not being passed succefully?

Answer 1

I just needed to append id as well, with the form data and then retrieve the id with a normal POST .

app.controller("uploadImageCtrl", function($scope, $http,$routeParams,$location){ 

  $scope.uploadFile = function(id){

    var form_data = new FormData();  
    angular.forEach($scope.files, function(file){  
        form_data.append('file', file);  
    }); 
    form_data.append('elmID', id);

  $http.post('php/uploadImage.php',form_data,  
       {  
            transformRequest: angular.identity,  
            headers: {
                'Content-Type': undefined,
                'Process-Data': false
            }  
       }).success(function(response){  
            alert(response);
       });
  }

 });