Save original and cropped versions when uploading an image in Laravel Backpack Cropper

Question

I'm using Laravel (5.5) with Backpack. Backpack includes the Cropper jQuery plugin that allows you to crop an image prior to upload.

I need to save both the cropped version and the full version of the image on the server. The cropped version is the thumbnail and the full version is the enlarged view.

By default, the Backpack implementation only saves the cropped version of the image. My plan to save the full size is to modify the Backpack view to include an extra hidden field that will consist of the full size image (onsubmit set the value of the hidden field?).

I've read the Cropper documentation but I am not sure which method will return the image data at full size (prior to cropping) and if this data is included with the form submission (don't think it is).

I have two questions:

1. Is the full image already being sent to the server (in addition to the cropped version) and if so, what is the name of the field that holds it?
2. If the above is false, is there a method of the cropper class that will return give me the image data that I can then send to the server in a separate field?

The second question is a bit vague because I'm not really sure how this image upload works (seems to be converted to base64 prior to upload, but that's surprising if it is).

Thanks in advance.

Answer 1

The solution I've ended up with consists of the following:

1. On the client side, I added a hidden field called fullImageData in resources/view/vendor/backpack/crud/fields/image.blade.php. I then added the following lines of JavaScript as an anonymous function on the submit method following the lines that set the value of the cropped version in the same file (about line 189):

   $mainImage.cropper('clear'); $mainImage.cropper('setData', $mainImage.cropper('getImageData')) var fullImageURL = $mainImage.cropper('getCroppedCanvas').toDataURL(file.type); $('#fullImageData').val(fullImageURL);

2. On the server, in the model, add a model property (with any visibility) called fullImageData and a setFullImageDataAttribute mutator to capture the image data (and save it to a file), and finally, add the fullImageData field to the $fillable property of the model.

I hope this helps someone else in the same situation.