Upload file with AngularJS and PHP

For upload file with AngularJS need to send the file by $http service and with the use of PHP store the requested file to the server and return a response.

In the demonstration, I am creating two examples –

In the first, using JavaScript to select a file,
And in the second, using a custom directive

Then pass it as data in $http service for upload.

Upload file with AngularJS and PHP

Download

Without Custom directive
With Custom directive
PHP
Conclusion

1. Without Custom directive

HTML

Create a file element, a button for upload, and <p> for display response result.

With button added ng-click directive which calls upload() function.

Completed Code

<body ng-app='myapp'>

 <div ng-controller="userCtrl">
  
  <input type='file' name='file' id='file'><br/>
  <input type='button' value='Upload' id='upload' ng-click='upload()' >
  
  <p>{{ response.name }}</p>
 </div>

</body>

AngularJS

Declare a module and define $scope.upload in the controller which triggers the button click.

Within the function get the selected file from the file element and append it to FormData object variable fd.

Sending POST request using $http service where pass FormData object as data and set Content-Type: undefined using headers property.

Completed Code

var upload= angular.module('myapp', []);

upload.controller('userCtrl', ['$scope', '$http', function ($scope, $http) {
 $scope.upload = function(){
 
  var fd = new FormData();
  var files = document.getElementById('file').files[0];
  fd.append('file',files);

  // AJAX request
  $http({
   method: 'post',
   url: 'upload.php',
   data: fd,
   headers: {'Content-Type': undefined},
  }).then(function successCallback(response) { 
    // Store response data
    $scope.response = response.data;
  });
 }
 
}]);

2. With Custom directive

HTML

Only added a custom model ng-file='uploadfiles' on the input element and other codes will be the same as the above example.

Completed Code

<body ng-app='myapp'>

 <div ng-controller="userCtrl">
  
  <input type='file' name='file' id='file' ng-file='uploadfiles'><br/>
  <input type='button' value='Upload' id='upload' ng-click='upload()' >
  
  <p>{{ response.name }}</p>
 </div>

</body>

AngularJS

Declaring custom directive using .directive where initializing the scope when the change event trigger and use it to define FormData Object variable fd.

Completed Code

var upload = angular.module('myapp', []);
upload.directive('ngFile', ['$parse', function ($parse) {
 return {
  restrict: 'A',
  link: function(scope, element, attrs) {
   element.bind('change', function(){

    $parse(attrs.ngFile).assign(scope,element[0].files)
    scope.$apply();
   });
  }
 };
}]);

upload.controller('userCtrl', ['$scope', '$http', function ($scope, $http) {
 
 $scope.upload = function(value){
  var fd=new FormData();
  angular.forEach($scope.uploadfiles,function(file){
  fd.append('file',file);
 });

 $http({
  method: 'post',
  url: 'upload.php',
  data: fd,
  headers: {'Content-Type': undefined},
 }).then(function successCallback(response) { 
  // Store response data
  $scope.response = response.data;
 });
}
 
}]);

3. PHP

Create a new upload.php file and an upload folder.

Upload file to upload folder and return an Array in JSON format which has a file name.

Completed Code

<?php

/* Getting file name */
$filename = $_FILES['file']['name'];

/* Location */
$location = 'upload/';

$response = array();
/* Upload file */
if(move_uploaded_file($_FILES['file']['tmp_name'],$location.$filename)){
   $response['name'] = $filename; 
} else{
   $response['name'] = "File not uploaded.";
}
echo json_encode($response);
exit;

4. Conclusion

Both examples are the same only FormData initializing step is different. You can use any of them to upload file to the server with Angular.

You can view this tutorial to know multiple file uploads with AngularJS and PHP.

If you found this tutorial helpful then don't forget to share.

Contents

1. Without Custom directive

2. With Custom directive

3. PHP

4. Conclusion