AngularJS Image Upload with Preview Example
Sometimes, we require to make image uploading with preview selected image before upload using AngularJS. So, This post will help you how to image or file upload in AngularJS and PHP.
In this example i didn't user any plugin or directive for image upload. It is very simple so you can use very simple and anywhere. For front-end code write in AngularJS and back-end code write in PHP(for image upload code). It will also display preview of image before upload.
Example is working on bellow listed three things, you can see.
1)index.php
2)upload.php
3)images(images is a directory, it should on root path)
After this you can put code like as bellow, so let's see bellow code.
index.php
<!DOCTYPE html>
<html>
<head>
<title>Angularjs Image Uploading</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
</head>
<body ng-app="main-App" ng-controller="AdminController">
<!-- Form Start -->
<form ng-submit="submit()" name="form" role="form">
<input ng-model="form.image" type="file" class="form-control input-lg" accept="image/*" onchange="angular.element(this).scope().uploadedFile(this)" style="width:400px" >
<input type="submit" id="submit" value="Submit" />
<br/>
<img ng-src="{{image_source}}" style="width:300px;">
</form>
<!-- Form End -->
<script type="text/javascript">
var app = angular.module('main-App',[]);
app.controller('AdminController', function($scope, $http) {
$scope.form = [];
$scope.files = [];
$scope.submit = function() {
$scope.form.image = $scope.files[0];
$http({
method : 'POST',
url : '/upload.php',
processData: false,
transformRequest: function (data) {
var formData = new FormData();
formData.append("image", $scope.form.image);
return formData;
},
data : $scope.form,
headers: {
'Content-Type': undefined
}
}).success(function(data){
alert(data);
});
};
$scope.uploadedFile = function(element) {
$scope.currentFile = element.files[0];
var reader = new FileReader();
reader.onload = function(event) {
$scope.image_source = event.target.result
$scope.$apply(function($scope) {
$scope.files = element.files;
});
}
reader.readAsDataURL(element.files[0]);
}
});
</script>
</body>
</html>
upload.php
<?php
if(!empty($_FILES['image'])){
$ext = pathinfo($_FILES['image']['name'],PATHINFO_EXTENSION);
$image = time().'.'.$ext;
move_uploaded_file($_FILES["image"]["tmp_name"], 'images/'.$image);
echo "Image uploaded successfully as ".$image;
}else{
echo "Image Is Empty";
}
?>
Now, you can check this...
