Upload file with AngularJS and PHP

For upload file with AngularJS need to send the file by $http service and with the use 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 file,
  • And in the second, using custom directive

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

Upload file with AngularJS and PHP


Contents

  1. Without Custom directive
  2. With Custom directive
  3. PHP
  4. Demo
  5. 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 trigger on the button click.

Within the function get the selected file from 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 input element and other code will be same as 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.

Upload file to upload directory 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/';

/* Upload file */
move_uploaded_file($_FILES['file']['tmp_name'],$location.$filename);

$arr = array("name"=>$filename);
echo json_encode($arr);

 

4. Demo

Browse a file and click the upload button.


 

5. Conclusion

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

Spread the love

Related Post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *