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.


<!DOCTYPE html>
  <title>Angularjs Image Uploading -</title>
  <script src=""></script>
<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" />
	  <img ng-src="{{final_img_path}}" style="width:300px;">

	<!-- 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];

			  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


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

		    flrd.onload = function(event) {
		      $scope.final_img_path =
		      $scope.$apply(function($scope) {
		        $scope.files = element.files;



PHP Code

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

		$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;
		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
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donโ€™t forget to share.