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

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

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

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

Ruby on Rails

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

Q&A

0回答

906閲覧

ActiveStorageの複数アップロードについて

Tsuyoshipanda

総合スコア11

Ruby on Rails 6

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

Ruby on Rails

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

0グッド

0クリップ

投稿2020/04/09 05:53

https://qiita.com/m-kawakami/items/492f18473a4c31ca9c5f
この記事を参考にファイルの複数アップロードを作っています
一番最後のファイルしかアップロードできない感じです。

以下が自分のソースファイルです。

js

1$(document).on('turbolinks:load', function(){ 2 $('#image-input').on('change', function(e){ 3 4 let files = e.target.files; 5 $.each(files, function(index, file) { 6 let reader = new FileReader(); 7 8 9 reader.onload = (function(file){ 10 return function(e){ 11 let imageLength = $('#output-box').children('li').length; 12 13 let labelLength = $("#image-input>label").eq(-1).data('label-id'); 14 15 $('#image-input').before(`<li class="preview-image" id="upload-image${labelLength}" data-image-id="${labelLength}"> 16 <figure class="preview-image__figure"> 17 <img src='${e.target.result}' title='${file.name}' > 18 </figure> 19 <div class="preview-image__button"> 20 <a class="preview-image__button__edit">編集</a> 21 <a class="preview-image__button__delete" data-image-id="${labelLength}">削除</a> 22 </div> 23 </li>`); 24 $("#image-input>label").eq(-1).css('display','none'); 25 26 27 $("#image-input").append(`<label for="item_images${labelLength+1}" class="sell-container__content__upload__items__box__label" data-label-id="${labelLength+1}"> 28 <input multiple="multiple" class="sell-container__content__upload__items__box__input" id="item_images${labelLength+1}" style="display: none;" type="file" name="item[images][]"> 29 <i class="fas fa-camera fa-lg"></i> 30 </label>`); 31 }; 32 })(file); 33 reader.readAsDataURL(file); 34 }); 35 }); 36});

html.erb

1<div class='sell-container__content'> 2 <div class='sell-container__content__max-sheet'></div> 3 <div class='sell-container__content__upload'> 4 <div class='sell-container__content__upload__items'> 5 <div class='sell-container__content__upload__items__box'> 6 <ul id='output-box'> 7 <div id='image-input'> 8 <%= f.label :images, for: "item_images0", class: 'sell-container__content__upload__items__box__label', data: {label_id: 0 } %> 9 <%= f.file_field :images, multiple: true, class: "sell-container__content__upload__items__box__input", id: "item_images0"%> 10 </div> 11 </ul> 12 </div> 13 </div> 14 </div>

controller.rb

1def create 2 @post = Post.new(params.require(:post).permit(images: [])) 3 @post.save 4 redirect_to("/posts/index") 5 end

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

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

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

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

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

no1knows

2020/04/09 08:50

省略せずにコントローラーとモデルを追記いただくと回答が付きやすいかと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問