Simple Ajax Image Upload using Laravel and Angularjs

This is an easy way to upload images through ajax request using Laravel and Angularjs

How to Use:

app.js

first we will add angular code:

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

app.controller('uploadsController', function($scope, $http) { $scope.uploadImage = function(files) { var formData = new FormData(); formData.append("file", files[0]); $scope.showLoader = true; response = $http.post('/upload/image', formData, { headers: {'Content-Type': undefined }, transformRequest: angular.identity }).success(function(data) { if(data.success){ $scope.showLoader = false; } }); }); });

<h3>upload.blade.php</h3>
<p>Inside our view in laravel application:</p>
```html
<div ng-controller="uploadsController">
  <input type="file" name="file" onchange="angular.element(this).scope().uploadImage(this.files)">
</div>

We can add a loader image to our view template and show it using ng-show :

```html

```

UploadsController.php

Here I use Intervention Image for the upload process, For more info about integration in Laravel click here..

'uploadImage' function in the backend inside our controller:

```php class UploadsController extends \BaseController {

public function uploadImage(){
	$file = Input::file('file');
	if ($file!=null) {

		$ext = $file->getClientOriginalExtension();
		$image_name = str_random(15).'.'.$ext;
	}

	if (!file_exists(public_path().'/uploads/images')) {
		mkdir(public_path().'/uploads/images');
	}
	
	Image::make(Input::file('file'))->save(public_path().'/uploads/images/'.$image_name);

	return Response::json([ 'success' => true ]);
}

}


<h3>routes.php</h3>
<p>last thing we need is to add our route:</p>
```php
Route::post('upload/image' , 'UploadsController@uploadImage');

thinkdj/simple-image-upload

Simple Ajax Image Upload using Laravel and Angularjs

How to Use:

app.js

UploadsController.php