チャットアプリでの非同期通信で画像の送信時のエラーについて

受付中

回答 0

投稿

  • 評価
  • クリップ 1
  • VIEW 156

sumirow

score 8

チャットアプリで非同期通信で画像の送信をしたいのですが、コンソールとターミナルでエラーが出ており送信ができません。
これを解決すべくご助力いただければ幸いです。

試したみたこと

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で質問しよう!

  • ただいまの回答率 90.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る