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

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

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

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

Ruby on Rails

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1666閲覧

非同期通信 画像 js

yakumo02

総合スコア103

Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

Ruby on Rails

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/12/11 10:43

チャットアプリを作っています。非同期通信でメッセージは送信はできるのですが、画像が送れません。
送信するとcosoleに

jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:10255 POST http://localhost:3000/groups/17/messages 500 (Internal Server Error)

のエラーが出てしまいます。送信した時はjsのエラーというアラートが出てきます
ご教授お願いいたします
messages.js

$(document).on('turbolinks:load',function(){ function buildHTML(message){ var img = message.image ? `<img src= ${ message.image }>` : ""; var html = `<div class="message" data-id="${message.id}" > <div class="message__upper-info"> <p class="message__upper-info__talker"> ${message.user_name} </p> <p class="message__upper-info__date"> ${message.created_at} </p> </div> <p class="message__text"> <div> ${message.content} </div> ${img} </p> </div>` return html ; } $('#new_message').on('submit', function(e){ e.preventDefault(); var formData = new FormData(this); $('#ajax').removeAttr('data-disable-with'); var url = $(this).attr('action') $('#new_message')[0].reset(); $.ajax({ url: url, type: "POST", data: formData, dataType: 'json', processData: false, contentType: false }) .done(function(data){ var html = buildHTML(data); $('.messages').append(html); $(".messages").animate({scrollTop: $(".messages")[0].scrollHeight}); }) .fail(function(){ alert('エラー'); }) }); var reloadMessages = function() { if(window.location.href.match(//groups/\d+/messages/)){ last_message_id = $('.message').last().data("id"); $.ajax({ url: 'api/messages', type: 'get', dataType: 'json', data: {id: last_message_id} }) .done(function(messages) { if(messages.length > 0){ var insertHTML = ''; messages.forEach(function (message) { insertHTML = buildHTML(message); $('.messages').append(insertHTML); $(".messages").animate({scrollTop: $(".messages")[0].scrollHeight}); }) } }) .fail(function() { alert('error'); }); }; } // if (window.location.href.match(/messages/)){ setInterval(reloadMessages, 5000); });

messages.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 groups_messages_path(params[:group_id]) } format.json end 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

haml

.flash-box .wrapper .chat-main .main-header .main-header__left-box %h2.main-header__left-box__current-group = @group.name %ul.main-header__left-box__member-list Menber - @group.users.each do |user| = user.name .messages = render @messages .form = form_for [@group, @message] do |f| = f.text_field :content, class: 'form__message', placeholder: 'type a message' .form__mask = f.label :image, class: 'form__mask__image' do = fa_icon 'picture-o', class: 'icon' = f.file_field :image, class: 'hidden' = f.submit 'Send', class: 'form__submit' , id: 'ajax'

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

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

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

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

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

guest

回答1

0

自己解決

image_uploader.rb

のstorage :fogをコメントアウトしたら送信できました

投稿2019/12/12 02:00

yakumo02

総合スコア103

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問