medium-editor-railsでアップロード画像がbase64になる

Question

前提・実現したいこと

ruby on railsで投稿サイトを構築しており、Mediumを投稿画面のエディターで入力できるようにしたいと考えてます。
画像をアップロードすると画像ファイルがbase64になっているのをdummy.pngなど画像ファイル名に変換する方法はあるのでしょうか？

画面キャプチャ

該当のソースコード

こちらが設定しているソースです。

▼ Gemfile

gem 'carrierwave'
gem 'medium-editor-rails'
gem 'medium-editor-insert-plugin-rails'

▼ /app/assets/javascripts/application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require medium-editor
//= require medium-editor-insert-plugin
//= require_tree .

▼ /app/assets/stylesheets/application.css

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require medium-editor/medium-editor
 **= require medium-editor/themes/beagle
 **= require medium-editor-insert-plugin
 *= require_tree .
 *= require_self
 */

▼ /app/models/image.rb

class Image < ApplicationRecord
  mount_uploader :file, ImageUploader
end

▼ config/routes.rb

post 'images/upload', to: 'images#upload'

▼ /app/controllers/images_controller.rb

class ImagesController < ApplicationController
  def upload
    files = params.require(:files)

    @image = Image.new
    @image.file = files[0]
    respond_to do |format|
      if @image.save
        format.html { redirect_to @image, notice: 'Image was successfully created.' }
        format.json do
          render json: {
            files:
              [
                {
                  url: @image.file.metadata['url']+"?id=#{@image.file.model.id}",
                  thumbnail_url: @image.file.metadata['url']+"?id=#{@image.file.model.id}",
                  size: 0,
                  delete_url: "/images/delete",
                  delete_type: "DELETE"
                }
              ]
          }
        end
      else
        format.html { render :new }
        format.json { render json: @image.errors, status: :unprocessable_entity }
      end
    end
  end
end

▼ /app/views/articles/_form.html.erb

<%= form_with(model: article, local: true, class: 'siimple-form') do |form| %>
  <% if article.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(article.errors.count, "error") %> prohibited this article from being saved:</h2>

      <ul>
      <% article.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="siimple-form-field">
    <%= form.label :title, class: 'siimple-label' %>
    <%= form.text_field :title, id: :article_title, class: 'siimple-input' %>
  </div>

  <div class="siimple-form-field">
    <%= form.label :body, class: 'siimple-label' %>
    <%= form.text_area :body, id: :article_body, class: 'editable siimple-textarea siimple-textarea--fluid' %>
  </div>

  <div class="siimple-form-field">
    <%= form.submit class: 'siimple-btn siimple-btn--blue' %>
  </div>
<% end %>

<script>
$(document).ready(function(){
  var editor = new MediumEditor('.editable', {
    // placeholder settings
    placeholder: {
      text: 'Type your story',
      hideOnClick: true
    }
  });

  $('.editable').mediumInsert({
    editor: editor,
    addons: {
      preview: false,
      images: {
        fileUploadOptions: {
          url: '/images/upload',
          type: 'post',
          acceptFileTypes: /(.|/)(gif|jpe?g|png)$/i
        }
      }
    }
  });
});
</script>

▼ /app/uploaders/image_uploader.rb （※追記）

class ImageUploader < CarrierWave::Uploader::Base
  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  storage :file
  # storage :fog

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end

  # Provide a default URL as a default if there hasn't been a file uploaded:
  # def default_url(*args)
  #   # For Rails 3.1+ asset pipeline compatibility:
  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
  #
  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
  # end

  # Process files as they are uploaded:
  # process scale: [200, 300]
  #
  # def scale(width, height)
  #   # do something
  # end

  # Create different versions of your uploaded files:
  # version :thumb do
  #   process resize_to_fit: [50, 50]
  # end

  # Add a white list of extensions which are allowed to be uploaded.
  # For images you might use something like this:
  def extension_whitelist
    %w[jpg jpeg gif png]
  end

  # Override the filename of the uploaded files:
  # Avoid using model.id or version_name here, see uploader/store.rb for details.
  def filename
    # 'something.jpg' if original_filename
    "#{secure_token}.#{file.extension}" if original_filename.present?
  end

  # def download_url(filename)
  #   url(response_content_disposition: %Q{attachment; filename="#{filename}"})
  # end

  protected
  def secure_token
     var = :"@#{mounted_as}_secure_token"
     model.instance_variable_get(var) or model.instance_variable_set(var, SecureRandom.uuid)
  end
end

ドキュメント

公式のドキュメントを閲覧したのですが、該当の箇所がよくわからず。。。
MediumEditor
medium-editor-rails

補足情報（FW/ツールのバージョンなど）

構築している環境はこちらです。

Ruby 2.4.0
Rails 5.2.0
mysql 5.7

参考にした記事

Railsにmedium-editorでMedium.comライクな投稿機能を導入する

Comments

[winterboum]

ImageUploader　の　codeを

[chokosuki4400]

ご確認頂いてありがとうございます！
ImageUploaderのコードを追記しました。

■追記箇所
▼ /app/uploaders/image_uploader.rb （※追記）

[winterboum]

class ImagesController < ApplicationController　が載っていて
/app/uploaders/image_uploader.rb 　ではないです

[chokosuki4400]

失礼しました！
class ImageUploader < CarrierWave::Uploader::Base に修正しました。

Answer 1

def filename
    "#{secure_token}.#{file.extension}" if original_filename.present?
end
def secure_token
     var = :"@#{mounted_as}_secure_token"
     model.instance_variable_get(var) or model.instance_variable_set(var, SecureRandom.uuid)
end

になっているためです。
Uploadするファイル名に日本語が入っている可能性がたかいから、そのまま使うのはやめたほうがよいですが、SecureRandom.uuid　が嫌でしたら、ここを適宜変更してみて下さい。