RailsからAWSのS3に画像をダイレクトアップロードする方法

Question

RailsからAWSのS3に画像をダイレクトアップロードする方法について

RailsからAWSのS3に画像を直接アップロードする仕組みを実装しております。
そこで１つ質問なのですが、実装自体は問題なく完了したのですが、ローカル開発環境からAWSのS3に画像がアップロードされません。

本番環境はHerokuで運用を検討しておりますが、現在は開発のローカル環境で動かないです。

参考サイト：https://qiita.com/DaichiSaito/items/80e89f0c96d88afcc5ff
参考サイト：https://devcenter.heroku.com/articles/direct-to-s3-image-uploads-in-rails

以下は、実際のコードです。

GemfileFg
gem 'aws-sdk', '~> 2'

model/users.rb
class User < ApplicationRecord
  has_one :avatar, class_name: "UserAvatar", dependent: :destroy, autosave: true
end

class UserAvatar < ApplicationRecord
  belongs_to :user, optional: true

# このmモデルに「image :string」で画像を保存します。
end

users_controller.rb
before_action :set_s3_direct_post, only: [:new, :edit, :create, :update] # 追加

# ユーザー新規登録フォーム
  def new
    if current_user
      redirect_to current_user
    else
      @user_form = UserForm.new
    end
  end

  # ユーザーの編集フォーム
  def edit
    @user_form = UserForm.new(User.find(params[:id]))
  end

  # ユーザーの新規作成
  def create
    @user_form = UserForm.new
    @user_form.assign_attributes(params[:form])
    if @user_form.save
      @user_form.user.send_activation_email
      redirect_to :signup_thanks
    else
      render :new
    end
  end

  # ユーザーの更新
  def update
    @user_form = UserForm.new(@user)
    @user_form.assign_attributes(params[:form])
    if @user_form.save
      redirect_to @user_form.user
    else
      render :edit
    end
  end

private
    # 追加
  def set_s3_direct_post
    @s3_direct_post = S3_BUCKET.presigned_post(key: "uploads/#{SecureRandom.uuid}/${filename}", success_action_status: '201', acl: 'public-read')
  end

forms/user_form.rb
class UserForm
  include ActiveModel::Model

  attr_accessor :user, :name, :email, :gender, :inputs_destroy
  delegate :new_record?, :persisted?, :save, to: :user

  def initialize(user = nil)
    @user = user
    @user ||= User.new
    @user.build_avatar unless @user.avatar.present?
  end

  def assign_attributes(params = {})
    @params = params
    user.assign_attributes(user_params)
    if params[:user][:avatar].present?
      avatar = avatar_params.fetch(:avatar)
      user.avatar.assign_attributes(avatar)
    end
  end

  private
  def user_params
    @params.require(:user).except(:avatar).permit(
      :name, :email, :gender, :profile_text, :password, :password_confirmation
    )
  end

  def avatar_params
    @params.require(:user).slice(:avatar).permit(
      avatar: [ :image　]
    )
  end
end

views/users/edit.html.erb
<%= form_for(@user_form, as: 'form', url: @user_form.user, html: { class: 'directUpload', data: { 'form-data' => (@s3_direct_post.fields), 'url' => @s3_direct_post.url, 'host' => URI.parse(@s3_direct_post.url).host } }) do |f| %> # 修正

<script>
$(function() {
  $('.directUpload').find("input:file").each(function(i, elem) {
    var fileInput    = $(elem);
    var form         = $(fileInput.parents('form:first'));
    var submitButton = form.find('input[type="submit"]');
    var progressBar  = $("<div class='bar'></div>");
    var barContainer = $("<div class='progress'></div>").append(progressBar);
    fileInput.after(barContainer);
    fileInput.fileupload({
      fileInput:       fileInput,
      url:             form.data('url'),
      type:            'POST',
      autoUpload:       true,
      formData:         form.data('form-data'),
      paramName:        'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
      dataType:         'XML',  // S3 returns XML if success_action_status is set to 201
      replaceFileInput: false,
      progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        progressBar.css('width', progress + '%')
      },
      start: function (e) {
        submitButton.prop('disabled', true);

        progressBar.
          css('background', 'green').
          css('display', 'block').
          css('width', '0%').
          text("Loading...");
      },
      done: function(e, data) {
        submitButton.prop('disabled', false);
        progressBar.text("Uploading done");

        // extract key and generate URL from response
        var key   = $(data.jqXHR.responseXML).find("Key").text();
        var url   = '//' + form.data('host') + '/' + key;

        // create hidden field
        var input = $("<input />", { type:'hidden', name: fileInput.attr('name'), value: url })
        form.append(input);
      },
      fail: function(e, data) {
        submitButton.prop('disabled', false);

        progressBar.
          css("background", "red").
          text("Failed");
      }
    });
  });
});
</script>

config/initializers/aws.rb

Aws.config.update({
  region: 'ap-northeast-1',
  credentials: Aws::Credentials.new(
    '××××××××××××××××××××××××××××××××',　# アクセスキー
    '××××××××××××××××××××××××××××××××'   #　シークレットキー
  ),
})

S3_BUCKET = Aws::S3::Resource.new.bucket('×××××××××××××××××××××')  # バケット名

以下二つのライブラリをダウンロードして、app/assets/javascripts配下に設置
https://raw.githubusercontent.com/jquery/jquery-ui/master/ui/widget.js
→app/assets/javascripts/jquery.ui.widget.js

https://raw.githubusercontent.com/blueimp/jQuery-File-Upload/master/js/jquery.fileupload.js
→app/assets/javascripts/z.jquery.fileupload.js

上記のように実装しましたが、画像をアップロードするとパラメータが以下のようになり、AWSのS3にアップロードされません。

Parameters: {"utf8"=>"✓", "authenticity_token"=>"hqGryq1RfJW1tv4XzWOK8xLs3Dazxs3h0u8+BScjb5N620ynmSg5Xnc5keXHl8QryVY4bolxrMAujB0vdfISTw==", "form"=>{"user"=>{"avatar"=>{"image"=>#<ActionDispatch::Http::UploadedFile:0x00007fa188674298 @tempfile=#<Tempfile:/var/folders/gd/52ml8dfd03v0jfgy6r2ls4x80000gn/T/RackMultipart20201103-12508-1pra42j.jpg>, @original_filename="2018-06-29 12.13.08.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"form[user][avatar][image]\"; filename=\"2018-06-29 12.13.08.jpg\"\r\nContent-Type: image/jpeg\r\n">}, "name"=>"test01", "email"=>"[e-mail]", "profile_text"=>""}}, "commit"=>"上記の内容で更新する", "id"=>"1"}

↳ app/forms/user_form.rb:5
  User Update (0.2ms)  UPDATE "users" SET "profile_text" = $1, "updated_at" = $2 WHERE "users"."id" = $3  [["profile_text", ""], ["updated_at", "2020-11-03 08:50:40.670585"], ["id", 1]]
  ↳ app/forms/user_form.rb:5
  UserAvatar Create (0.6ms)  INSERT INTO "user_avatars" ("user_id", "image", "created_at", "updated_at") VALUES ($1, $2, $3, $4) RETURNING "id"  [["user_id", 1], ["image", "#<ActionDispatch::Http::UploadedFile:0x00007fa188674298>"], ["created_at", "2020-11-03 08:50:40.671752"], ["updated_at", "2020-11-03 08:50:40.671752"]]
  ↳ app/forms/user_form.rb:5
   (0.5ms)  COMMIT

imageの部分に#<ActionDispatch::Http::UploadedFile:0x00007fa188674298 @tempfile=#Tempfile:/var/folders/gd/52ml8dfd03v0jfgy6r2ls4x80000gn/T/RackMultipart20201103-12508-1pra42j.jpgと入っているのでソースコードは問題ないと思っております。

AWS管理画面からCORSは以下のように設定しました。

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST"
        ],
        "AllowedOrigins": [
            "http://localhost:3000"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

解決策などを教えて頂けますと幸いです。よろしくお願い致します。

参考サイト：https://qiita.com/DaichiSaito/items/80e89f0c96d88afcc5ff
参考サイト：https://devcenter.heroku.com/articles/direct-to-s3-image-uploads-in-rails

Answer 1

//= require jquery.ui.widget
//= require z.jquery.fileupload

上記を記載することで解決しました。