Image Upload in Laravel
Image Upload in Laravel
Image Upload in Laravel
I find myself adding image upload and resize feature in most of the app I build. Laravel comes already packed
with very easy file upload, but things get complicated as soon we need to manipulate the uploaded image. In
this post, I will show you how you can make uploading and resizing image process buttery smooth.
A typical app has some sort of controller where it checks if the request has a file to upload. After uploading we
need to resize it and then clean up old files and update the database with the new uploaded image path. A
simple solution will be something like this:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Intervention\Image\Facades\Image;
]);
$user = auth()->user();
$filename = 'uploads/avatar-'.$user->id.'.jpg';
Image::make($request->file('avatar'))
->fit(200, 200)
->save($filename, 80);
// update model
$user = auth()->user();
$oldAvatar = $user->avatar;
unlink($oldAvatar);
return [
];
Now it’s not that bad but we can do better. We will be using qcod/laravel-imageup to make this process
smooth.
The qcod/laravel-imageup is a trait which gives you auto upload, resize and crop for image feature with
tons of customization.
Installation
You can install the package via composer:
The package will automatically register itself. In case you need to manually register it you can by adding it
in config/app.php providers array:
QCod\ImageUp\ImageUpServiceProvider::class
It will create config/imageup.php with all the settings you can customize.
Configuration
Now we have the package, let’s hook it with our User model to handle the avatar uploading functionality.
use QCod\ImageUp\HasImageUploads;
/**
* @var array
*/
'avatar' => [
];
//...
That’s it, to give you upload functionality. Now in our UserController you can just make a request with the
image file to upload and resize and do all the things we have done earlier automatically in just 2 line of code.
$user = auth()->user();
$user->update($request->all());
return $user;
As soon Model::saved() event fired this will check for any file named avatar in the $request. If it’s find it, it
will auto upload and crop it based on the configuration we have provided in User model $imageFields field
definition.
If you look into the $imageFields array of the User model, you can see we have provided ['width' => 160,
'height' => 160, 'crop' => true]. Which tells to crop the image on that size. If you omit the crop option
image will be resized by keeping the aspect ratio of the image.
Make sure you have disabled auto upload by setting protected $autoUploadImages = false; on model or
by calling $model->setImagesField(['avatar' => ['auto_upload' => false]); otherwise you will be
not seeing your manual uploads, since it will be overwritten by auto upload upon model save.
$user = User::findOrFail($id);
$user->uploadImage(request()->file('avatar'), 'avatar');
// or
$user->uploadImage(request()->file('avatar'));
Upload image for given $field, if $field is null it will upload to first image option defined on the
Models imageFields array.
Resize
If you have an image already you can call this method to resize it with the same options we have used for
image fields.
$user = User::findOrFail($id);
// resize image, it will give you resized image, you need to save it
$imageFile = '/images/some-big-image.jpg';
Crop Image
You can use this cropTo($x, $y) method to set the x and y coordinates of cropping. It will be very useful if
you are getting coordinate from some sort of front-end image cropping library like CropperJs.
$user = User::findOrFail($id);
$imageFile = request()->file('avatar');
$image = $user->cropTo($coords)
// or you can do upload and resize like this, it will override field options crop setting
$user->cropTo($coords)
->uploadImage(request()->file('cover'), 'avatar');
As you can see It gives you tons of customization and you can manipulate your image any way you want,
Thanks to awesome Intervention Image library which it uses under the hood.
<?php
namespace App;
use QCod\ImageUp\HasImageUploads;
use Illuminate\Database\Eloquent\Model;
use HasImageUploads;
'avatar' => [
// set true to crop image with the given width/height and you can also pass arr
[x,y] coordinate for crop.
// if request file is don't have same name, default will be the field name
],
'cover' => [
//...
];