much better, now with carrierwave

Gemfile

@@ -14,6 +14,7 @@ gem "sassc-rails"
 gem 'haml-rails'
 gem 'html2haml'
 gem 'devise'
+gem 'carrierwave', '>= 3.0.0.beta', '< 4.0'
 
 gem "ruby2js" , path: "../ruby2js"
 

Gemfile.lock

@@ -104,6 +104,13 @@ GEM
       rack-test (>= 0.6.3)
       regexp_parser (>= 1.5, < 3.0)
       xpath (~> 3.2)
+    carrierwave (3.0.0.beta)
+      activemodel (>= 6.0.0)
+      activesupport (>= 6.0.0)
+      addressable (~> 2.6)
+      image_processing (~> 1.1)
+      marcel (~> 1.0.0)
+      ssrf_filter (~> 1.0)
     coderay (1.1.3)
     concurrent-ruby (1.1.10)
     crass (1.0.6)
@@ -285,6 +292,7 @@ GEM
       actionpack (>= 5.2)
       activesupport (>= 5.2)
       sprockets (>= 3.0.0)
+    ssrf_filter (1.1.1)
     tailwindcss-rails (2.0.21-x86_64-linux)
       railties (>= 6.0.0)
     temple (0.9.1)
@@ -318,13 +326,13 @@ PLATFORMS
 DEPENDENCIES
   bootsnap
   capybara
+  carrierwave (>= 3.0.0.beta, < 4.0)
   debug
   devise
   guard
   guard-minitest
   haml-rails
   html2haml
-  image_processing (~> 1.2)
   importmap-rails
   merged!
   mina

app/models/member.rb

@@ -4,6 +4,8 @@ class Member < ApplicationRecord
   devise :database_authenticatable, :registerable,:confirmable,
          :recoverable, :rememberable, :validatable
 
+  mount_uploader :picture, PictureUploader
+
   def admin?
     true
   end

app/uploaders/picture_uploader.rb

@@ -0,0 +1,47 @@
+class PictureUploader < CarrierWave::Uploader::Base
+  # Include RMagick or MiniMagick support:
+  # include CarrierWave::RMagick
+  include CarrierWave::MiniMagick
+
+  # Choose what kind of storage to use for this uploader:
+  storage :file
+  # storage :fog
+
+  # Override the directory where uploaded files will be stored.
+  # This is a sensible default for uploaders that are meant to be mounted:
+  def store_dir
+    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
+  end
+
+  # Provide a default URL as a default if there hasn't been a file uploaded:
+  # def default_url(*args)
+  #   # For Rails 3.1+ asset pipeline compatibility:
+  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
+  #
+  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
+  # end
+
+  # Process files as they are uploaded:
+  # process scale: [200, 300]
+  #
+  # def scale(width, height)
+  #   # do something
+  # end
+
+  # Create different versions of your uploaded files:
+  # version :thumb do
+  #   process resize_to_fit: [50, 50]
+  # end
+
+  # Add an allowlist of extensions which are allowed to be uploaded.
+  # For images you might use something like this:
+  # def extension_allowlist
+  #   %w(jpg jpeg gif png)
+  # end
+
+  # Override the filename of the uploaded files:
+  # Avoid using model.id or version_name here, see uploader/store.rb for details.
+  # def filename
+  #   "something.jpg" if original_filename
+  # end
+end

app/views/members/edit.html.haml

@@ -5,41 +5,41 @@
   .flex.flex-col
     %h1 Editing member
 
-    = form_for @member do |f|
+= form_for @member do |f|
-      .flex.flex-col
+  - if @member.errors.any?
-        - if @member.errors.any?
+    #error_explanation
-          #error_explanation
+      %h2= "#{pluralize(@member.errors.count, "error")} prohibited this member from being saved:"
-            %h2= "#{pluralize(@member.errors.count, "error")} prohibited this member from being saved:"
+      %ul
-            %ul
+        - @member.errors.full_messages.each do |message|
-              - @member.errors.full_messages.each do |message|
+          %li= message
-                %li= message
 
-      .grid.grid-cols-3.gap-10
+  .grid.grid-cols-3.gap-10.mx-20
-        .field
+    .field
-          = f.label :name
+      = f.label :name
-          = f.text_field :name
+      = f.text_field :name
-        .field
+    .field
-          = f.label :public
+      = f.label :public
-          = f.check_box :public
+      = f.check_box :public
-        .field
+    .field
-          = f.label :picture
+      = f.label :picture
-          = f.file_field :picture
+      = f.file_field :picture
-        %div
+    .preview.prose
-          -if @member.picture
+      %b.text-2xl Preview
-            %div.overflow-hidden
+      %div{"v-html" => "compiledMarkdown"}
-              .my-5 Currently
+    .field.flex.flex-col
-              = image_tag @member.picture, class: "object-contain h-40"
+      = f.label :bio
-          -else
+      = f.text_area :bio ,rows: 15 , "v-model" => "markdown"
-            No Picture
-        .field
-          = f.label :bio
-          = f.text_area :bio , "v-model" => "markdown"
-        .preview.prose
-          %div{"v-html" => "compiledMarkdown"}
 
-      .flex.justify-center.actions.m-10
+    %div
-        = f.submit 'Save'
+      -if @member.picture_url
-        .ml-20= link_to 'Back', member_path(@member)
+        %div.overflow-hidden
+          .my-5 Currently
+          = image_tag @member.picture_url, class: "object-contain h-40"
+      -else
+        No Picture
+  .flex.justify-center.actions.m-10
+    = f.submit 'Save'
+    .ml-20= link_to 'Back', member_path(@member)
 
 :ruby2js
   class Mark < Vue

app/views/members/show.html.haml

@@ -5,9 +5,9 @@
   %div
     %b Public:
     = @member.public
-  -if @member.picture
+  -if @member.picture_url
     %div.overflow-hidden.items-align-right
-      = image_tag @member.picture, class: "object-contain h-80"
+      = image_tag @member.picture_url, class: "object-contain h-80"
   %div.prose= markdown(@member.bio)
 
   = link_to 'Edit', edit_member_path(@member)