チャットアプリでの非同期通信で画像の送信時のエラーについて
受付中
回答 0
投稿
- 評価
- クリップ 1
- VIEW 696
チャットアプリで非同期通信で画像の送信をしたいのですが、コンソールとターミナルでエラーが出ており送信ができません。
これを解決すべくご助力いただければ幸いです。
試したみたこと
carrierwaveやmini-magickを導入しておりgemfileから消し、bundle install。その後もう一度gemfileに2つを記述しbundle installをする。
日文混じりと英文のみの画像ファイル名のファイルで試す。
現在発生しているエラー
Failed to load resource: net::ERR_NAME_NOT_RESOLVED
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
Started POST "/groups/1/messages" for ::1 at 2019-07-24 20:55:39 +0900
Processing by MessagesController#create as JSON
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"}
User Load (0.3ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 ORDER BY `users`.`id` ASC LIMIT 1
Group Load (0.2ms) SELECT `groups`.* FROM `groups` WHERE `groups`.`id` = 1 LIMIT 1
(0.1ms) BEGIN
User Load (0.2ms) SELECT `users`.* FROM `users` WHERE `users`.`id` = 1 LIMIT 1
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')
(0.4ms) ROLLBACK
Completed 500 Internal Server Error in 305ms (ActiveRecord: 1.7ms)
URI::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"):
app/controllers/messages_controller.rb:11:in `create'
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
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
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)
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
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)
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
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)
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)
関係してそうなソース
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);
});
});
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
まだ回答がついていません
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.32%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる