Image Upload and Resize using Image Intervention in Laravel

[norebro_social_networks icon_layout=”boxed”]

In this tutorial we will cover one of the most used feature Image Upload functionality in any web application over Internet using Laravel 4 and Image Intervention package. Let’s see how we can do Image upload and resizing by allowing people to upload images to our website via a From.

Image Upload Form

Let’s create a view which will contain our upload form with name form.blade.php in app/views/  directory.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
 
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
 
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
 
<style type="text/css">
    /*    --------------------------------------------------
    :: Login Section
    -------------------------------------------------- */
#login {
    padding-top: 50px
}
#login .form-wrap {
    width: 30%;
    margin: 0 auto;
}
#login h1 {
    color: #1fa67b;
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    padding-bottom: 20px;
}
#login .form-group {
    margin-bottom: 25px;
}
#login .checkbox {
    margin-bottom: 20px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
#login .checkbox.show:before {
    content: '\e013';
    color: #1fa67b;
    font-size: 17px;
    margin: 1px 0 0 3px;
    position: absolute;
    pointer-events: none;
    font-family: 'Glyphicons Halflings';
}
#login .checkbox .character-checkbox {
    width: 25px;
    height: 25px;
    cursor: pointer;
    border-radius: 3px;
    border: 1px solid #ccc;
    vertical-align: middle;
    display: inline-block;
}
#login .checkbox .label {
    color: #6d6d6d;
    font-size: 13px;
    font-weight: normal;
}
#login .btn.btn-custom {
    font-size: 14px;
    margin-bottom: 20px;
}
#login .forget {
    font-size: 13px;
    text-align: center;
    display: block;
}
 
/*    --------------------------------------------------
    :: Inputs & Buttons
    -------------------------------------------------- */
.form-control {
    color: #212121;
}
.btn-custom {
    color: #fff;
    background-color: #1fa67b;
}
.btn-custom:hover,
.btn-custom:focus {
    color: #fff;
}
 
/*    --------------------------------------------------
    :: Footer
    -------------------------------------------------- */
#footer {
    color: #6d6d6d;
    font-size: 12px;
    text-align: center;
}
#footer p {
    margin-bottom: 0;
}
#footer a {
    color: inherit;
}
</style>
<section id="login">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="form-wrap">
                <h1>Image Upload</h1>
                    {{ Form::open(array('url' => '/upload','files' => true)) }}
                         
                        <ul class="errors"> 
                        @foreach($errors->all() as $message)
                            <li>{{ $message }}</li>
                        @endforeach
                        </ul>
                         
                        <div class="form-group">
                            {{ Form::label('avatar', 'Avatar',array('class' => 'sr-only')) }}
                            {{ Form::file('avatar') }}
                        </div>
                        
                      
                        {{ Form::submit('Upload', array('class' => 'btn btn-custom btn-lg btn-block')) }}
                      
                    {{ Form::close() }}
 
                </div>
            </div> <!-- /.col-xs-12 -->
        </div> <!-- /.row -->
    </div> <!-- /.container -->
</section>

This Image upload form was built by using laravel 4 Form helpers to generate a simple form with image upload input type by setting ‘files’ => true parameter.

When we accessed the view using our route URL http://domain.com/.

Post Action in Laravel 4 Route or Controller

Let’s dive into the post action code, but before that let’s check whether the image was uploaded or not to do operations on that image file.

  • Check if the image was uploaded or not
  • Let’s find out the file and move it onto our server
  • Using the path of the image on our server, open and resize our Image
  • Save the resized image

Let’s implement these steps either in our Route or Controller

Route::post('/upload', function(){
 
    if (Input::hasFile('avatar'))
    {
        $file = Input::file('avatar');
        $file->move('uploads', $file->getClientOriginalName());
    }
});

The above code covers first 2 steps. We check if an image file named avatar is present or not. If so we move that image into the uploads directory keeping the name it was uploaded with.

Adding Intervention for Image Resizing

To get started with Intervention, add it to our composer.json file.

"require": {
        "laravel/framework": "4.2.*",
        "intervention/image": "dev-master"
    },

And run composer update from the root of our project

composer update

Next, we have to add providers and array aliases names for Intervention package in app/config/app.php file

'Intervention\Image\ImageServiceProvider'
 
'Image' => 'Intervention\Image\Facades\Image'

Resizing Images

With Intervention package installed, we simply need to call the methods to resize the image and save it into our server.

Route::post('/upload', function(){
 
    if (Input::hasFile('avatar'))
    {
        $file = Input::file('avatar');
        $file->move('uploads', $file->getClientOriginalName());
 
        $image = Image::make(sprintf('uploads/%s', $file->getClientOriginalName()))->resize(200, 200)->save();
    }
});

That’s it we have resized the image and saved the image at public/uploads directory. We can add watermark to the image also using another method called insert().

$img->insert('public/watermark.png');

There are a lot of other methods we can try from Image Intervention package please check official documentation.

Thanks

KodeInfo

https://www.kodeinfo.com
Comments to: Image Upload and Resize using Image Intervention in Laravel

    Your email address will not be published. Required fields are marked *

    Attach images - Only PNG, JPG, JPEG and GIF are supported.

    Stay connected

    Categories

    Newsletter

    Tags

    Recent Comments

      Recent Posts

      Recent Comments

        Archives

        Categories

        Meta