I am trying to learn angularJS by reading some tutorials, at this stage i'm trying to create a form with multiple upload files (2 separate ones). I thought of using the ng-file-upload plugin.

I'm stuck with the below problems,

1) How can i pass values from 2 separate file uploads?

<input type="file" name="profile_pic" ng-file-select="onFileSelect">
<input type="file" name="document" ng-file-select="onFileSelect2">

2) How do i capture the files separately into a PHP file?

HTML

<form enctype="multipart/form-data" method="post" >
 <input type="text" ng-model="name">
 <input type="text" ng-model="age">
 <input type="text" ng-model="title"> 
 <input type="file" name="profile_pic" ng-file-select="onFileSelect">
 <input type="file" name="document" ng-file-select="onFileSelect2">
 <input type='button' ng-click='onFormSubmit' value='Submit'>
</form>

Javascript

angular.module('myApp', ['ngFileUpload']);

var MyCtrl = [ '$scope', 'Upload', function($scope, Upload) {
  $scope.onFileSelect = function(file) {

Upload.upload({
    url: 'api/upload-data.php', 
    method: 'POST',
    file: file,
    data: {
        'name': $scope.name,
        'age' : $scope.age ,
        'title' : $scope.title ,


    }
})

  };
}];

PHP

 //does not show the files
  var_dump($_FILES);
  $filename = $_FILES['file']['name'];
  move_uploaded_file( $_FILES['file']['tmp_name'] , '/uploads');

  //shows the input texts
  var_dump($_POST)
share|improve this question
    
Multiple files are best uploaded with separate XHR POSTs. If they must be uploaded together in one POST, use content type multipart/form-data. Avoid application/x-www-form-urlencoded because percent-encoding create 3 text bytes for each binary byte. – georgeawg Jan 12 at 20:22
    
@georgeawg i added multipart/form-data but in my angular code how can i pass both files and capture them in php? – Learner Jan 13 at 5:56
    
Have you seen the example? It's linked in the README. jsfiddle.net/danialfarid/huhjo9jm/5 – Jasny - Arnold Daniels Jan 13 at 6:33
    
yep... but it has only one input which allows to select multiple files. but i need to have 2 (or more) separate input files. eg: one input only for images, one input for documents... – Learner Jan 13 at 6:44
    
Create a FormData object and append the data and files to that object. See MDN Web API Reference - FormData. Be sure to set Content-Type: undefined so that the XHR API has the freedom to include the proper media boundary. When the XHR API sends a FormData object, it sets the Content-Type with the proper boundary and encodes the data in base64. – georgeawg Jan 13 at 9:40

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.