How to display image returned from Mongoid::GridFs

Question

I'm trying to display my image saved in Mongo in the record row with the rails_admin gem.

I have my model saving, and my image saving, and I'm saving the image ID in the model record.

Here's my model:

require 'mongoid/grid_fs'

class Asset
  include Mongoid::Document

  field :data_file_name, type: String  
  field :data_content_type, type: String  
  field :data_file_size, type: Integer
  field :image_id, type: String
end

Here's what I'm trying to do in rails_admin.rb for my Asset model:

list do
  field :id        
  field :data_file_name
  field :data_content_type
  field :data_file_size
  field :image do
    formatted_value do
      grid_fs = Mongoid::GridFs
      bindings[:view].tag(:img, { :src => grid_fs.get(bindings[:object].image_id)})
    end
  end
end

And here's the action responsible for saving the model and image:

register_instance_option :controller do
          proc do
            if request.get? # EDIT
              respond_to do |format|
                format.html { render @action.template_name }
                format.js   { render @action.template_name, layout: false }
              end

            elsif request.put? # UPDATE
              tempFile = params[:picture][:asset].tempfile
              file = File.open(tempFile)
              grid_fs = Mongoid::GridFS
              grid_file = grid_fs.put(file.path)
              Asset.new.tap do |asset|
                asset.data_file_name = params[:picture][:asset].original_filename
                asset.data_content_type = params[:picture][:asset].content_type
                asset.data_file_size = ::ApplicationController.helpers.number_to_human_size(File.size(tempFile))
                asset.image_id = grid_file.id
                asset.save
                binding.pry
              end
            end
          end
        end

The model is saving, and I can see the file saving in fs.files and fs.chunks, but at the moment, I'm just getting the following in the record row:

Update:

I've now tried getting the file from mongo (Which seems to work) and then displaying the image by using the file's actual filename.

field :image do
    formatted_value do
        grid_fs = Mongoid::GridFs
        f = grid_fs.get(bindings[:object].image_id)
        bindings[:view].tag(:img, { :src => f.filename})
    end
end

Unfortunately this hasn't changed anything. Trying to open the image in a new tab takes me to the following link: /admin/asset#<Mongoid::GridFs::Fs::File:0x981vj5ry>

Update 2:

Changed field :image_id, type: String to field :image_id, type: BSON::ObjectId

No change in result.

Answer 1

After a lot more research, it looks like you can encode the data returned from grid_fs to base64.

In turn, you can use this to display the image by specifying the source to be data:image/png;base64,+base64Image like so:

field :asset_thumbnail do
    formatted_value do
        grid_fs = Mongoid::GridFs
        f = grid_fs.get(bindings[:object].thumb_image_id)
        b64 = Base64.strict_encode64(f.data)
        bindings[:view].tag(:img, { :src => "data:image/png;base64,"+b64})
    end
end