• Home

  • Episodes

  • About

  • Login
    •

    David Kimura PRO
    Joined 7/18/2015
    Drifting Ruby Owner
    Ruby Rogues Panelist
    David Kimura PRO said almost 3 years 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',
    0 0 0
    David Kimura PRO said almost 3 years ago on Hotwire Modals :
    How was bootstrap installed? I created the new app with

    rails new example --javascript esbuild --css bootstrap
    1 0 0
    David Kimura PRO said almost 3 years ago on AWS App Runner :
     ☒ Try refreshing the page. I did make a change a week ago in how the videos are delivered, but haven't experienced any issues with it since. I've added some CORS settings to be a bit more permissive.
    0 0 0
    David Kimura PRO said almost 3 years ago on Hotwire Modals :
     ☒ I tested out this method with Importmaps while using the bootstrap CDN resources and it seems to work the same.

    In the application layout, I included both the CDN endpoints for the CSS and JS. When including the JS, it does set window.bootstrap for us.

      <head>
    <title>Drifting Ruby</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>
    1 0 0
    David Kimura PRO said almost 3 years ago on Hotwire Modals :
    Yea, I noticed it in post, but it was a bit late to go back and fix the video. Easter Eggs! However, I did get it correct in the show notes. 😊
    0 0 0