Upload a file with AngularJS and PHP

Question

I want to upload a file while using AngularJS for frontend and PHP for backend. When I would leave Angular aside, my HTML form would look like this:

<form enctype="multipart/form-data" action="process.php" method="POST" >
  File: <input name="userfile" type="file"/>
  <input type="submit" value="Send File" />
</form>

My PHP in process.php is this:

$tmpFilePath = $_FILES['userfile']['tmp_name'];
if ($tmpFilePath != ""){
    $newFilePath = "my-uploads/" . $_FILES['userfile']['name'];
    move_uploaded_file($tmpFilePath, $newFilePath);
}

So far, everything works fine, file is uploaded by clicking submit. But I need the whole thing to be done with Angular. So I changed my HTML to this:

<form ng-submit="processForm()" >
  File: <input name="userfile" type="file" ng-model="formData.file"/>
  <input type="submit" value="Send File" />
</form>

The code inside my Angular-controller looks like this:

$scope.formData = '';
$scope.processForm = function() {
  $http({
    method  : 'POST',
    url     : 'process.php',
    data    : $.param($scope.formData),
    headers : { 'Content-Type': undefined } 
  })
  .success(function(data) {
    console.log(data);
    console.log('success!');
  })
  .error(function(data) {
    console.log(data)
  });
};

When I click "submit", the console tells me "success!", but no file is uploaded. I think the problem is "data" and "headers" in th $http-request? But I'm really unsure about this and couldn't find a solution on the net so far. Does anybody know what I have to do to get my file uploaded while using angulars $http-functionality?

Answer 1

Angular can't upload files using AJAX without using the HTML5 file API.

Either change your code to use the file API and submit the binary content or use an external library such as angular-file-upload .

Answer 2

    <input type='file' name="Filename"  data-ng-file-select  onchange="scope.setFile(this)" id="imgInp"> (html)

       window.scope = $scope;
       $scope.setFile = function (ele) {
        var photofile = ele.files[0];
        var reader = new FileReader();
        console.log(photofile);
        reader.onload = function (e) {
        $scope.$apply(function () {
        console.log(e);
        $scope.prev_img = e.target.result;
        $scope.prev_img = angular.copy($scope.prev_img);
        $http({
        method: 'POST',
        url: 'api/1.php',
        data: { 'imagepath': $scope.prev_img },
        headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
        })
        .success(function (data) {
        console.log(data);


        })
        .error(function (error) {
        $scope.data.error = error;
        });

        });
        }; (angurlarjs)

<?php

include 'db_connect.php';
include 'functions.php';


//$levels = array();

$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
$idUser = $request->imagepath;

echo $idUser;


// CLOSE CONNECTION
mysqli_close($mysqli);

echo json_encode($json);

?>(php)