Multiple files upload with AngularJS and PHP

You can allow multiple files selection by creating more than one file element but you can easily do this with just 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 the AngularJS.

Multiple files upload with AngularJS and PHP


Contents

  1. HTML
  2. PHP
  3. AngularJS
  4. 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 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 directory 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    
    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.

Related Post

Spread the love

Be First to Comment

Leave a Reply

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