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)
multipart/form-data
. Avoidapplication/x-www-form-urlencoded
because percent-encoding create 3 text bytes for each binary byte. – georgeawg Jan 12 at 20:22multipart/form-data
but in my angular code how can i pass both files and capture them in php? – Learner Jan 13 at 5:56Content-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 theContent-Type
with the proper boundary and encodes the data in base64. – georgeawg Jan 13 at 9:40