Railsでできていた画像投稿ができなくなった

Question

Railsで画像投稿ができなくなった

###環境
Ruby 2.5.1
Rails 5.2.3

###ー問題点ー

・画像のmysqlへの保存ができなくなってしまった　
(controller/create投稿画像(image)とdevise/registration/newユーザーアイコン(avatar))

・画像投稿時にJqueryでプレビューを表示していましたが、プレビューの機能をコメントアウトすると保存ができる

(readAsDataURlでエンコードされているため保存できなのか？と思いましたが、以前はできていたのにいきなりできなくなってしまった理由がわかりません）

###ー経緯ー
作成中ポートフォリオの画像保存先をS3に変更しようとしていてymlなどを変更していた
↓
開発環境とテスト環境での画像の保存先はローカルのpublicをと条件分岐をしていたのにも関わらず保存ができていない
↓
debugしてみると画像をしている画像が入っていないとのエラーでロールバックが起こっている状態
↓
画面はcreate後redirectされ動いていますが保存がされておらず、
何故かJqueryのプレビュー機能部分をコメントアウトをし、投稿すると以前通り保存ができる

※deviseを使用しての新規登録時のアイコン（avatar)は
configure_permitted_parametersに追加済
※strong prametersにimageも追加済

//ターミナルでのロールバック
Processing by PostsController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"VsnuK3JoaOvnBlXkw9PZwaQtpejusOqPJjbyVw8u1DUghgnqfWW5e8TZtgvEsctM1EwoQ8VSBEt1++jqw0jEKg==", "post"=>{"title"=>"BTS♩", "country"=>"韓国", "city"=>"", "how"=>"", "discription"=>"111"}, "commit"=>"投稿"}


(1.8ms)  BEGIN
  ↳ app/controllers/posts_controller.rb:16
   (0.2ms)  ROLLBACK
  ↳ app/controllers/posts_controller.rb:16
   (0.2ms)  BEGIN
  ↳ app/controllers/posts_controller.rb:18
   (0.1ms)  ROLLBACK
  ↳ app/controllers/posts_controller.rb:18

//logger.debugでのエラー文

#<ActiveModel::Errors:0x00007fa716882330 @base=#<Post id: nil, city: "", how: "", discription: "111", created_at: nil, updated_at: nil, like_count: nil, title: "BTS♩", country: "韓国", user_id: 1, image: nil>, @messages={:image=>["can't be blank"]}, @details={:image=>[{:error=>:blank}]}>

###コード

  def new
    @post = Post.new

  end

  def create
    @post = current_user.posts.create(post_params)
    @post.save
    redirect_to posts_path
    # logger.debug @post.errors.inspect  
  end

  private
  def post_params
    params.require(:post).permit(:image, :title, :country, :city, :how, :discription, :like_count)
  end

$(function () {
  $('form').on('change', 'input[type="file"]', function (e) {
    var file = e.target.files[0],
      reader = new FileReader(),
      $preview = $(".preview");

    if (file.type.indexOf("image") < 0) {
      return false; //一致するものがなければfalse
    }

    reader.onload = (function (file) {
      return function (e) {
        $preview.empty(); //空の状態にする
        $preview.append($('<img>').attr({ //属性をpreviewのimgに追加
          src: e.target.result, //取得した結果
          width: "250px",
          height: "250px",
          class: "preview",
          title: file.name
        }));
      };
    })(file);

    reader.readAsDataURL(file); //ファイル読み込み
  });
});

new controllerでプレビューを表示する投稿画面

    .main
      -# .main__right
      = form_for(@post, url: posts_path) do |f|
        .preview
          = f.label :image, for: "upload-image", class: "image-preview" do
            - if @post.image.url.present?
              = image_tag @post.image.url, alt: "preview", class: "preview-image"
            -else
              = icon('fa', 'camera')
            = f.file_field :image, class: "hidden", id: "upload-image"

試したこと

・最初はS3のために変更した部分に問題があるのかと思い、変更した部分をコメントアウトして試していましたがそれでもダメだったので、保存先をローカルに戻しましたがダメでした。

補足情報（FW/ツールのバージョンなど）

・CarrierWaveでPost（投稿）モデルのimageカラムとUserモデルのavatarカラムを投稿しています。

---

最後に
調べましたが、相当する事例ブログなどが見つからず困っています！
初心者のため手解きいただけると助かります！
よろしくお願いいたします！

Answer 1

paramsからimageが消えているので、プレビューの表示によりinputが消えていませんか？

おそらく下記の処理がまずいです。

$preview.empty(); //空の状態にする

ここでinputも削除してしまっているので、
inputを.preview の外に出して処理を書き直せばできると思います。

Comments

[Lindsey]

kojiro12345様＞
ご指摘ありがとうございます！
ご指摘通り、プレビュー後保存ができるようになりました！
ありがとうございます！