AngularJS upload files using php – upload and display image using FileReader with example
In this post, we will going to show you how to how use AngularJS upload files using php, and it will show upload image with preview selected image to make sure that you are going to upload valid images is perfect or not using AngularJS and PHP.
Here in this demo/example and code for AngularJS upload files, we will demonstrate to you, generally accepted methods to make your own particular custom administration for basic usefulness to reuse code in over controller.
I here utilize basic HTML for information controls and utilize AngularJS for posting record information on server utilizing $http benefit that is a center administration of AngularJS for giving office to impart the remote HTTP servers.
This is extremely straightforward case to transfer any pictures over servers and you can without much of a stretch execute this code in over application.
To deal with shape information on server, i make a PHP petition for moving records into a catalog.
So you should make a pictures registry on root first and afterward make two records : index.html and upload.php
index.html for AngularJS upload files using php
this is code for index.html for AngularJS upload files using php. this code is use for upload and display image using FileReader with AngularJS. In following code of uplode file , we will see we create a service uploadFile and where we need it then we will inject or transfer this service in that controller.
<!DOCTYPE html>
<html>
<head>
<title>AngularJS upload files using php - upload and display image using AngularJS example - onlinecode</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
</head>
<body ng-app="myUploadApp" ng-controller="ImageUploadController">
<input type="file" ng-model="myUplodeFile" class="form-control" accept="image/*" onchange="angular.element(this).scope().uploadedFile(this)">
<button ng-click = "calluploadFile()">Upload File</button>
<br/><br/>
<img ng-src="{{uri}}">
<script type="text/javascript">
var myUploadApp = angular.module('myUploadApp',[]);
// Here we write a custom service for upload file to reuse it in the controller
myUploadApp.service('calluploadFile', ['$http', function ($http) {
this.uploadFiletoServer = function(file, uploadUrl){
var fdUpload = new FormData();
fdUpload.append('file', file);
$http.post(uploadUrl, fdUpload, {
transformRequest: angular.identity,
headers: {'Content-Type': undefined,'Process-Data': false}
})
.success(function(datas){
alert(datas);
})
.error(function(){
alert("Error in ajax call");
});
}
}]);
myUploadApp.controller('ImageUploadController', ['$scope', 'calluploadFile', function($scope, calluploadFile){
$scope.calluploadFile = function() {
$scope.myUplodeFile = $scope.files[0];
var files = $scope.myUplodeFile;
var uri = "send_upload.php";
calluploadFile.uploadFiletoServer(files, uri);
};
$scope.uploadedFile = function(element) {
var readers = new FileReader();
readers.onload = function(event) {
$scope.$apply(function($scope) {
$scope.files = element.files;
$scope.uri = event.target.result
});
}
readers.readAsDataURL(element.files[0]);
}
}]);
</script>
</body>
</html>
send_upload.php for AngularJS upload files using php
this is code for send_upload.php for AngularJS upload in to server. this code is use for upload to server and send replay to AngularJS ajax result.
<?php
// check file is upload
if(!empty($_FILES['file'])){
$get_files = pathinfo($_FILES['file']['name'],PATHINFO_EXTENSION);
$image_data = time().'.'.$get_files;
move_uploaded_file($_FILES["file"]["tmp_name"], 'images/'.$image_data);
echo $image_data." successfully uploaded";
}else{
echo "Invalid or Empty File/Format";
}
?>You also like AngularJs Pass Data to $http.get request AND AngularJs Call Function on Page Load with example