Cropper: sending the cropped image to a laravel route

[kickthemooon]

so I am using your example from the download with main.js, main.css and crop.php. Now i would like to image to be cropped on the client side and be sent to a laravel route instead of the crop.php:

<form class="avatar-form" action="/user/{{ $user->slug }}/avatar" enctype="multipart/form-data" method="post">

the laravel controller method:

public function avatarUpload(Request $request, $slug)
    {
        $user = User::findBySlug($slug);

        $user->clearMediaCollection('avatars');

        $user->addMedia($request->file('file'))->toCollectionOnDisk('avatars', 'avatars');

        return redirect('/user/' . $slug . '/edit');
    }

does anyone have suggestions?

[justclimber]

what's the problem? any errors?
my laravel's controller looks almost the same as yours. just one moment: if you use example with the modal window as a basis, you should retuen json like this:
return ['state' => 200, 'message' => 'success', 'result' => $newUrl];

[fengyuanchen]

Maybe this is the same issue as #489

[stefanzweifel]

@justclimber Do you mind sharing your code? I also tried implementing cropper with a Laravel installation, but my $request->file('file) is always empty.

[justclimber]

@stefanzweifel I used the basic example from the cropper sources with modal window&rotating features with some modifications (at the end I want to create PicturableTrait for models with crop&upload functionality).
I'm afraid I don't know what can I share `cause my code is not ready for publishing yet, but I can point on some issues with Laravel which I met in the past:

1. You can't attach a cropped image to an existing html form and submit it without ajax. You must use ajax & FormData object to submit cropped image, but you can use html form as a basis for js FormData object if you want to send some additional data.
2. You can't use PUT or PATCH method to send a cropped image to the server. I don't know why, but in these cases my request in Laravel won't contain any files. Changing the method to POST had resolved the problem
3. Don't forget the csrf_token in Ajax calls. The best approach for this, imho, to use html META tag with token inside + basic ajax setup script which add this token to all ajax requests (http://laravel.com/docs/5.1/routing#csrf-x-csrf-token)

for more help maybe you should publish more code how you send the image from js and we can sort this out

[stefanzweifel]

@justclimber Thanks for your message. I just toyed around with it, so I neither have code to share.
I will try it again later today.

[stefanzweifel]

Silly me thought I could var_dump the content of the file.
I just had to use $request->file('avatar_file');. My code, if anyone else has starting problems with Laravel and Cropper:

public function upload(Request $request)
{
    $data = json_decode($request->get('avatar_data'), true);
    $file = $request->file('avatar_file');

    if (!empty($file)) {

        $filename   = "generated_filename.jpg";
        $folderPath = "path/to/assets";
        $path       = "$folderPath/$filename";

        \File::makeDirectory($folderPath, $mode = 0777, true, true);

        // http://image.intervention.io/
        Image::make($file)->crop(
            intval($data['height']),
            intval($data['width']),
            intval($data['x']),
            intval($data['y'])
        )->save($path);

        $model->update([
            "image" => $path
        ])

        return [
            'state'   => 200,
            'message' => 'success',
            'result'  => "/$path"
        ];
    }
}

[chungnd10]

@stefanzweifel You are using Intervention, and I want to use Cropper to crop the client-side image and send the coordinates and the original image to the controller for processing. How do you think

[stefanzweifel]

@chungnd10 Sorry, I can't help you with that. I haven't used cropper in the last few years.
If I can read my example from 2015 correctly, the coordinates are availabe in the $data-variable.

Have you tried that?

[chungnd10]

@stefanzweifel Thank you for the reply, I have solved my problem. I used input type = "hidden" and decode base64 in my Controller.