WYSIWYG image upload

I am creating a forum and using Trumbowyg text editor for thread and comment textareas. I want my users to be able to upload images to comments and threads using Trumbowyg's upload plugin but I am having trouble understanding the documentation (https://alex-d.github.io/Trumbowyg/demos/plugins/upload.html).

How can I allow users to add multiple images and store them in my database? I understand that I should change the serverPath to a route that would catch the image upload post request. I don't understand why the fileFieldName is set to 'image' in this example, because when I inspect it with Dev Tools the file upload input name is 'file'.

The code from Trumbowyg's documentation:

$('#editor')
.trumbowyg({
    btns: ['upload'],
    plugins: {
        // Add imagur parameters to upload plugin for demo purposes
        upload: {
            serverPath: 'https://api.imgur.com/3/image',
            fileFieldName: 'image',
            headers: {
                'Authorization': 'Client-ID xxxxxxxxxxxx'
            },
            urlPropertyName: 'data.link'
        }
    }
});

Or is there an alternative WYSIWYG editor with a simpler image upload option?

kundefine

7 years ago

Level 2

I think u need something below in your html and your script

<meta name="csrf-token" content="{{ csrf_token() }}">

<script>
$('#editor')
.trumbowyg({
    btns: ['upload'],
    plugins: {
        // Add imagur parameters to upload plugin for demo purposes
        upload: {
            serverPath: 'https://api.imgur.com/3/image',
            fileFieldName: 'image',
            headers: {
                   'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            urlPropertyName: 'data.link'
        }
    }
});
</script>

divinulledivi

7 years ago

Level 7

@KUNDEFINE - I'm still getting an error :/ I would actually like to save images to my database, but I can't even get this example to work.

kundefine

7 years ago

Level 2

@MEMELE - where u getting the error. are you trying upload the image in your file or you want to store the image in database as base64 file

divinulledivi

7 years ago

Level 7

@KUNDEFINE - I want to save the file to storage and save the file path in my database. With the code above I'm getting this error - https://imgur.com/a/036g37F but nothing in the console.

diegoaurino

7 years ago

Best Answer

Level 39

@MEMELE - Hello, @memele!

Are you using Jquery or Vue?

There is a package for Vue called vue-trumbowyg. I've used Trumbowyg before, but I found TinyMCE a much better option.

FileFieldName means the key expected by your $request->file('key').

For example,

$path = $request->file('image')->store($dir);.

A simple store method in your controller for image uploads would look like this:

    public function store(Request $request)
    {
        $dir = 'public/images';
        $path = $request->file('image')->store($dir);
        $name = str_replace("$dir/", '', $path);
        $response = [
            'success' => true,
            'url' => asset("storage/images/" . $name)
        ];

        return response()->json($response);
    }

This will return a response to your front-end with "url" and "success". You actually don't need to store the path in the database, since it will be stored in the body as a img tag that includes the src attribute.

The docs for Trumbowyng says it expects a JSON response like that.

{
    success: true, // Must be false if upload fails
    url: 'https://example.com/myimage.jpg'
}

So, my suggestion should fit your needs. Take a look: https://alex-d.github.io/Trumbowyg/documentation/plugins/#plugin-upload

Also, make sure you have properly set your back-end API to receive this post request.

Hope this reply helps you. Let me know if so.

Please or to participate in this conversation.