Multiple files upload with AngularJS and PHP

You can allow multiple file selections by creating more than one file element but you can easily do this with just a single file element.

It consumes less space and easy to handle but for this, you need to customize the element.

In this tutorial, I am using AngularJS and PHP to upload multiple files to the servers.

I am creating a custom directive to handle file selection in AngularJS.

Multiple files upload with AngularJS and PHP

Download

HTML
PHP
AngularJS
Conclusion

1. HTML

For enabling multiple files selection add multiple attribute on the type='file' element and also define ng-file='uploadfiles' directive.

To upload the file on a button click define ng-click='upload()' directive.

The <p> is only used to display the response data after the successful upload.

Completed Code

<body ng-app='myapp'>

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

</body>

2. PHP

Create a new upload.php file and a upload folder for storing files.

Find the total number of selected files by counting $_FILES array. Loop on each file for upload and initialize $filename_arr with the file name.

Completed Code

<?php
/* Location */
$location = 'upload/';

// Count total files
$countfiles = count($_FILES['file']['name']);

$filename_arr = array(); 
// Looping all files
for ( $i = 0;$i < $countfiles;$i++ ){
    $filename = $_FILES['file']['name'][$i];  
     
    // Upload file    
    if(move_uploaded_file($_FILES['file']['tmp_name'][$i],$location.$filename)){      
       $filename_arr[] = $filename;
    }
}

$arr = array('name' => $filename_arr);
echo json_encode($arr);

3. AngularJS

Create a custom controller using .directive to handle files and initialize FormData object. Send a $http request where pass the FormData object for uploading.

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(){
 
   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;
   });
 }
 
}]);

4. Conclusion

While enabling multiple files selection make sure to add multiple attribute on the file element and use FormData object to pass the file through $http service request.

You can view this tutorial to know single file upload with AngularJS and PHP.

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

Contents

1. HTML

2. PHP

3. AngularJS

4. Conclusion