much better, now with carrierwave

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