ご回答いただけるとありがたいです。よろしくお願いします！ ### 実現したいこと・ツイート編集ページで画像をプレビューで表示する・編集画面に遷移した時点で画像が添付されていたら、プレビューで表示されている状態にする ### 発生している問題ツイート新規投稿ページでは、プレビューが表示されています。しかし、編集ページをコンソールで見たら、そもそもpreview.jsが読み込まれていません。 ### 該当のソースコード ```js #application.js require("@rails/ujs").start() require("@rails/activestorage").start() require("channels") require('./preview') #preview.js if (document.URL.match( "tweets/new" ) || document.URL.match( "tweets/edit" )) { document.addEventListener('DOMContentLoaded', function(){ const ImageList = document.getElementById('image-list'); const createImageHTML = (blob) => { const imageElement = document.createElement('div'); const blobImage = document.createElement('img'); blobImage.setAttribute('src', blob); imageElement.appendChild(blobImage); ImageList.appendChild(imageElement); }; document.getElementById('tweet_image').addEventListener('change', function(e){ const imageContent = document.querySelector('img'); if (imageContent){ imageContent.remove(); } const file = e.target.files[0]; const blob = window.URL.createObjectURL(file); createImageHTML(blob); }); }); } ``` ```views #new.html.erb 画像 #edit.html.erb 画像 #この部分だけnew.html.erbと違う ``` ###試したこと newとeditを部分テンプレート_form.html.erbにまとめて newとeditはとしてみました。しかし、変わらずnewではブレビューが表示されるが、editでは表示されなかったです。以上になります。ご助言いただけると幸いです。 ###追記 ```controller #tweets class TweetsController < ApplicationController before_action :authenticate_user!, only: [:index, :new, :edit] before_action :set_group before_action :set_tweet, only: [:show, :edit, :update, :destroy] def index @tweets = @group.tweets.includes(:user).order("created_at DESC") end def new @tweet = Tweet.new end def create @tweet = @group.tweets.new(tweet_params) if @tweet.save redirect_to group_tweets_path(@group) else @tweets = @group.tweets.includes(:user) render :new end end def show end def edit unless user_signed_in? && current_user.id == @tweet.user_id redirect_to root_path end end def update if @tweet.update(tweet_params) redirect_to group_tweets_path(@group) else render :edit end end def destroy if current_user.id == @tweet.user_id @tweet.destroy redirect_to group_tweets_path(@group) else render :index end end private def tweet_params params.require(:tweet).permit(:content, :image).merge(user_id: current_user.id) end def set_group @group = Group.find(params[:group_id]) end def set_tweet @tweet = @group.tweets.find(params[:id]) end end ```

ツイート投稿編集ページに画像プレビューを表示

ご回答いただけるとありがたいです。よろしくお願いします！

実現したいこと

・ツイート編集ページで画像をプレビューで表示する
・編集画面に遷移した時点で画像が添付されていたら、プレビューで表示されている状態にする

発生している問題

ツイート新規投稿ページでは、プレビューが表示されています。
しかし、編集ページをコンソールで見たら、そもそもpreview.jsが読み込まれていません。

該当のソースコード

js
1#application.js
2require("@rails/ujs").start()
3require("@rails/activestorage").start()
4require("channels")
5require('./preview')
6
7
8#preview.js
9if (document.URL.match( "tweets/new" ) || document.URL.match( "tweets/edit" )) {
10  document.addEventListener('DOMContentLoaded', function(){
11    const ImageList = document.getElementById('image-list');
12
13    const createImageHTML = (blob) => {
14      const imageElement = document.createElement('div');
15
16      const blobImage = document.createElement('img');
17      blobImage.setAttribute('src', blob);
18
19      imageElement.appendChild(blobImage);
20      ImageList.appendChild(imageElement);
21    };
22
23    document.getElementById('tweet_image').addEventListener('change', function(e){
24      const imageContent = document.querySelector('img');
25      if (imageContent){
26        imageContent.remove();
27      }
28
29      const file = e.target.files[0];
30      const blob = window.URL.createObjectURL(file);
31
32      createImageHTML(blob);
33    });
34  });
35}

views
1#new.html.erb
2<%= form_with model: [@group, @tweet], local: true do |f| %>
3  <div class="form-input">
4    <%= f.text_area :content, class:'form-tweet', placeholder:'type a tweet' %>
5  </div>
6  <div class="tweet-form">
7    <div class="tweet-form-left"></div>
8    <div class="tweet-form-right">
9      <label class="form-image">
10        <span class="image-file">画像</span>
11        <%= f.file_field :image, class: 'hidden' %>
12      </label>
13    </div>
14  </div>
15  <div id="image-list"></div>
16  <div class="tweet-form">
17    <div class="tweet-form-left"></div>
18    <div class="tweet-form-right">
19      <%= f.submit '投稿する', class:'form-submit' %>
20    </div>
21  </div>
22<% end %>
23
24
25#edit.html.erb
26<%= form_with model: [@group, @tweet], local: true do |f| %>
27  <div class="form-input">
28    <%= f.text_area :content, class:'form-tweet', placeholder:'type a tweet' %>
29  </div>
30  <div class="tweet-form">
31    <div class="tweet-form-left"></div>
32    <div class="tweet-form-right">
33      <label class="form-image">
34        <span class="image-file">画像</span>
35        <%= f.file_field :image, class: 'hidden' %>
36      </label>
37    </div>
38  </div>
39  <div id="image-list"></div>
40  <div class="tweet-form">
41    <div class="tweet-form-left"></div>
42    <div class="tweet-form-right">
43      <%= f.submit '更新する', class:'form-submit' %> #この部分だけnew.html.erbと違う
44    </div>
45  </div>
46<% end %>

###試したこと
newとeditを部分テンプレート_form.html.erbにまとめて
newとeditは<%= render partial: "form"%>としてみました。
しかし、変わらずnewではブレビューが表示されるが、editでは表示されなかったです。

以上になります。ご助言いただけると幸いです。

###追記

controller
1#tweets
2
3class TweetsController < ApplicationController
4  before_action :authenticate_user!, only: [:index, :new, :edit]
5  before_action :set_group
6  before_action :set_tweet, only: [:show, :edit, :update, :destroy]
7
8  def index
9    @tweets = @group.tweets.includes(:user).order("created_at DESC")
10  end
11
12  def new
13    @tweet = Tweet.new
14  end
15
16  def create
17    @tweet = @group.tweets.new(tweet_params)
18    if @tweet.save
19      redirect_to group_tweets_path(@group)
20    else
21      @tweets = @group.tweets.includes(:user)
22      render :new
23    end
24  end
25
26  def show
27  end
28
29  def edit
30    unless user_signed_in? && current_user.id == @tweet.user_id
31      redirect_to root_path
32    end
33  end
34
35  def update
36    if @tweet.update(tweet_params)
37      redirect_to group_tweets_path(@group)
38    else
39      render :edit
40    end
41  end
42
43  def destroy
44    if current_user.id == @tweet.user_id
45      @tweet.destroy
46      redirect_to group_tweets_path(@group)
47    else
48      render :index
49    end
50  end
51
52  private
53
54  def tweet_params
55    params.require(:tweet).permit(:content, :image).merge(user_id: current_user.id)
56  end
57
58  def set_group
59    @group = Group.find(params[:group_id])
60  end
61
62  def set_tweet
63    @tweet = @group.tweets.find(params[:id])
64  end
65
66end

実現したいこと

発生している問題

該当のソースコード

関連した質問