質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

763閲覧

form_forで画像登録時にjqueryで画像プレビューを表示するとform送信後に画像の登録ができない件

ponsata

総合スコア5

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/09/30 12:19

表題の件、キータ記事を参考にユーザー編集時に、ユーザーアイコンを表示したく実装しているのですが、
下記記述だと、画像プレビューは表示できるのですが、form送信のログを確認するとuserモデルのimageカラムが更新をされていないのことがわかりました。他のカラムは、更新をされたのですが原因がわかっておりません
f.file_fieldのacount-pageinnerrighticoninput__btnクラスがイベント発火すると
画像を入れ替えが可能になります。
なお、イベント発火せずに、画像編集すると、もちろんプレビュー表示ができませんが、imageカラムが更新されます。
下記キータの記事になります。
https://qiita.com/naoki00m/items/6430ab0b62766b582c9a#2-users%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%A9%E3%83%BC%E3%81%AB%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%81%A8%E3%83%97%E3%83%AD%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%81%AE%E3%82%AB%E3%83%A9%E3%83%A0%E3%82%92%E8%BF%BD%E5%8A%A0

他に設定などが間違えているようでしたご指摘いただければ、そちらのコードの記述もいたします。
よろしくお願いします。

controller

1class UsersController < ApplicationController 2before_action :authenticate_user!, only: [:show, :edit, :update] 3 4 def edit 5 user = User.find(params[:id]) 6 @image = user.image 7 end 8 9 def update 10 if current_user.update(user_params) 11 redirect_to user_path(current_user) 12 else 13 render :edit 14 end 15 end 16 17 def show 18 @user = User.find(params[:id]) 19 20 end 21 22 private 23 24 def user_params 25 params.require(:user).permit(:id, :nickname, :email, :image) 26 end 27 28end

erb

1<div id="content"> 2 <div id= "main-content"> 3 <div class="acount-page"> 4 <div class="acount-page__inner clearfix"> 5 <div class="acount-page__inner__left acount-page__header"> 6 <h2 class="main-title">Edit</h2> 7 <div class= "sub-title">編集ができます </div> 8 </div> 9 <div class="acount-page__inner__right user-form"> 10 <%= form_for(current_user) do |f| %> 11 <div class= "acount-page__inner__right__icon"> 12 <div class= "acount-page__inner__right__icon__label"> 13 <div class ="acount-page__inner__right__icon__input"> 14 <% if @image.present? %> 15 <%= image_tag @image.url, class: "acount-page__inner__right__icon__input__image", width: "100%" %> 16 <div class= "acount-page__inner__right__icon__input__image2"> 17 <%= f.file_field :image, class: "acount-page__inner__right__icon__input__btn" %> 18 </div> 19 <% else %> 20 <span class="acount-page__inner__right__icon__input__noimage"></span> 21 <div class= "acount-page__inner__right__icon__input__image2"> 22 <%= f.file_field :image, class: "acount-page__inner__right__icon__input__btn" %> 23 </div> 24 <% end %> 25 </div> 26 </div> 27 </div> 28 <div class="field"> 29 <div class="field-label"> 30 <%= f.label :nickname %> 31 </div> 32 <div class="field-input"> 33 <%= f.text_field :nickname, autofocus: true %> 34 </div> 35 </div> 36 <div class="field"> 37 <div class="field-label"> 38 <%= f.label :email %> 39 </div> 40 <div class="field-input"> 41 <%= f.email_field :email, autofocus: true, autocomplete: "email" %> 42 </div> 43 </div> 44 45 <div class="actions"> 46 <%= f.submit "UpDate", class: "btn"%> 47 </div> 48 <% end %> 49 </div> 50 </div> 51 </div> 52 </div> 53</div> 54 55

javascript

1$(function(){ 2 $fileField = $('.acount-page__inner__right__icon__input__btn') 3 $($fileField).on('change', $fileField, function(e) { 4 file = e.target.files[0] 5 reader = new FileReader(), 6 $preview = $(".acount-page__inner__right__icon__input__image2"); 7 8 reader.onload = (function(file) { 9 return function(e) { 10 $preview.empty(); 11 $preview.append($('<img>').attr({ 12 src: e.target.result, 13 width: "100%", 14 class: "preview", 15 title: file.name 16 })); 17 }; 18 })(file); 19 reader.readAsDataURL(file); 20 }); 21});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ユーザー情報にアイコンとプロフィールを追加する方法を丁寧に解説(rails)

  1. 画像アップロード用のファイルを作成

の記述が質問者様の内容に記載がないのですが...

あと元としたURL側が

  1. 編集画面のビューファイルにアイコンとプロフィールを追加

の記載が途中で終わっていますね...

実行環境が構築できないのでこれ以上回答ができません。申し訳ない。

投稿2020/10/12 15:27

kuma_kuma_

総合スコア2506

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問