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

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

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

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

Ruby

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

jQuery

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

Q&A

解決済

1回答

2861閲覧

jqueryで404エラーが発生する。

Masashige1005

総合スコア14

Ruby on Rails 5

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

Ruby

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

jQuery

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

0グッド

0クリップ

投稿2020/04/23 07:38

編集2020/04/23 07:44

現在javascriptで404のエラーが発生しており、原因がよくわかっておりません。
環境 ruby on rails 5.2
gem mini_majick,jqury-rails

ActiveStorageで複数画像のアップロード機能を実装しようと思っております。
画像を送信するところでエラーが発生していると考えられます。

POST http://localhost:3000/items/upload_image 404 (Not Found)

js

1$(document).on('turbolinks:load', function() { 2 3 $('#item_images').on('change',function(e){ 4 var files = e.target.files; 5 var d = (new $.Deferred()).resolve(); 6 $.each(files,function(i,file){ 7 d = d.then(function() { 8 return Uploader.upload(file)}) 9 .then(function(data){ 10 return previewImage(file, data.image_id); 11 }); 12 }); 13 $('#item_images').val(''); 14 }); 15 16 $('.images-field').on('click','.btn-edit', function(e){ 17 e.preventDefault(); 18 $(this).parent().find('.edit-image-file-input').trigger("click"); 19 }); 20 21 $('.images-field').on('change','.edit-image-file-input', function(e){ 22 var file = e.target.files[0]; 23 var image_box = $(this).parent(); 24 Uploader.upload(file).done(function(data){ 25 replaceImage(file, data.image_id, image_box); 26 }); 27 }); 28 29 $('.images-field').on('click','.btn-delete', function(e){ 30 e.preventDefault(); 31 $(this).parent().remove(); 32 }); 33 34 var replaceImage = function(imageFile, image_id, element){ 35 var reader = new FileReader(); 36 var img = element.find('img'); 37 var input = element.find('.item-images-input'); 38 var filename = element.find('p'); 39 reader.onload = function(e){ 40 input.attr({value: image_id}); 41 filename.html(imageFile.name); 42 img.attr("src", e.target.result); 43 }; 44 reader.readAsDataURL(imageFile); 45 } 46 47 var previewImage = function(imageFile, image_id){ 48 var reader = new FileReader(); 49 var img = new Image(); 50 var def =$.Deferred(); 51 reader.onload = function(e){ 52 var image_box = $('<div>',{class: 'image-box'}); 53 image_box.append(img); 54 image_box.append($('<p>').html(imageFile.name)); 55 image_box.append($('<input>').attr({ 56 name: "item[images][]", 57 value: image_id, 58 style: "display: none;", 59 type: "hidden", 60 class: "item-images-input"})); 61 image_box.append('<a href="" class= "btn-edit">Edit</a>'); 62 image_box.append($('<input>').attr({ 63 name: "edit-image[]", 64 style: "display: none;", 65 type: "file", 66 class: "edit-image-file-input file-input"})); 67 image_box.append('<a href="" class="btn-delete">Delete</a>'); 68 $('.images-field').append(image_box); 69 img.src = e.target.result; 70 def.resolve(); 71 }; 72 reader.readAsDataURL(imageFile); 73 return def.promise(); 74 } 75 76 var Uploader = { 77 upload: function(imageFile){ 78 var def =$.Deferred(); 79 var formData = new FormData(); 80 formData.append('image', imageFile); 81 $.ajax({ 82 type: "POST", 83 url: '/items/upload_image', 84 data: formData, 85 dataType: 'json', 86 processData: false, 87 contentType: false, 88 success: def.resolve 89 }) 90 return def.promise(); 91 } 92 } 93})

controller

1class ItemsController < ApplicationController 2 before_action :set_item, only: [:show, :edit, :update, :destroy] 3 4 def index 5 @items = Item.all 6 end 7 8 def show 9 end 10 11 def new 12 @item = Item.new 13 end 14 15 def edit 16 end 17 18 def create 19 @item = Item.new(item_params) 20 if @item.save 21 redirect_to @item, notice: 'Item was successfully created.' 22 else 23 render :new 24 end 25 end 26 27 def update 28 @item.images.detach #一旦、すべてのimageの紐つけを解除 29 if @item.update(item_params) 30 redirect_to @item, notice: 'Item was successfully updated.' 31 else 32 render :edit 33 end 34 end 35 36 def destroy 37 @item.destroy 38 redirect_to items_url, notice: 'Item was successfully destroyed.' 39 end 40 41 def upload_image 42 @image_blob = create_blob(params[:image]) 43 respond_to do |format| 44 format.json { @image_blob } 45 end 46 end 47 48 49 private 50 51 def set_item 52 @item = Item.with_attached_images.find(params[:id]) 53 end 54 55 def item_params 56 params.require(:item).permit(:name, :description).merge(images: uploaded_images) 57 end 58 59 def uploaded_images 60 params[:item][:images].map{|id| ActiveStorage::Blob.find(id)} if params[:item][:images] 61 end 62 63 def create_blob(uploading_file) 64 ActiveStorage::Blob.create_after_upload! \ 65 io: uploading_file.open, 66 filename: uploading_file.original_filename, 67 content_type: uploading_file.content_type 68 end 69end

View

1<%= form_with(model: item, local: true) do |form| %> 2 <% if item.errors.any? %> 3 <div id="error_explanation"> 4 <h2><%= pluralize(item.errors.count, "error") %> prohibited this item from being saved:</h2> 5 6 <ul> 7 <% item.errors.full_messages.each do |message| %> 8 <li><%= message %></li> 9 <% end %> 10 </ul> 11 </div> 12 <% end %> 13 14 <div class="field"> 15 <%= form.label :name %> 16 <%= form.text_field :name %> 17 </div> 18 19 <div class="field"> 20 <%= form.label :description %> 21 <%= form.text_area :description %> 22 </div> 23 24 <div class="images-field clearfix"> 25 <div class="field"> 26 <%= form.label :images %> 27 <%= form.file_field :images, multiple: true, class: "file-input" %> 28 </div> 29 <% if item.images.attached? %> 30 <% item.images.each do |image| %> 31 <div class="image-box"> 32 <%= image_tag image.variant(resize: "150x150") %> 33 <p> <%= image.filename %> </p> 34 <%= form.hidden_field :images , name: "item[images][]", value: "#{image.blob.id}", style: "display: none;", class: "item-images-input" %> 35 <%= link_to "Edit", "", class: "btn-edit" %> 36 <%= file_field "edit-image","" , class: "edit-image-file-input file-input", style: "display: none;"%> 37 <%= link_to "Delete", "", class: "btn-delete" %> 38 </div> 39 <% end %> 40 <% end %> 41 </div> 42 43 <div class="actions"> 44 <%= form.submit "Save"%> 45 </div> 46<% end %>

他にも必要な情報があれば追記致しますので宜しくお願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

404 ということなので、まずは...

/items/upload_image は、config/routes.rb に post で、定義されていますか?

Rails のルーティング

投稿2020/04/23 07:53

CHERRY

総合スコア25171

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

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

Masashige1005

2020/04/23 09:58

きちんと設定されていませんでした。 他のエラーも発生しましたが、すんなりエラー直せたので良かったです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問