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: [stackoverflow.com/questions/20487212/… [1]: stackoverflow.com/questions/20487212/… — dilionnele
– dilionnele, Commented Aug 20, 2015 at 12:00

Ben Fortune · Accepted Answer · 2014-08-08 14:46:25Z

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 8, 2014 at 14:46

Ben Fortune

32.2k10 gold badges82 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hitautodestruct Over a year ago

Can you give an example of using the file api with angular and php?

Saida Rao · Accepted Answer · 2015-09-08 14:14:00Z

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

Collectives™ on Stack Overflow

Upload a file with AngularJS and PHP

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related