☒ very good point. I didn't pick up on it because it looked like the cropping was working as intended, but you're absolutely right that it is best to not try to add strings together, but rather numbers.
☒ Do you think your solution works on cloud storage service? Because I understand that re-sizing the image only works after the image is uploaded .☒ How do you return the getURL() if you use cloud storage service like S3? Or this solution is only for local disk service?
☒ It should work with cloud storage because we're never working with the file directly on the local storage path, but always going through Active Storage.
Hello, first of all, thanks for your videos and your work on this site.
I tried implement cropper js on my project (ROR, with active directory and direct upload, the same way as your video #279 and #280) and its working perfectly in development environment, in local, but impossible to make it works en production on heroku.
After few days struggling, i decided, isolating the issue and try to reproduce and solve the error on a more simple case, so i tried with the source code you provide, i puted on heroku on a free dyno and its the same. its work perfectly in local but not in production on heroku. The error i have is when i upload picture, it appear a preview directly (so blob and active directory direct upload works well) and instead of crop area with checkerboard background, i have the uploaded picture in big and in double. You can check here.
I dont have any error in the console, all the http request are passing, i checked the js (puting console.log everywhere in the js and using debug mode) and all the js looks to work, cropper js seem to be there as i see it in the debug mode.
Its look a bit like if cropperjs didnt initialize. I dont think its my code because it work well in local. Maybe something to set in heroku, maybe config issue with environments. i checked all of this but without success If you have any idea of something i could check, something to read, or if you ever made a crop function work on heroku i would really appreciate your comment.
☒ Since we are using CSS within webpack, (import "cropperjs/dist/cropper.css"), you would also need to add the stylesheet_pack_tag in the application layout. Typically, it would probably be something like this
If you are using Rails 7.0.1 with cssbundler bootstrap:
in javascript/controllers/cropper_controller.js do not use this line `import "cropperjs/dist/cropper.css"`, it will break when you run `yarn build:css` by overwriting your `app/assets/builds/application.css`
Instead: 1. Copy cropper.css from `./node_modules/cropperjs/dist/cropper.css` 2. Paste it into `app/assets/stylesheets/cropper.scss` notice the extension change to scss 3. In `app/assets/stylesheets/application.bootstrap.scss` add `@import cropper;` 4. Run `yarn build:css` and whatever javascript bundler you are using. Everything should work correctly.
☒ Not sure if this is something you can deal with here (or perhaps an update episode for Rails 7), but this appears to be quite broken with Rails 7.0.1 - perhaps there are intervening changes with active storage?
Specifically, choosing an image from the file field, leads to a 500 with the log showing 'ActiveStorage::InvalidDirectUploadTokenError (ActiveStorage::InvalidDirectUploadTokenError):' with the console showing: TypeError: undefined is not an object (evaluating 'blob.signed_id')
(note that using the built-in 'direct_upload: true' on a file field does correctly work and upload, but of course, that doesn't produce nice cropping :)
☒ This doesn't appear to work for editing existing images (you have to reupload a new one, even when in edit view) - is there a quick way to make that work?
You might be able to capture some of the functionality with editing an existing image with something like this. You need to let the stimulus controller know that there is an existing image, so on the cropper controller, an additional value was added "existing". We set this value in the view where we are initializing the stimulus controller. However, it does seem a bit buggy, but this should hopefully help you move forward with this feature.
Video not showing!
we can crop image first, then upload the cropped image.
when file input selected, we can read the the blob of the file
croperjs could get cropped image blob by `cropper.getCroppedCanvas().toBlob`
then upload the blob using active storage.
crop_width and crop_x are saved as strings, so...
I think you may want..
Unless I'm wrong (happy to be wrong: please tell me if so), the version in the episode may trip up a few people
Meant constructively, as ever!
.
Before the file upload to aws, the images have croppied by canvas.
image could transform by html canvas without server, even network.
npm package croppie (https://foliotek.github.io/Croppie/ ) encapsulates the croppie functions
```js
// when user selected a image to file input, trigger this action
editPhoto(e) {
e.preventDefault();
this.editingPhoto = true
this._showEditPanel()
this.croppie = new Croppie(this.croppiePanelTarget, {
url: this.imageTarget.src,
})
}
// crop confirm button action
buildNewPhoto(e){
e.preventDefault();
this.editingPhoto = false
this.croppie.result('blob').then((blob) => {
this.addImage(new File([blob], 'newphoto'))
this.croppie.destroy()
});
this._showOperationsPanel()
}
// ...
addImage(file){
this.imageFile = file;
let that = this;
var reader = new FileReader();
reader.onload = (e1) => {
that.imageTarget.src = e1.target.result
}
reader.readAsDataURL(file)
this.imageTarget.classList.remove("hidden")
}
```
(crop_width + crop_x).to_f,
(crop_height + crop_y).to_f
I tried implement cropper js on my project (ROR, with active directory and direct upload, the same way as your video #279 and #280) and its working perfectly in development environment, in local, but impossible to make it works en production on heroku.
After few days struggling, i decided, isolating the issue and try to reproduce and solve the error on a more simple case, so i tried with the source code you provide, i puted on heroku on a free dyno and its the same. its work perfectly in local but not in production on heroku.
The error i have is when i upload picture, it appear a preview directly (so blob and active directory direct upload works well) and instead of crop area with checkerboard background, i have the uploaded picture in big and in double. You can check here.
I dont have any error in the console, all the http request are passing, i checked the js (puting console.log everywhere in the js and using debug mode) and all the js looks to work, cropper js seem to be there as i see it in the debug mode.
Its look a bit like if cropperjs didnt initialize.
I dont think its my code because it work well in local. Maybe something to set in heroku, maybe config issue with environments. i checked all of this but without success
If you have any idea of something i could check, something to read, or if you ever made a crop function work on heroku i would really appreciate your comment.
Thanks, wish you a good day
Thanks a lot for your help.
in javascript/controllers/cropper_controller.js
do not use this line `import "cropperjs/dist/cropper.css"`, it will break when you run `yarn build:css` by overwriting your `app/assets/builds/application.css`
Instead:
1. Copy cropper.css from `./node_modules/cropperjs/dist/cropper.css`
2. Paste it into `app/assets/stylesheets/cropper.scss` notice the extension change to scss
3. In `app/assets/stylesheets/application.bootstrap.scss` add `@import cropper;`
4. Run `yarn build:css` and whatever javascript bundler you are using. Everything should work correctly.
Specifically, choosing an image from the file field, leads to a 500 with the log showing 'ActiveStorage::InvalidDirectUploadTokenError (ActiveStorage::InvalidDirectUploadTokenError):'
with the console showing:
TypeError: undefined is not an object (evaluating 'blob.signed_id')
(note that using the built-in 'direct_upload: true' on a file field does correctly work and upload, but of course, that doesn't produce nice cropping :)
https://github.com/rails/rails/issues/43971
and
https://github.com/rails/rails/pull/44287/files
It looks like the change that breaks this episode's code (requiring that you specify
constructor(file, checksum, url, directUploadToken, attachmentName)
instead of
constructor(file, checksum, url)
has been reverted, and may make it to a future release, before being redesigned - this episode's code works again on rails main branch, for instance.
--- a/app/javascript/controllers/cropper_controller.js +++ b/app/javascript/controllers/cropper_controller.js @@ -4,11 +4,20 @@ import "cropperjs/dist/cropper.css" export default class extends Controller { static targets = ["image"] - static values = { model: String } + static values = { model: String, existing: String } + + connect() { + if (this.existingValue == "true") { + this.changed() + } + } changed() { let _this = this - new Cropper(this.imageTarget, { + if (this.cropper != undefined) { + this.cropper.destroy() + } + this.cropper = new Cropper(this.imageTarget, { crop(event) { _this.crop_x().value = event.detail.x _this.crop_y().value = event.detail.y diff --git a/app/views/users/_form.html.erb b/app/views/users/_form.html.erb index 9e73386..c4fb40a 100644 --- a/app/views/users/_form.html.erb +++ b/app/views/users/_form.html.erb @@ -17,9 +17,9 @@ <div class="field" data-controller='instant-upload cropper' data-cropper-model-value='user' + data-cropper-existing-value="<%= @user.avatar.attached? %>" data-instant-upload-token-value="<%= direct_upload_token("User#avatar") %>" - data-instant-upload-attachment-value='User#avatar' - > + data-instant-upload-attachment-value='User#avatar'> <%= form.label :avatar %> <%= form.file_field :avatar, 'data-instant-upload-target': 'input',