How to upload images in Laravel and Vue from rich text editor


How to upload images in Laravel and Vue from rich text editor

Very often you will find yourself in a need of a good rich text editor that supports everything out of the box. However, usually, this is not the case, and you either find a new editor to try out or implement the missing features yourself.

Image upload in rich text editors is not always behaving as you want it. Sometimes it stores images in base64 which substantially increases image size and can hinder performance, sometimes it requires an additional paid plugin by the creator, and sometimes it is completely left out.

In this article, we will look into how we can set up some easy image upload to our server from a rich text editor.

We will utilize a couple of packages.

  1. Spatie Laravel-medialibrary -
  2. Surmon China Vue Quill Editor -
  3. Quill Resize Module -

At this point, it would be a good time to install Laravel and Vue dependencies if you haven’t already.

For our example, we will have an article model with a single database field called body. We will create our migration, routes, controller, and views.

First, we create a new migration

php artisan make:migration create_articles_table
public function up()
    Schema::create('articles', function (Blueprint $table) {

In order to create the table, we need to migrate this class

php artisan migrate

We also need an Article model.

class Article extends Model
    protected $fillable = [

Let’s create ArticleController swiftly with artisan command

php artisan make:controller ArticleController

Now we will create three methods and three routes that can be called on the controller.

class ArticleController extends Controller
    public function create()

    public function store(Request $request)

    public function show(Request $request)

And our routes

Route::get('/article', ArticleController@create')->name('article.create');
Route::post('/article/create', ArticleController@store')->name('');
Route::get('/article/{article}', ArticleController@show')->name('');

Let's quickly create our view files. We will create a pages folder inside our views with an Article folder and two blade files: create and show. In create we will place our rich text editor and in the show, we will display saved article from the database.

Let's update our create() method to return the proper view.

public function create()
    return view('pages.article.create');

At this point, we will install vue-quill-editor and image resize module.

npm install vue-quill-editor –save 
npm install quill-image-resize

Now, let’s create a new Vue component called ArticleCreate. Here, we will import quill editor.

In the script part of the component lets import and configure quill editor.

    // Import Quill required dependencies
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    import { quillEditor, Quill } from 'vue-quill-editor'
    import ImageResize from 'quill-image-resize';

    // Register ImageResize module
    Quill.register('modules/imageResize', ImageResize);

    // Set toolbar options
    const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],
        ['blockquote', 'code-block'],

        [{'header': 1}, {'header': 2}],
        [{'list': 'ordered'}, {'list': 'bullet'}],
        [{'script': 'sub'}, {'script': 'super'}],
        [{'indent': '-1'}, {'indent': '+1'}],
        [{'direction': 'rtl'}],

        [{'size': ['small', false, 'large', 'huge']}],
        [{'header': [1, 2, 3, 4, 5, 6, false]}],

        [{'color': []}, {'background': []}],
        [{'font': []}],
        [{'align': []}],
        ['link', 'image', 'video'],

    export default {
        components: {
        data() {
            return {
                form: {
                    body: ''
                editorOption: {
                    modules: {
                        toolbar: {
                            container: toolbarOptions,
                        history: {
                            delay: 1000,
                            maxStack: 50,
                            userOnly: false
                        imageResize: {
                            displayStyles: {
                                backgroundColor: 'black',
                                border: 'none',
                                color: 'white'
                            modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
        methods: {
            onEditorBlur(editor) {
                // console.log('editor blur!', editor)
            onEditorFocus(editor) {
                // console.log('editor focus!', editor)
            onEditorReady(editor) {
                // console.log('editor ready!', editor)
        computed: {
                return this.$refs.myQuillEditor.quill


And let’s add HTML code to our template.

        <label for="rich-text" class="form-label">Content</label>
        <quill-editor v-model="form.body"


In this large chunk of code, we have done the following. We have imported Vue Quill and Image Resize module that we installed. We set the toolbar options for Quill, registered the Image Resize module, and told Quill to use the configurations we just created.

So now save the code and visit

So far it looks good. Seems like our code is working just fine.

Now let’s make a pause in writing code to think about how we are going to make this image upload work. Here is the idea.

We create a custom image handler for the image upload menu in Quill Toolbar. We also create a hidden file type input somewhere in our template which will not be visible to the user.

Then, whenever the user clicks on the upload image button, we prevent the default behavior and instead activate our own file input and let the user select an image.

After the user selects an image, we take the image, convert it to base64, push the base64 string to images array in our data(), we take the current cursor position and insert the image tag with base64 string as the <img src=”base64” /> to quill editor.

After the user saves the article, in the backend we will go through base64 strings in the images array. For every string in the array, with the help of Spatie Media Library, we will create an image file and then replace in the article content the <img src=”base64” /> with the full URL of the newly created image <img src=”url”>.

After we laid out the concept let’s jump to implementing it.

First, let’s add a handler to Quill toolbar configuration

toolbar: {
    container: toolbarOptions,
    handlers: {
        'image': function (value) {
            if (value) {
            } else {
                this.quill.format('image', false);

and let’s create an input with file type and place it beneath Quill editor.

<div class="custom-file d-none">
    <input ref="image" @change="imageUpload($event)" type="file" class="custom-file-input" id="imageUpload" aria-describedby="imageUploadAddon">
    <label class="custom-file-label" for="imageUpload">Choose file</label>

We have to add images array to form in data()

Add imageUpload method

imageUpload(e) {
    if ( !== 0) {

        let quill = this.editor;
        let reader = new FileReader();
        let self = this;
        reader.onloadend = function() {
            let base64data = reader.result; 

            // Get cursor location
            let length = quill.getSelection().index;

            // Insert image at cursor location
            quill.insertEmbed(length, 'image', base64data);

            // Set cursor to the end
            quill.setSelection(length + 1);

From the frontend side, the only thing left to do is to create a save button and to make an ajax request to our backend.

Our button

<button @click="submitForm" class="btn btn-sm btn-success">Save</button>

And our method

        { body: this.form.body, images: this.form.images })
        .then(response => {
            console.log("Response", response)
        .catch(error => {
            console.log("Error", error)

For our backend, we first need to install Spatie Media Library and associate it with Article model.

composer require "spatie/laravel-medialibrary:^7.0.0"

We will publish the migration files

php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="migrations"

and run the migrations with

php artisan migrate

If you run into issues while migrating change the type of following json fields to text.


Now let’s configure our Article model.

use Illuminate\Database\Eloquent\Model;
use Spatie\MediaLibrary\HasMedia\HasMedia;
use Spatie\MediaLibrary\HasMedia\HasMediaTrait;

class Article extends Model implements HasMedia
    use HasMediaTrait;
    protected $fillable = [


Finally, everything is ready to implement the final code to create and replace images.

public function store(Request $request)
    $body = $request->body;
    $images = $request->images;

    // Create a new article
    $article = Article::create([
        'body' => $body

    // If images not empty
    if ($images) {
        foreach ($images as $image)
            // Create a new image from base64 string and attach it to article in article-images collection

            // Get all images as we will need the last one uploaded
            $mediaItems = $article->load('media')->getMedia('article-images');

            // Replace the base64 string in article body with the url of the last uploaded image
            $article->body = str_replace($image, $mediaItems[count($mediaItems) - 1]->getFullUrl(), $article->body);


    return response()->json('Success');

Let’s add some text and an image to our text editor.

We will now finish our method for showing a single article.

public function show(Request $request, Article $article)
    return view('', compact('article'));

Our show.blade.php file.

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">Article</div>

                <div class="card-body">
                    {!! $article->body !!}

Once we click on the save button let’s visit our show route

Sure enough, we have our text and the image we uploaded. Awesome.

Hope you liked this simple image upload. Subscribe to the newsletter if you would like to get a notification when we publish similar articles.

Stay awesome and happy coding.




Show comments


5 min

How to make Laravel authentication

Laravel provides a neat function that quickly generates a scaffold of routes, views, and controllers used for authentication.


7 min

How to install Laravel application

This article will cover how to install and create a local development environment for your Laravel application. There are only a couple of steps that needs to be done.


3 min

How to set appropriate Laravel permissions on Linux server

After publishing your Laravel application to a real web server, you discover then some of your functionalities are failing.