Laravel / vue-froala-wysiwyg integration

1
votes

I'll like to implemente the image upload system within my Laravel/VueJS project but I can't find a right way to do so. How can I set up my Controller function in order to handle this upload?

Edit:

This is my Editor configuration:

config: {
    imageUploadParam: 'imageFile',
    imageUploadURL: '/froala/upload/image',
    imageUploadMethod: 'POST',
    imageMaxSize: 5 * 1024 * 1024,
    imageAllowedTypes: ['jpeg', 'jpg', 'png'],
}

And this is the function that handles the request:

public function uploadImage(Request $request)
{
    $file = $request['imageFile'];

    $name = $file->getClientOriginalName();
    $name = strtolower(str_replace(' ', '', $name));

    $path = $file->hashName();
    $image = Image::make($file);

    Storage::put("/threads/{$path}", (string) $image->encode());

    $multimedia = Multimedia::create([
        'name' => $name,
        'path' => $path
    ]);

    return ['link' => $multimedia->path];
}

I am using the Intervention Image library to handle the image upload.

Edit 2:

I'm getting an 419 error related with the csrf token. So, how can i pass it to the function? I know how to get it but using the imageUploadParams configuration of the editor is not working:

imageUploadParams: {
    csrf: this.csrf
}

csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
3
laravelvue.jsfroala

3 Answers

1
votes

You need to pass the correct X-CSRF-TOKEN value to avoid the 419 error.

First check that you have the token defined the in the meta header with something like:

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

Early in your VueJS add:

var csrf_token = $('meta[name="csrf-token"]').attr('content');

Then add the following to your Froala config section:

 config: {
    requestHeaders: {
      'X-CSRF-TOKEN': csrf_token
    },

Media files should now pass through to your media upload function in Laravel.

0
votes

From the documentation :

When an image is inserted into the WYSIWYG HTML editor, a HTTP request is automatically done to the server.

The specific URL that the request will be made to can be specified using the imageUploadURL config option.

Setup your routes.php file to properly direct the request to your controller of choice : 

Route::post('/upload', 'FilesController@store');

Then, in your controller you can handle the image upload like you would normally. The important part is that you return the path to the file after you've saved it.

The returned JSON needs to look like: { "link": "path/to/image.jpg" }

Here is an example of what that could look like : 

public function store(){
    $filepath = request()->file('file')->store('images', 'public');
    return ['link' => $filepath];
}

Of course, feel free to do any kind of validation or processing that you need.

0
votes

instand of

imageUploadParams: {
    csrf: this.csrf
}

use this

imageUploadParams: {
    _token: this.csrf
}

Check this out From Documentation