Laravel 8.x Vue Js Image Upload Using Image Intervention

Hello Artisan

Now i am working on a project where i made a custom login and registration system in laravel using vue js. There is user image upload option. So now i am going to show you laravel vue image upload example from scratch.

In this image upload with laravel vue js tutorial i will use image intervention. You know  that Intervention Image is an open source PHP image handling and manipulation library. It provides an easier and expressive way to create, edit, and compose images 

So in this laravel vue axios file upload tutorial i will also use v-form for our form validation before submit the form data. I will show you also instant image upload with live preview. We will convert our image file into base64 and then we will convert it into image file using image intervention in our controller.

If you are a web developer, you will know thet in today's web app Image or File upload is a common task. The client requires to image or file upload in his web application like a profile section, product image or many other.

So let's start vue js image upload laravel 7 example from scratch. You can see the preview from below image. 

Preview | Instant image showing and form validation

Step 1 : Install Laravel 8 

Now download laravel 8 fresh project to do it from scratch. You can also integrate it in your existing project. Run below command to download laravel 7.

composer create-project --prefer-dist laravel/laravel blog

Step 2: Create Route

In this step we need to create our route for image upload with vue js in laravel. 

routes/web.php

use Illuminate\Support\Facades\Route;

Route::post('/register','AuthController@process_signup');

Step 3 : Setup User Model

In this step we have to setup our User model. We add mutator here to mutate our password. 

app/User.php

namespace App;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
{
    use Notifiable;

    protected $guarded = [];

    protected $hidden = [
        'password', 'remember_token',
    ];

    protected $casts = [
        'email_verified_at' => 'datetime',
    ];

    public function setPasswordAttribute($value)
    {
        $this->attributes['password'] = \Hash::make($value);
    }
}

Step 4: Create Controller

Now we need to create auth controller to complete image upload using vue js in laravel 7 application. Now create auth controller and paste this below code.

app/Http/Controllers/AuthController.php

namespace App\Http\Controllers;

use App\User;
use Carbon\Carbon;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\View;

class AuthController extends Controller
{   

    public function process_signup(Request $request)
    {
        $this->validate($request, [
            'username' => 'required',
            'avatar' => 'required'
        ]);

        if($request->avatar){

            $name = time().'.' . explode('/', explode(':', substr($request->avatar, 0, strpos($request->avatar, ';')))[1])[1];
            \Image::make($request->avatar)->save(public_path('img/profile/').$name);
            $request->merge(['avatar' => $name]);
           
        }
        
        $user = new User;
        $user->username = $request->username;
        $user->avatar = $name;
        $user->save();
        
        return response()->json(
            [
                'success' => true,
                'message' => 'User registered successfully'
            ]
        );

    }
}

Step 5 : Create Migration

Now we have to migrate our users table. Open open users migration file and paste below code.

database/migration/users

 Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('username')->unique();
            $table->string('avatar');
            $table->rememberToken();
            $table->timestamps();
});

Read also : Laravel 7 Ajax Image Upload with Preview

now run php artisan migrate to migrate this table. Now time to setup vue dependencies. 

Step 6:  Vue Configuration

If you would like to install vue in your laravel 7 project then run following laravel ui composer package command to install.

composer require laravel/ui

and then install vue

php artisan ui vue

now we have to install npm

npm install

Now we have to install v-form in our project to validate form data before submit. So install it

npm i axios vform

Step 7 : Configure app.js

Now open app.js file and paste this below code

require('./bootstrap');

window.Vue = require('vue');

//Import v-from
import { Form, HasError, AlertError } from 'vform'
window.Form = Form;
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)

Vue.component('register-component', require('./components/RegisterComponent.vue').default);

const app = new Vue({
    el: '#app',
});

Step 8 : Create Vue Component

Now we have to create register component to write our view function. So create it and paste this following code to it.

resources/js/components/RegisterComponent.vue

Step 8:  Create Blade File

At last step, we will update our register.blade.php file. in this file we will use app.js file and use it, so let's update.

Step 9 :  Install Image Intervention

To install the most recent version, run the following command.

composer require intervention/image

After you have installed Intervention Image, open your Laravel config file config/app.php and add the following lines. In the $providers array add the service providers for this package.

config/app.php

Intervention\Image\ImageServiceProvider::class

Add the facade of this package to the $aliases array.

'Image' => Intervention\Image\Facades\Image::class

Now the Image Class will be auto-loaded by Laravel.

Publish configuration in Laravel

php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravelRecent"

Now we are ready to run our example app that is vue js laravel 7 image upload tutorial. Just one more thing.

Step 10 :  Create img/profile folder

Now we have to create  img/profile directory in your public folder to store our image. so now create it. After doing it everything is done. So now compile our all javascript file.

npm run watch

Read also : Laravel 6 REST API with JWT Authentication with CRUD

Hope it will work for you. If you face any error, feel free to comment.