前提・実現したいこと
ruby no rails でブログのようなサイトを作成している最中です。
記事の作成フォームをユーザーフレンドリーにするため、**summernote **を導入しました。
user アバターのために、carrierwavaの導入も行いました。
本番環境ではHerokuを使用しています。
そこでHerokuにはアップロードした画像などが1日経過すると消えてしまうことがわかり
cloudinaryアドオンを追加しました。
結果として、userアバターは消えることがなくなりましたが、
summernoteの方で文章中に挿入された画像は消えてしまいます。
タイトルの通りになりますが
summernoteとcarrierwaveとcloudinaryの連携の方法がわからず困っております
該当のソースコード
/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のダッシュボードを確認すると、選択した画像が保存されていることがわかりましたが
画像の表示がおかしくなる
あなたの回答
tips
プレビュー