_form.haml

.row.mb64
  .col-sm-6
    = graphic_present(@post, "small")
  .col-sm-6
    #graphic_upload
    #ProgressBar
    = f.fields_for :image_attributes do |ff|
      = ff.label :alt_text, "Alt Text"
      = ff.text_field :alt_text, value: alt_text(@post)
      = ff.hidden_field :graphic, class: "upload-hidden"

:javascript
  function fileUpload(fileInput) {
    var uppy = Uppy.Core({ autoProceed: true })
      .use(Uppy.FileInput,   { target: '#graphic_upload',
                              pretty: true,
                              inputName: 'uploading_image',}) // adds a pretty file field
      .use(Uppy.ProgressBar, { target: "#ProgressBar" , fixed: false, hideAfterFinish: true}) // displays a progress bar
      .use(Uppy.Informer,    { /* ... */ }) // displays validation errors

    uppy.use(Uppy.AwsS3, {
      getUploadParameters: function (file) {
        return fetch('/presign?filename=' + file.name, {
            credentials: 'same-origin', // send cookies
          })
          .then(function (response) { return response.json() })
      }
    })
    uppy.on('upload-success', function (file, data, uploadURL) {
    var uploadedFileData = JSON.stringify({
      id: uploadURL.match(/\/cache\/([^\?]+)/)[1], // extract key without prefix
      storage: 'cache',
      metadata: {
        size:      file.size,
        filename:  file.name,
        mime_type: file.type,
      }
    })

    // set hidden field value to the uploaded file data so that it's submitted with the form as the attachment

  var hiddenInput = document.getElementById('post_image_attributes_graphic')
      hiddenInput.value = uploadedFileData
  })

    return uppy
  }

  document.querySelectorAll('#graphic_upload').forEach(function (fileInput) {
    fileUpload(fileInput)
  })

image_uploader.rb

class ImageUploader < Shrine
  include ImageProcessing::MiniMagick
  plugin :activerecord
  plugin :cached_attachment_data # for retaining the cached file across form redisplays
  plugin :restore_cached_data # re-extract metadata when attaching a cached file
  plugin :determine_mime_type
  plugin :remove_attachment
  plugin :processing
  plugin :versions
  plugin :delete_raw

  process(:store) do |io, context|
      versions = { original: io } # retain original
      io.download do |original|
        pipeline = ImageProcessing::MiniMagick.source(original)

        versions[:large]  = pipeline.resize_to_limit!(800, 600)
        versions[:medium] = pipeline.resize_to_limit!(640, 480)
        versions[:small]  = pipeline.resize_to_limit!(400, 300)
      end

      versions # return the hash of processed files
    end
end

local.log

#this is the log I have in my local dev

Started GET "/presign?filename=4-week-class-1.jpg" for 127.0.0.1 at 2018-12-05 22:25:27 -0600
Started PATCH "/admin/categories/discuss-and-connect/submenus/discuss-submenu/subcategories/discuss-subcategory/posts/foobar" for 127.0.0.1 at 2018-12-05 22:25:41 -0600
Processing by Admin::PostsController#update as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"uKomBXiEYLtK4SBfuxYZQGP6Rkb9NvTlznYzfd7MS8bYGUm3HTLHi2G6IO1yJ8O2ZNZL/Bys1mMPbpmNf3LcoA==", "post"=>{"meta_description"=>"foobar bar", "meta_keywords"=>"", "title"=>"foobar", "excerpt"=>"this is the excerpt", "category_id"=>"1", "submenu_id"=>"40", "subcategory_id"=>"21", "author"=>"Testing", "image_attributes"=>{"alt_text"=>"Please Enter Alt Text", "graphic"=>"{\"id\":\"844f86469464d4f9e562365b91a17c1a.jpg\",\"storage\":\"cache\",\"metadata\":{\"size\":1975663,\"filename\":\"4-week-class-1.jpg\",\"mime_type\":\"image/jpeg\"}}"}, "content"=>"<p>treretrtertrtetrtr</p>"}, "uploading_image"=>"", "commit"=>"Update Post", "category_id"=>"discuss-and-connect", "submenu_id"=>"discuss-submenu", "subcategory_id"=>"discuss-subcategory", "id"=>"foobar"}
  Membership Load (0.3ms)  SELECT  "memberships".* FROM "memberships" WHERE "memberships"."id" = $1 LIMIT $2  [["id", 51], ["LIMIT", 1]]
  Category Load (0.2ms)  SELECT  "categories".* FROM "categories" WHERE "categories"."slug" = $1 LIMIT $2  [["slug", "discuss-and-connect"], ["LIMIT", 1]]
  Submenu Load (0.4ms)  SELECT  "submenus".* FROM "submenus" WHERE "submenus"."slug" = $1 LIMIT $2  [["slug", "discuss-submenu"], ["LIMIT", 1]]
  Subcategory Load (0.2ms)  SELECT  "subcategories".* FROM "subcategories" WHERE "subcategories"."slug" = $1 LIMIT $2  [["slug", "discuss-subcategory"], ["LIMIT", 1]]
  Post Load (0.4ms)  SELECT  "posts".* FROM "posts" WHERE "posts"."slug" = $1 LIMIT $2  [["slug", "foobar"], ["LIMIT", 1]]
   (0.1ms)  BEGIN
  Image Load (0.2ms)  SELECT  "images".* FROM "images" WHERE "images"."imageable_id" = $1 AND "images"."imageable_type" = $2 LIMIT $3  [["imageable_id", 1], ["imageable_type", "Post"], ["LIMIT", 1]]
  Subcategory Load (0.3ms)  SELECT  "subcategories".* FROM "subcategories" WHERE "subcategories"."id" = $1 LIMIT $2  [["id", 21], ["LIMIT", 1]]
  Image Update (0.4ms)  UPDATE "images" SET "graphic_data" = $1, "updated_at" = $2 WHERE "images"."id" = $3  [["graphic_data", "{\"id\":\"844f86469464d4f9e562365b91a17c1a.jpg\",\"storage\":\"cache\",\"metadata\":{\"size\":1975663,\"filename\":\"4-week-class-1.jpg\",\"mime_type\":\"image/jpeg\"}}"], ["updated_at", "2018-12-06 04:25:42.918140"], ["id", 1]]
   (40.7ms)  COMMIT
2018-12-06T04:25:43.356Z 49281: DELETE[replace] ImageUploader[:graphic] Image[1] 4 files (0.4s)
2018-12-06T04:25:47.487Z 49281: PROCESS[store] ImageUploader[:graphic] Image[1] 1-4 files (4.13s)
2018-12-06T04:25:54.752Z 49281: STORE[store] ImageUploader[:graphic] Image[1] 4 files (7.26s)
   (0.3ms)  BEGIN
  Image Update (0.3ms)  UPDATE "images" SET "graphic_data" = $1, "updated_at" = $2 WHERE "images"."id" = $3  [["graphic_data", "{\"original\":{\"id\":\"99a1b128eceb02aefa4df48fe1b82c24.jpg\",\"storage\":\"store\",\"metadata\":{\"size\":1975663,\"filename\":\"4-week-class-1.jpg\",\"mime_type\":\"image/jpeg\"}},\"large\":{\"id\":\"66bdcb0747fa7f42dc07df0a387fc981.jpg\",\"storage\":\"store\",\"metadata\":{\"filename\":\"image_processing20181205-49281-ylgdhp.jpg\",\"size\":157639,\"mime_type\":\"image/jpeg\"}},\"medium\":{\"id\":\"12c96962fa1478ba60936cbd2423258f.jpg\",\"storage\":\"store\",\"metadata\":{\"filename\":\"image_processing20181205-49281-usgnyd.jpg\",\"size\":110173,\"mime_type\":\"image/jpeg\"}},\"small\":{\"id\":\"2dc801a6863777b0ce285b0b6d698704.jpg\",\"storage\":\"store\",\"metadata\":{\"filename\":\"image_processing20181205-49281-u9r7n2.jpg\",\"size\":56585,\"mime_type\":\"image/jpeg\"}}}"], ["updated_at", "2018-12-06 04:25:54.754843"], ["id", 1]]
   (1.1ms)  COMMIT
Redirected to http://localhost:3000/admin/categories/discuss-and-connect/submenus/discuss-submenu/subcategories/discuss-subcategory
Completed 302 Found in 12906ms (ActiveRecord: 45.0ms)

shrine.rb

#intializers/shrine.rb
require "shrine"
require "shrine/storage/file_system"
require "shrine/storage/s3"
require "image_processing/mini_magick"

Shrine.plugin :presign_endpoint, presign_options: { method: :put }
Shrine.plugin :logging

s3_options = {
  access_key_id: "xx",
  secret_access_key: "xx",
  region: "xxx",
  bucket: "xxxx ",
}

Shrine.storages = {
  cache: Shrine::Storage::S3.new(prefix: "cache", **s3_options),
  store: Shrine::Storage::S3.new(**s3_options),
}