1

This is rails 3.0.x. I was just wondering how to update an attribute of a model's photo/avatar directly without prompting the user to upload from his/her system?

I am using Paperclip to attach a photo to a model; It has the extension so that a user can use a URL to upload a photo. This works.

Now, I was looking at Canvas2Image, and it returns an image of the canvas so user's can download them.

I was wondering how to use the URL that Canvas2Image returns so I can update the current model's photo directly?

For now, I have this form that prompts the user to update the current model's avatar/photo:

<% form_for(@prototype,
            :url=>{:controller=>"prototypes",
            :action=>"update"}, 
            :html => { :multipart => true }) do |f| %>

    <%= f.file_field :avatar %><br><br>
    <%= f.text_field :image_url %><br><br>
    <%= submit_tag   "Save Prototype" %>

<% end %>

Any help is appreciated, thanks!

bunnybare
  • 183
  • 1
  • 9

3 Answers3

1

If you want to fetch the gravatar using users' email address you can use the following code snippet.

In a helper:

def avatar_url(user)    
 gravatar_id = Digest::MD5.hexdigest(user.email.downcase)
 return "http://gravatar.com/avatar/#{gravatar_id}.png?s=48&d=#{CGI.escape(default_url)}"         
end

In your view:

<%= link_to(image_tag(avatar_url(user)), user_path(user))%>

That's it! You need not to ask user to upload your photo in your system. It will show the photo of his gravatar account. Please let me know whether it solves your problem.

Chowlett
  • 45,935
  • 20
  • 116
  • 150
Fuad Omar
  • 81
  • 1
  • 5
  • Hi Fuad! This is wonderful for my user's profile. Right now though, its not what I'm looking for. My users have alot(has_many relationship) of prototypes and these prototypes have an image attached to them! Just wondering how I can let the users edit these images through a canvas and save it directly to the server.(My ultimate goal) – bunnybare Jun 07 '11 at 12:42
1

From your link to Canvas2Image above it looks to me like you are trying to handle Base64-encoded images (like data:image/octet-stream;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wB).

Paperclip expects a Tempfile object, which is created behind the scenes for you when you upload an image. It is possible to fake a Tempfile by using a StringIO object and adding content_type and original_filename instance methods.

I posted a gist with the code I used to accomplish this in one of my projects. https://gist.github.com/1012107.

For you to do something similar you'd need to remove the beginning portion of the Canvas2Image URIs data:image/octet-stream;base64, and use the remaining Base64 code as the image_data. You'd need a way to provide or work around the content-type and filename.

If you just want to use normal URLs like http://example.com/image.jpg then you have several available options.

You could simply save the URL and use it as an image source on your pages. I know this isn't always an option, and you have no control over the availability of the image.

Otherwise, there are several utilities such as net/http and curl that you could use to download the image. If you think you want to go this route then you might also consider downloading the images using delayed jobs or a similar background process. That way your UI doesn't hang if the image download is slow.

Wizard of Ogz
  • 12,543
  • 2
  • 41
  • 43
  • This is relevant to my question. I was wondering what you meant with content-type and filename? Content type as in, PNG, JPG, etc? File name as in have the code provide one instead of the image data as the name? Cheers. – bunnybare Jun 07 '11 at 13:30
  • Yes, content-type as in PNG, JPG, etc. – Wizard of Ogz Jun 07 '11 at 13:50
  • I think auto-generating the filename in your case would be a good idea. – Wizard of Ogz Jun 07 '11 at 13:51
  • In your gist, does it assume all images coming through are Base64-encoded? – bunnybare Jun 07 '11 at 14:21
  • No, regular file uploads also work. In fact the application I pulled the example from uses both methods. The normal file upload is used for the Web UI, and the Base64 method is used for a JSON API, so that users can upload photos from an iPhone app. – Wizard of Ogz Jun 07 '11 at 15:30
1

This link might be what you're looking for

However, if you haven't done much work with paperclip yet, I would recommend you to swap to CarrierWave. The same thing is done with two lines of code:

@prototype.image_remote_url = canvas2image_url #you should change this
@prototype.save
bassneck
  • 4,053
  • 4
  • 24
  • 32
  • Hey bassneck! Thanks for answering. I already impelemented this feature with Paperclip(I mentioned "a user can use a URL to upload a photo"). Still, it asks the user to provide the URL for the image. I was asking how to do it using an image provided by Canvas2Image(look at my link for the demo). Where the user draws on a canvas, converts it to an image and presses a button to overwrite the current image of the prototype! – bunnybare Jun 07 '11 at 13:10