Skip to content

Instantly share code, notes, and snippets.

@WizardOfOgz
Created June 7, 2011 12:13
Show Gist options
  • Save WizardOfOgz/1012107 to your computer and use it in GitHub Desktop.
Save WizardOfOgz/1012107 to your computer and use it in GitHub Desktop.
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
@AndrewRayCode
Copy link

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

@pjar
Copy link

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

@billychan
Copy link

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

@TangMonk
Copy link

TangMonk commented Mar 9, 2015

@delvarworld thanks!!

@augnustin
Copy link

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
Copy link

Tehyun commented Apr 21, 2015

Thank you Ogz!

@avremel
Copy link

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

@avremel
Copy link

avremel commented Apr 29, 2015

@dominiceden
Copy link

dominiceden commented Sep 4, 2016

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.

@sarink
Copy link

sarink commented Mar 8, 2018

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.

@MohamedHegab
Copy link

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

@bbugh
Copy link

bbugh commented May 24, 2018

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

@Leoxxid
Copy link

Leoxxid commented Nov 21, 2018

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

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