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

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

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

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

Q&A

0回答

1009閲覧

[Rails]入力フォームでzipファイルを入力 → 別ページでファイルを一覧表示してD&Dで並び替えたい

s_diff

総合スコア107

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

0グッド

0クリップ

投稿2019/02/14 07:12

以下のような機能を実装したいとおもっています。

  1. 入力フォームでzipファイルを入力して送信
  2. 次のページに飛んでzipファイルを展開した画像ファイルを一覧表示
  3. 一覧表示した画像をドラッグ&ドロップで並び替えて(jquery-ui/sortableを利用)送信
  4. 順番どおりにデータベースに保存される

3の並び替えまではできるのですが、送信しても画像が入力されていません。
また、別のzipファイルも入力できていないようです。

###環境
rails 4.2.6
jquery-ui-rails 6.0.1

###実装

ルーティング

ruby

1# routes.rb 2 3namespace :manage do 4 resources :products do 5 member do 6 post 'sort' 7 post 'sort_create' 8 post 'create_sorted' 9 end 10 end 11end

コントーローラ

ruby

1#products_controller.rb 2 3class Manage::ProductsController < Manage::ApplicationController 4 before_action :set_areas, only: [:sort_new, :create_sorted] 5 6 def sort_new 7 @product = Product.new 8 end 9 10 def sort 11 @product = Product.new(product_params) 12 zipfile = product_params[:fake_zip] 13 @img_arr = [] 14 Zip::File.open(zipfile.path) do |zip| 15 num = 0 16 zip.each do |entry| 17 ext = File.extname(entry.name) #拡張子を取得 18 # 隠しファイルやゴミファイルは飛ばす 19 next if ext.blank? || File.basename(entry.name).count(".") > 1 20 21 num += 1 22 if num > 30 then 23 break 24 end 25 26 # 一時ファイルを作る 27 Tempfile.open(["tempProductImageFile", ext]) do |t| 28 # { true } は展開先に同名ファイルが存在する場合に上書きする指定 29 entry.extract(t.path) { true } 30 @product.send("products_image#{num}=", t) 31 end 32 end 33 end 34 products_image_array = (1..30).map { |num| :"products_image#{num}" } 35 @img_arr = (products_image_array).map do |img| 36 @product.send(img) 37 end 38 end 39 40 def create_sorted 41 @product = Product.new(product_params) 42 43 @product.building_name = ActiveSupport::Multibyte::Unicode.normalize(@product.building_name, :c) 44 @product.address = ActiveSupport::Multibyte::Unicode.normalize(@product.address, :c) 45 46 if params[:products_images].present? && params[:products_images].size <= 30 47 num = 1 48 params[:products_images].each do |image| 49 @product.send("products_image#{num}=", image) 50 num += 1 51 end 52 end 53 54 respond_to do |format| 55 if @product.save 56 format.html { redirect_to [:manage, @product], notice: "#{@product.building_name}を作成しました。" } 57 format.json { render :show, status: :created, location: @product } 58 else 59 format.html { render :sort_new } 60 format.json { render json: @product.errors, status: :unprocessable_entity } 61 end 62 end 63 end 64 65 private 66 def set_areas 67 @areas = Area.all 68 end 69 def product_params 70 products_image_array = (1..30).map { |num| :"products_image#{num}" } 71 products_image_cache_array = (1..30).map { |num| :"products_image#{num}_cache" } 72 params.fetch(:product, {}).permit(:area_id, :building_name, :number, :station, :address, :zip, :zip_cache, :fake_zip, :status_id, :provider, :provider_tel, :floor, *products_image_array, *products_image_cache_array, products_images: []) 73 end 74end

ビュー

ruby

1#manage/products/sort_new.html.erb 2 3<% if @product.errors.any? %> 4 <div class="alert-error"> 5 <p class="error-msg">エラーが発生しました</p> 6 <ul> 7 <% @product.errors.full_messages.each do |alert| %> 8 <li><%= alert %></li> 9 <% end %> 10 </ul> 11 </div> 12<% end %> 13 14<%= form_for([:manage,@product], url: { action: "sort"}) do |f| %> 15 <div class="input manage-product-create-form"> 16 <p class="row"><%= f.label :area_id, class: "label" %><%= f.select :area_id, @areas.map{ |t| [t.name, t.id] }, include_blank: true %></p> 17 <p class="row"><%= f.label :building_name, class: "label" %><%= f.text_field :building_name %></p> 18 <p class="row"><%= f.label :number, class: "label" %><%= f.text_field :number %></p> 19 <p class="row"><%= f.label :floor, class: "label" %><%= f.select :floor, Request::FLOOR, include_blank: true %></p> 20 <p class="row"><%= f.label :station, class: "label" %><%= f.text_field :station %></p> 21 <p class="row"><%= f.label :address, class: "label" %><%= f.text_field :address %></p> 22 <p class="row" id="js-selectFile"> 23 <%= f.label :zip, class: "label" %> 24 <%= f.file_field :zip, id: "js-upload" %> 25 <%= f.hidden_field :zip_cache, id: "js-upload-cache" %> 26 <button class="original-btn">ZIPファイルを選択</button> 27 <span class="icon">未選択</span> 28 </p> 29 <p class="row" id="js-selectFile2"> 30 <%= f.label :fake_zip, class: "label" %> 31 <%= f.file_field :fake_zip, id: "js-upload2" %> 32 <button class="original-btn">ZIPファイルを選択</button> 33 <span class="icon">未選択</span> 34 </p> 35 </div> 36 37 <div class="actions"> 38 <%= button_tag type: 'submit', class: "btn-edit" do %> 39 <i class="fa fa-pencil" aria-hidden="true"></i> 作成 40 <% end %> 41 </div> 42<% end %> 43 44 45 46 47#manage/products/sort.html.erb 48 49<% if @product.errors.any? %> 50 <div class="alert-error"> 51 <p class="error-msg">エラーが発生しました</p> 52 <ul> 53 <% @product.errors.full_messages.each do |alert| %> 54 <li><%= alert %></li> 55 <% end %> 56 </ul> 57 </div> 58<% end %> 59 60<div class="input manage-product-create-form"> 61 <p class="row"><label class="label">エリア</label><%= @product.area_id %></p> 62 <p class="row"><label class="label">物件名</label><%= @product.building_name %></p> 63 <p class="row"><label class="label">号室</label><%= @product.number %></p> 64 <p class="row"><label class="label">間取り</label><%= @product.floor %></p> 65 <p class="row"><label class="label">駅名</label><%= @product.station %></p> 66 <p class="row"><label class="label">住所</label><%= @product.address %></p> 67 <p class="row"><label class="label">DL用zip</label><%= @product.zip.url %></p> 68 69 70 <%= form_for([:manage,@product], url: { action: "create_sorted"}) do |f| %> 71 <div class="file-upload-area"> 72 <div class="sort-box-container sortable"> 73 <% @img_arr.each do |img| %> 74 <div class="sort-box"> 75 <input type="text" class="form-control" readonly="" /> 76 <div style='border: dashed 1px #ccc;'> 77 <input type='hidden' name='products_images[]' multiple=true value=<%= img %> class='uploadFile' style='width: 90px; font-size: 16px;' /> 78 <div class="imagePreview item" style='padding: 0; background-image: url(<%= img %>)'></div> 79 </div> 80 </div> 81 <% end %> 82 </div> 83 </div> 84 <input type='file' name='products_images[]' multiple=true class='uploadFile' id="fileInput" /> 85 <div id="drop_zone"><i class="fa fa-picture-o" aria-hidden="true"></i> 物件写真をドラッグ&ドロップしてください</div> 86 <div id="preview"></div> 87 <%= f.hidden_field :area_id, value: @product.area_id %> 88 <%= f.hidden_field :building_name, value: @product.building_name %> 89 <%= f.hidden_field :number, value: @product.number %> 90 <%= f.hidden_field :floor, value: @product.floor %> 91 <%= f.hidden_field :station, value: @product.station %> 92 <%= f.hidden_field :address, value: @product.address %> 93 <%= f.hidden_field :zip, value: @product.zip_url %> 94 </div> 95 96 <div class="actions"> 97 <%= button_tag type: 'submit', class: "btn-edit" do %> 98 <i class="fa fa-pencil" aria-hidden="true"></i> 作成 99 <% end %> 100 </div> 101<% end %>

モデル

ruby

1class Product < ActiveRecord::Base 2 belongs_to :area, foreign_key: 'area_id' 3end

###現状

いまのところ、ドラッグ&ドロップで並び替えるところまではできていますが、画像がうまく保存されません。
また、別のzipファイルを保存することもできない状態です。
zipファイルのバリデーションを外すとフォームの送信に成功はしますが、画像が一枚も保存されていません。

###実現したいこと
並び替えした後にフォームを送信して、画像を順に入力したいです。
また私がRuby On Rails初学者であるため、かなり無駄なことをやっていると思いますので、ご指摘のほうをお願いしたいです。
ご指摘いただけることがあれば、何卒よろしくお願いいたします。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問