- In the first, using JavaScript to select a file,
- And in the second, using a custom directive
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 modelng-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 newupload.php file and an upload directory.Upload file to
upload directory 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/';
/* Upload file */
move_uploaded_file($_FILES['file']['tmp_name'],$location.$filename);
$arr = array("name"=>$filename);
echo json_encode($arr);
4. Conclusion
Both examples are same onlyFormData initializing step is different. You can use any of them to upload file to the server with Angular.If you found this tutorial helpful then don't forget to share.
0 Comments:
Post a Comment