Q&A
チャットアプリで非同期通信で画像の送信をしたいのですが、コンソールとターミナルでエラーが出ており送信ができません。
これを解決すべくご助力いただければ幸いです。
試したみたこと
carrierwaveやmini-magickを導入しておりgemfileから消し、bundle install。その後もう一度gemfileに2つを記述しbundle installをする。
日文混じりと英文のみの画像ファイル名のファイルで試す。
現在発生しているエラー
console
1Failed to load resource: net::ERR_NAME_NOT_RESOLVED
console
1Failed to load resource: the server responded with a status of 500 (Internal Server Error)
terminal
1Started POST "/groups/1/messages" for ::1 at 2019-07-24 20:55:39 +0900 2Processing by MessagesController#create as JSON 3 Parameters: {"utf8"=>"✓", "authenticity_token"=>"LSmmE3rUs5OuXKYH6Cuh/pWFGpD835JrVxUTN1ByJUNeOLP/wr8xDuh3oTaGi0KqomhVvg9MDHhCJ23IhjOjpA==", "message"=>{"content"=>"", "image"=>#<ActionDispatch::Http::UploadedFile:0x00007fefda7842a0 @tempfile=#<Tempfile:/var/folders/2f/yd1klq0s62jf4ckcf6bjjscc0000gn/T/RackMultipart20190724-15890-1hnukqv.png>, @original_filename="book.png", @content_type="image/png", @headers="Content-Disposition: form-data; name=\"message[image]\"; filename=\"book.png\"\r\nContent-Type: image/png\r\n">}, "group_id"=>"1"} 4 User Load (0.3ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 ORDER BY `users`.`id` ASC LIMIT 1 5 Group Load (0.2ms) SELECT `groups`.* FROM `groups` WHERE `groups`.`id` = 1 LIMIT 1 6 (0.1ms) BEGIN 7 User Load (0.2ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1 8 SQL (0.4ms) INSERT INTO `messages` (`content`, `image`, `group_id`, `user_id`, `created_at`, `updated_at`) VALUES ('', 'book.png', 1, 1, '2019-07-24 11:55:40', '2019-07-24 11:55:40') 9 (0.4ms) ROLLBACK 10Completed 500 Internal Server Error in 305ms (ActiveRecord: 1.7ms) 11 12 13 14URI::InvalidURIError (URI must be ascii only "https://sumirow-upload-test.s3-\u81EA\u5206\u3067\u8ABF\u3079\u3066\u5165\u308C\u3066\u304F\u3060\u3055\u3044.amazonaws.com:443"): 15 16app/controllers/messages_controller.rb:11:in `create' 17 Rendering /Users/yumo3690/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/actionpack-5.0.7.2/lib/action_dispatch/middleware/templates/rescues/diagnostics.text.erb 18 Rendering /Users/yumo3690/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/actionpack-5.0.7.2/lib/action_dispatch/middleware/templates/rescues/_source.text.erb 19 Rendered /Users/yumo3690/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/actionpack-5.0.7.2/lib/action_dispatch/middleware/templates/rescues/_source.text.erb (0.8ms) 20 Rendering /Users/yumo3690/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/actionpack-5.0.7.2/lib/action_dispatch/middleware/templates/rescues/_trace.text.erb 21 Rendered /Users/yumo3690/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/actionpack-5.0.7.2/lib/action_dispatch/middleware/templates/rescues/_trace.text.erb (0.8ms) 22 Rendering /Users/yumo3690/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/actionpack-5.0.7.2/lib/action_dispatch/middleware/templates/rescues/_request_and_response.text.erb 23 Rendered /Users/yumo3690/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/actionpack-5.0.7.2/lib/action_dispatch/middleware/templates/rescues/_request_and_response.text.erb (1.1ms) 24 Rendered /Users/yumo3690/.rbenv/versions/2.5.1/lib/ruby/gems/2.5.0/gems/actionpack-5.0.7.2/lib/action_dispatch/middleware/templates/rescues/diagnostics.text.erb (101.8ms) 25 26
関係してそうなソース
message_controller.rb class MessagesController < ApplicationController before_action :set_group def index @message = Message.new @messages = @group.messages.includes(:user) end def create @message = @group.messages.new(message_params) if @message.save respond_to do |format| format.html { redirect_to group_messages_path(@group), notice: 'メッセージが送信されました' } format.json end else @messages = @group.messages.includes(:user) flash.now[:alert] = 'メッセージを入力してください。' render :index end end private def message_params params.require(:message).permit(:content, :image).merge(user_id: current_user.id) end def set_group @group = Group.find(params[:group_id]) end end
message.js $(function(){ $(document).on('turbolinks:load', function() { function buildHTML(message){ var addImage = ''; if (message.image.url) { addImage = `<img src="${message.image.url}" class="lower-message__image">`; } var html = `<div class="message"> <div class="upper-message"> <div class="upper-message__user-name"> ${message.user_name} </div> <div class="upper-message__date"> ${message.created_at} </div> </div> <div class="lower-message"> <p class="lower-message__content"> ${message.content} </p> ${addImage} </div> </div>` return html; } $('#new_message').on('submit', function(e){ e.preventDefault(); var formData = new FormData(this); var url = $(this).attr('action') $.ajax({ url: url, type: "POST", data: formData, dataType: 'json', processData: false, contentType: false }) .done(function(data){ var html = buildHTML(data); $('.messages').append(html); $('form')[0].reset(); $('html, body').animate({ scrollTop: $(document).height() }) }) .fail(function(){ alert('送信に失敗しました'); }) .always(function(data){ $('.form__submit').prop('disabled', false); }) }) var reloadMessages = function () { if (window.location.href.match(//groups/\d+/messages/)){ var last_message_id = $('.message:last').data("message-id"); $.ajax({ url: "api/messages", type: 'get', dataType: 'json', data: {last_id: last_message_id} }) .done(function (messages) { var insertHTML = ''; messages.forEach(function (message) { insertHTML = buildHTML(message); $('.messages').append(insertHTML); }) }) .fail(function () { alert('自動更新に失敗しました'); }); $('html, body').animate({ scrollTop: $(document).height() }) } }; setInterval(reloadMessages, 5000); }); });
あなたの回答
tips
プレビュー
