Today, We want to share with you angularjs image upload with preview.In this post we will show you upload and display image in angularjs, hear for multiple image upload with preview and delete angularjs we will give you demo and example for implement.In this post, we will learn about angularjs file upload example with an example.

Preview Image before uploading Angularjs

Contents

1)index.php
2)do_profile_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.

Angularjs image upload example using PHP

index.php

<!DOCTYPE html>
<html>
<head>
  <title>Angularjs Image Uploading - www.pakainfo.com</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="MemberController">


	<!-- 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('MemberController', function($scope, $http) {


	      $scope.form = [];
	      $scope.files = [];


	      $scope.submit = function() {
	      	$scope.form.image = $scope.files[0];


	      	$http({
			  method  : 'POST',
			  url     : '/do_profile_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>

do_profile_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 "Profile Image uploaded successfully as ".$image;
	}else{
		echo "Profile Image Is Empty";
	}
?>

I hope you get an idea about angularjs image upload demo.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Preview Image before uploading Angularjs

Angularjs image upload example using PHP

Related posts: