Episodes
onurbaran said over 1 year ago on Cropping Active Storage Uploads :
Hi,

Video not showing!

David Kimura PRO said over 1 year ago on Cropping Active Storage Uploads :
Thanks for letting me know   onurbaran  . It should be up now.

cheng ji said over 1 year ago on Cropping Active Storage Uploads :
to avoid image crop on server, 

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.




itsterry PRO said over 1 year ago on Cropping Active Storage Uploads :
Hang on a minute!

crop_width and crop_x are saved as strings, so...

crop_width = '1.0'
crop_x = '2.5'

(crop_width + crop_x).to_f # 1.02

I think you may want..

crop_width.to_f + crop_x.to_f # 3.5
(I haven't refactored that, but I would)

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!

David Kimura PRO said over 1 year ago on Cropping Active Storage Uploads :
  itsterry 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.

daijinara PRO said over 1 year ago on Cropping Active Storage Uploads :
  cheng ji 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
. David Kimura How do you return the getURL() if you use cloud storage service like S3? Or this solution is only for local disk service?

David Kimura PRO said over 1 year ago on Cropping Active Storage Uploads :
  daijinara  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.

cheng ji said about 1 year ago on Cropping Active Storage Uploads :
  David Kimura  


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")
  }

```



 

daijinara PRO said 11 months ago on Cropping Active Storage Uploads :
  David Kimura your original code works better on positioning. 

(crop_width + crop_x).to_f,
(crop_height + crop_y).to_f

jojojomarseille PRO said 8 months ago on Cropping Active Storage Uploads :
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.  

Thanks, wish you a good day



David Kimura PRO said 8 months ago on Cropping Active Storage Uploads :
  jojojomarseille 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 
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

jojojomarseille PRO said 8 months ago on Cropping Active Storage Uploads :
Waw! its exactly that. I feel so dumb to forget to check the css. 
Thanks a lot for your help. 

Travis Listak said 4 months ago on Cropping Active Storage Uploads :
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.


Tom PRO said 3 months ago on Cropping Active Storage Uploads :
  David Kimura 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 :)

Tom PRO said 3 months ago on Cropping Active Storage Uploads :
More information, for those reading above - 7.0.1 issues appear to be related to:

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.



Tom PRO said 3 months ago on Cropping Active Storage Uploads :
  David Kimura  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?

David Kimura PRO said 3 months ago on Cropping Active Storage Uploads :
I did make an update to the show notes on how I got this working for a Rails 7.0.1 application with the token and attachment name.

David Kimura PRO said 3 months ago on Cropping Active Storage Uploads :
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.

--- 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',

Login to Comment