Easiest way to upload image in laravel with TinyMCE

In this tutorial you learn

1. Front end code for laravel tinymce

2. Controller code and route

3. Things to remember when you upload image using tinymce

4. 419 error (if tinymce image upload is not working)

The tutorial is actually based on real server. It's not on localhost. So if you are having struggle to upload images with TinyMCE to server, it's the right tutorial.

1. Front end code for laravel TinyMCE

When you want tinymce upload image laravel, you should add the script at the top like the code below. And in your tinymce image_class_list, you should mention "img-responsive", for the images to be responsive on mobile device.

<script src="https://cdn.tiny.cloud/1/nnd7pakaxqr7isf3oqefsdlew1jsidgl78umfeus6tg21ng0/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

<script>
        tinymce.init({
            selector: 'textarea',

            image_class_list: [
            {title: 'img-responsive', value: 'img-responsive'},
            ],
            height: 500,
            setup: function (editor) {
                editor.on('init change', function () {
                    editor.save();
                });
            },
            plugins: [
                "advlist autolink lists link image charmap print preview anchor",
                "searchreplace visualblocks code fullscreen",
                "insertdatetime media table contextmenu paste imagetools"
            ],
            toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image ",

            image_title: true,
            automatic_uploads: true,
            images_upload_url: '/upload',
            file_picker_types: 'image',
            file_picker_callback: function(cb, value, meta) {
                var input = document.createElement('input');
                input.setAttribute('type', 'file');
                input.setAttribute('accept', 'image/*');
                input.onchange = function() {
                    var file = this.files[0];

                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function () {
                        var id = 'blobid' + (new Date()).getTime();
                        var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
                        var base64 = reader.result.split(',')[1];
                        var blobInfo = blobCache.create(id, file, base64);
                        blobCache.add(blobInfo);
                        cb(blobInfo.blobUri(), { title: file.name });
                    };
                };
                input.click();
            }
        });
</script>

2. Controller code and route

Controller code

public function upload(Request $request){
        $fileName=$request->file('file')->getClientOriginalName();
        $path=$request->file('file')->storeAs('uploads', $fileName, 'public');
        return response()->json(['location'=>"/storage/$path"]); 
        
        /*$imgpath = request()->file('file')->store('uploads', 'public'); 
        return response()->json(['location' => "/storage/$imgpath"]);*/

    }

Route code

Route::post('/upload', 'PostTasksController@upload');

3. Things to remember when you upload image using TinyMCE

You need to have an action name in your blade within TinyMCE script. In my case the action name is upload.
You need to have a router name and a method for uploading images. In my case it's upload, I have used the similar name as action. You can choose a different name.
A new folder would be created under storage/app/public folder. It would be the name you mention in store() method.
You need to add "storage" with your path name. In my case it's "storage/$imgpath".
You also need to run an artisan command.

php artisan storage:link

Learn the difference between store and storeas method in laravel

4. 419 error

If you get 419 error, there could be several reasons. First one could be that your files are not writable by apache/ngixn. Move your folder where the web servers can write. Then you need to provide them access using below command

chmod -R 775 storage

If 775 did not work, you can try 777. But 777 is not a good idea in real world server.

If the above storage permission did not help you, then run the below command

chown -R www-data: /path-to-project

Even after that, you get 419 error, In your Http/Middleware folder there is a file called VerifyCsrToken.php, add the code as

   protected $except = [
        //
        '/upload',
        
    ];

This means that, you are telling laravel ,don't verify this data upload through csrf_field() verification. By default, laravel use csrf_field() verification method for every http post action. Tinymce laravel image upload may fail if you wont have this mentioned.

If none of these above command help you, check out the must know Laravel command after a fresh installation

Build a complete backend of Laravel