AngularJS Image Upload with Preview Example

By Hardik Savani November 5, 2023 Category : PHP Javascript jQuery Angular

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

Read Also: PHP AngularJS Populate Dynamic Dropdown Example
<?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...

Tags :
Previous

Codeigniter Select2 Ajax Autocomplete from Database Example
Next

How to Check Current Password using Hash Check in Laravel?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares