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

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

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

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

Q&A

0回答

430閲覧

Rails Summernote CarrierWave Cloudinaryを利用したい

sngw

総合スコア0

Ruby on Rails 5

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

0グッド

0クリップ

投稿2020/05/18 09:35

編集2020/05/19 04:51

前提・実現したいこと

ruby no rails でブログのようなサイトを作成している最中です。
記事の作成フォームをユーザーフレンドリーにするため、**summernote **を導入しました。
user アバターのために、carrierwavaの導入も行いました。
本番環境ではHerokuを使用しています。
そこでHerokuにはアップロードした画像などが1日経過すると消えてしまうことがわかり
cloudinaryアドオンを追加しました。
結果として、userアバターは消えることがなくなりましたが、
summernoteの方で文章中に挿入された画像は消えてしまいます。

タイトルの通りになりますが
summernotecarrierwavecloudinaryの連携の方法がわからず困っております

該当のソースコード

/summernote-init.coffee

sendFile = (file, toSummernote) -> data = new FormData data.append 'upload[image]', file $.ajax data: data type: 'POST' url: '/uploads' cache: false contentType: false processData: false success: (data) -> img = document.createElement('IMG') img.src = data.url console.log data img.setAttribute('id', "sn-image-#{data.upload_id}") toSummernote.summernote 'insertNode', img deleteFile = (file_id) -> $.ajax type: 'DELETE' url: "/uploads/#{file_id}" cache: false contentType: false processData: false $(document).on 'turbolinks:load', -> $('[data-provider="summernote"]').each -> $(this).summernote lang: 'ja-JP' height: 400 callbacks: onImageUpload: (files) -> sendFile files[0], $(this) onMediaDelete: (target, editor, editable) -> upload_id = target[0].id.split('-').slice(-1)[0] console.log upload_id if !!upload_id deleteFile upload_id target.remove()

image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base include Cloudinary::CarrierWave process :convert => 'png' mounted: def store_dir "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}" end end

uploaders_controller.rb

class UploadsController < ApplicationController def create @upload = Upload.new(upload_params) @upload.save respond_to do |format| format.json { render :json => { url: @upload.image.url, upload_id: @upload.id } } end end def destroy @upload = Upload.find(params[:id]) @remember_id = @upload.id @upload.destroy FileUtils.remove_dir("#{Rails.root}/public/uploads/upload/image/#{@remember_id}") respond_to do |format| format.json { render :json => { status: :ok } } end end private def upload_params params.require(:upload).permit(:image) end end

こちらのサイトを元にsummernoteの導入を行いました。

image_uploader.rbにcloudinaryの記述を行いました。

JavaScriptの記述が問題なのでしょうか?※JavaScriptについてはほとんど知識がなく
どなたかお助けいただけませんか?
よろしくお願いします。

エラーについて追記します-2020/05/19

terminal

1Started POST "/uploads" for ::1 at 2020-05-19 13:46:50 +0900 2Processing by UploadsController#create as */* 3 Parameters: {"upload"=>{"image"=>#<ActionDispatch::Http::UploadedFile:0x00007fc262966fc8 @tempfile=#<Tempfile:/var/folders/1v/z9ljm971349c50_qs5f5wy_h0000gn/T/RackMultipart20200519-19326-wz6m90.jpg>, @original_filename="jiyu.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"upload[image]\"; filename=\"jiyu.jpg\"\r\nContent-Type: image/jpeg\r\n">}} 4 (0.1ms) begin transaction 5 SQL (0.5ms) INSERT INTO "uploads" ("image", "created_at", "updated_at") VALUES (?, ?, ?) [["image", "dtcgxdmlua3jd5ddxkpg.png"], ["created_at", "2020-05-19 04:46:50.050482"], ["updated_at", "2020-05-19 04:46:50.050482"]] 6 SQL (0.1ms) UPDATE "uploads" SET "image" = 'image/upload/v1589863584/dtcgxdmlua3jd5ddxkpg.png' WHERE "uploads"."id" = ? [["id", 7]] 7 (1.6ms) commit transaction 8Completed 200 OK in 1710ms (Views: 0.2ms | ActiveRecord: 2.4ms) 9 10 11Started GET "/posts/null" for ::1 at 2020-05-19 13:46:51 +0900 12Processing by PostsController#show as HTML 13 Parameters: {"id"=>"null"} 14 User Load (0.4ms) SELECT "users".* FROM "users" WHERE "users"."id" = ? ORDER BY "users"."id" ASC LIMIT ? [["id", 1], ["LIMIT", 1]] 15 Post Load (0.2ms) SELECT "posts".* FROM "posts" WHERE "posts"."id" = ? LIMIT ? [["id", 0], ["LIMIT", 1]] 16Completed 404 Not Found in 4ms (ActiveRecord: 0.6ms) 17 18 19 20ActiveRecord::RecordNotFound (Couldn't find Post with 'id'=null):

cloudinaryのダッシュボードを確認すると、選択した画像が保存されていることがわかりましたが
画像の表示がおかしくなる
イメージ説明

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問