Laravel 9 Vue Js Image Upload Example With Preview

Hello Artisan,

In this laravel vue image upload tutorial, I will explain how to upload image in laravel with vue js. I will explain step by step so that you can understand it. I will upload image in vue js with laravel with preview.

That mean when you will select an image for uploading, you will see the preview before uploading it. I will use a fresh laravel 9 application to create this laravel 9 vue js image upload.

I will use image intervention package to manage image in controller and i will send image from client with base64 to controller and i will convert it to image using image intervention package. If you don't know how to upload image in Laravel 9 using vue js then this example is for you. 

Preview | Instant image showing and form validation

Step 1 : Install Laravel 

Now download a fresh laravel 9 project to create laravel vue image upload. You can also integrate it into your existing project. Run the below command to download laravel 9.

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 update the user model like:

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 $fillable = [
          'username',
          'avatar'
    ];

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

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

}

Step 4: Create Controller

Now we need to create auth controller to complete image upload using vue js in laravel 9 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 user's table. Open the user's migration file and paste the 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 set up vue dependencies. 

Step 6:  Vue Configuration

If you would like to install vue in your laravel 9 projects then run the 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 submitting. 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 a register component to write our view function. To create it and paste the following code to it.

resources/js/components/RegisterComponent.vue

Step 9:  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. You can publish configuration file by running below command:

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

Now we are ready to run our example app which is vue js laravel 9 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.

npm run watch

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

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