For upload file with AngularJS need to send the file by $http service and with the use of 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 a file,
- And in the second, using a custom directive
Then pass it as data in $http service for upload.
Contents
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 triggers the button click.
Within the function get the selected file from the 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 the input element and other codes will be the same as the 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 and an upload folder.
Upload file to upload folder 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/';
$response = array();
/* Upload file */
if(move_uploaded_file($_FILES['file']['tmp_name'],$location.$filename)){
$response['name'] = $filename;
} else{
$response['name'] = "File not uploaded.";
}
echo json_encode($response);
exit;
4. Conclusion
Both examples are the same only FormData initializing step is different. You can use any of them to upload file to the server with Angular.
You can view this tutorial to know multiple file uploads with AngularJS and PHP.
If you found this tutorial helpful then don't forget to share.
hello
I want to upload 4 images using single selection and with one upload button. I tried but not getting solution. please help.
Excelente, me ayudo a resolver el problema que tenia muy bien explicado paso a paso
how can i send custom name for file that send from controller
foe example $scope.photoname = “samplename”;
send it via http and set name from php
i want to upload image and text at same time
How do I upload multiple form data like lets say a signup form having name, email, phone, address and a image in angualr js