Save Base64-encoded images with Paperclip

gistfile1.rb

class Avatar < ActiveRecord::Base

  attr_accessor :content_type, :original_filename, :image_data
  before_save :decode_base64_image

  has_attached_file :image,
    PAPERCLIP_CONFIG.merge(
    :styles => {
      :thumb => '32x32#',
      :medium => '64x64#',
      :large => '256x256#'
    })

  protected
    def decode_base64_image
      if image_data && content_type && original_filename
        decoded_data = Base64.decode64(image_data)

        data = StringIO.new(decoded_data)
        data.class_eval do
          attr_accessor :content_type, :original_filename
        end

        data.content_type = content_type
        data.original_filename = File.basename(original_filename)

        self.image = data
      end
    end
end

How does your migration look like?

Paperclip automatically detects and supports base64 data, if the data uri format is used.

@matthuhiggins could you explain that further, please? I would really appreciate your input on this!

@mbusch see https://github.com/thoughtbot/paperclip/blob/43eb9a36deb09ce5655028a1061578dbf0268a5d/lib/paperclip/io_adapters/data_uri_adapter.rb

Sorry, I didn't recognized your answer until now - thanks, that really helps!

@Exteris Can you explain how to use it?

For anyone unlucky enough to try to do this, don't worry, I've gone through all the pain for you. This is all you need to add to your model class:

do_not_validate_attachment_file_type :image
has_attached_file :image, :default_url => "/whatever-who-cares.png"

And just make sure your POST data to update contains:

    {
    "model:" {
        "image:" "data:image/png;base64,iVBORw0KGgo..."
    }

You do not need any of the code in the original gist with PaperClip >= 4.0. The base64 io_adapter is auto-loaded by PaperClip, so it will act on any field matching the base64 regex, even though it's not documented at all.

@delvarworld thank you!

@delvarworld do you set the filename manually? By default it seems to just get set to "data".

Looking back at it, my images are all named data as well. I did not try sending a filename key, that might work.

Having:

class Thing
    has_attached_file :image

and POST attributes:

 {
    "model:" {
        "image:" "data:image/png;base64,iVBORw0KGgo..."
     }
}

You need to specify original_filename for Thing. So for controller that would be:

image = Paperclip.io_adapters.for(params[:image]) 
image.original_filename = "something.png"
Thing.create(image: image)

original_filename was empty thus it was substituted here

@delvarworld, @pjar, I wish there is a upvote button next to your awesome comments.

@delvarworld thanks!!

Thanks.

@pjar, reading your comment, I understand that the filename is supposed to be accessed through another interface (sent in the form I guess).
But ain't there a way to deduce the extension (filename doesn't really matters) from the Base64 code itself? In data:image/png;base64,iVBO, image/png feels like a mimetype, right? Ain't there a pre-built paperclip method that would guess file extension?

Thank you Ogz!

Hi,

I am attempting to implement @pjar 's code into my controller but am getting stuck on Thing.create(image: image). I don't think I understand it, and therefore am failing to implement his solution in my code below:

  def create

    @form = Form.new(form_params)
    image = Paperclip.io_adapters.for(params[:base64])
    image.original_filename = "something.png"
    @form.image = image

    if @form.save
      flash[:success] = "The form has been successfully created!"
      redirect_to @form
    else
      render 'new'
    end
  end

Questioned answered here:
http://stackoverflow.com/questions/29930430/upload-base64-image-with-paperclip-rails-4

Thanks @delvarworld and @pjar - really helpful. I have also found that you can just include the original filename in the params too and Paperclip will automatically include it in the image processing and use it for the newly generated image.

e.g.

{ "model": { "image": "data:image/png;base64,iVBORw0KGgo...", "image_file_name": "file.png" } }

This is particularly useful if you are POSTing the base64 encoded image to a Rails API via a web app - as you can get the filename of the image via the FileReader HTML5 API and submit it in your POST request, like above. Hope this helps someone.

This is no longer included by default in v5. You have to register the DataUri IO adapter, see more here: https://github.com/thoughtbot/paperclip#io-adapters

You should still pass an image_file_name like above, though.

@sarink I've include Paperclip::DataUriAdapter.register in paperclip.rb and still don't upload the image

This is so easy!

If you're on paperclip 5.1.0 you don't need to use the Paperclip::DataUriAdapter.register, it's still included by default. I believe they only changed this with 5.2.0

Here it is saving only original format, any suggestion?
Paperclip 5.0