Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Save Base64-encoded images with Paperclip
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.

mbusch commented May 22, 2014

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

mbusch commented Aug 29, 2014

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.

evan-007 commented Nov 4, 2014

@delvarworld thank you!

mehulkar commented Jan 8, 2015

@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.

pjar commented Jan 20, 2015

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.

TangMonk commented Mar 9, 2015

@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?

Tehyun commented Apr 21, 2015

Thank you Ogz!

avremel commented Apr 28, 2015

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

dominiceden commented Sep 4, 2016 edited

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment