angularjs file upload tutorial – simple image upload with preview example in PHP

angularjs file upload tutorial first of all setup the project structure upload the file and display a preview of the image and call the upload service.

angularjs file upload tutorial

AngularJS File Upload Example & Tutorial for This example uses a Web API controller to upload files. I will be discussing the approach of uploading files using ngResource with AngularJS.

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="pakainfo_v1" ng-controller="ProductCtrl">


	<!-- 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().mediaStore(this)" style="width:399px" >
	  <input type="submit" id="submit" value="Submit" />
	  <br/>
	  <img ng-src="{{final_img_path}}" style="width:300px;">


	</form>
	<!-- Form End -->


	<script type="text/javascript">


	    var app =  angular.module('pakainfo_v1',[]);


	    app.controller('ProductCtrl', function($scope, $http) {


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


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


	      	$http({
			  method  : 'POST',
			  url     : '/do_action.php',
			  processData: false,
			  transformRequest: function (data) {
			      var frmFiles = new FormData();
			      frmFiles.append("image", $scope.form.image);  
			      return frmFiles;  
			  },  
			  data : $scope.form,
			  headers: {
			         'Content-Type': undefined
			  }
		   }).success(function(data){
		        console.log(data);
		   });


	      };


	      $scope.mediaStore = function(element) {
		    $scope.currentFile = element.files[0];
		    var flrd = new FileReader();


		    flrd.onload = function(event) {
		      $scope.final_img_path = event.target.result
		      $scope.$apply(function($scope) {
		        $scope.files = element.files;
		      });
		    }
                    flrd.readAsDataURL(element.files[0]);
		  }


	    });
	</script>


</body>
</html>

PHP Code

images(images is a directory, it should on root path)
do_action.php

<?php
	if(!empty($_FILES['image'])){
		$ext = pathinfo($_FILES['image']['name'],PATHINFO_EXTENSION);
                $final_img = time().'.'.$ext;
                move_uploaded_file($_FILES["image"]["tmp_name"], 'images/'.$final_img);
		echo "Great , Your File or Image uploaded successfully as ".$final_img;
	}else{
		echo "Please Try Again!!, Image Is Empty";
	}
?>

Don’t Miss : File Upload And Sending Data To Backend Using Angular Js

Also Read This ๐Ÿ‘‰   Dependent dropdown example in PHP MySQL

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