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?

This was very helpful for me: [http://stackoverflow.com/questions/20487212/angularjs-file-upload-with-php][1] [1]: http://stackoverflow.com/questions/20487212/angularjs-file-upload-with-php — dilionnele, Aug 20 '15 at 12:00

score 2 · Answer 1 · answered Aug 08 '14 at 14:46

2

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.

answered Aug 08 '14 at 14:46

Ben Fortune

31,623
10
79
80

1

Can you give an example of using the file api with angular and php? – hitautodestruct Dec 22 '14 at 11:58

Saida Rao · Answer 2 · 2015-09-08T14:14:00.677

    <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)

Upload a file with AngularJS and PHP

2 Answers2