Image Upload using laravel4 and jquery uploader

Note : I am assuming you have laravel installed and ready .. if it is not , check this http://laravel.com/docs/quick#installation

Step 1 :

grab Jquery uploader resources from here : https://github.com/blueimp/jQuery-File-Upload

Step 2 :

in your routes.php , add the following route to handle post request :

Route::post('upload',array('as'=>'upload', 'before'=>'auth','uses'=>'UploadController@index'));

Step 3 :
in the controllers folder , create a new controller called UploadController.php , this will contain the post action that will handle the image upload , it will go as follows :

<?php class UploadController extends BaseController
{
public $restful=true;public function index(){
$valid_exts = array('jpeg', 'jpg', 'png', 'gif'); // valid extensions
$max_size = 2000 * 1024; // max file size (200kb)
$path = public_path() . '/img/'; // upload directory
$fileName = NULL;
if ( $_SERVER['REQUEST_METHOD'] === 'POST' )
{
$file = Input::file('uploaded_img');
// get uploaded file extension
//$ext = $file['extension'];
$ext = $file->guessClientExtension();
// get size
$size = $file->getClientSize();
// looking for format and size validity
$name = $file->getClientOriginalName();
if (in_array($ext, $valid_exts) AND $size < $max_size)
{
// move uploaded file from temp to uploads directory
if ($file->move($path,$name))
{
$status = 'Image successfully uploaded!';
$fileName = $name;
}
else {
$status = 'Upload Fail: Unknown error occurred!';
}
}
else {
$status = 'Upload Fail: Unsupported file format or It is too large to upload!';
}
}
else {
$status = 'Bad request!';
}
// echo out json encoded status
return header('Content-type: application/json') . json_encode(array('status' => $status,
'fileName' => $fileName));
}
}
?>

Step 4 :
And your view will go like this :

<link href="{{asset('css/uploadfile.css')}}" rel="stylesheet">
<script src="{{asset('js/jquery.uploadfile.min.js')}}"></script><script type="text/javascript">
$().ready(function()
{
$("#avatarUploader").uploadFile({
url:"{{route('upload')}}",
allowedTypes:"png,gif,jpg,jpeg",
fileName:"uploaded_img",
onSuccess:function(files,data,xhr)
{
data= $.parseJSON(data); // yse parseJSON here
if(data.error){
//there is an error
} else {
//there is no error
fileName = data['fileName'];
$('#avatar').val(fileName);
}
}
});
});

<div id="avatarUploader">Upload</div>
<input type="hidden" name="avatar" id="avatar"/>

Finally :
You will find your image uploaded at : public/img/

And that’s how to implement image uploading in laravel4 using jquery uploader .Your comments are more than welcome .