Ask A Question

Notifications

You’re not receiving notifications from this thread.

User Avatars with ActiveStorage Discussion

Hi Chris, great episode. I posted a question about ActiveStorage but I have not received any response yet. Basically what i want to do is upload images for a has_many_attached directly from a controller. Let's say that given a folder route, upload all images in that folder, i know how to get the images and all, but i don't now how to attacht all those images?

Thanks in advanced.

Reply

I understand how you can create a variant to resize the original uploaded image, but how about other formatting, more specifically making the avatar a circle not a square. I realize that you can use CSS to achieve this, but such CSS doesn't always work. For example Outlook doesn't recognizes rounded corners CSS.

I built an app that generates email signatures and thus I want the image itself to have a circular formatting by applying a mask or something similar. How would I apply such a transformation to the image with active storage? What are the parameters for the variant?

Reply

Hi Chris, is there any episode (or can you plan one!) that demonstrates how to have a javascript editor so the user can 'center' the crop of the avatar? In real world cases, the users will never upload a 'perfect' avatar to be used with a circle, it will generally be off-center, so solutions like CSS object-fit: cover; don't end up with a perfectly centered image.

Reply

Hi TL,

Did you ever find a solution for this? I am trying to figure out how to do the same thing.

Reply

https://github.com/Foliotek/Croppie seems like a good javascript plugin to do exactly what you need

Reply

Would be interesting to see if it's possible to extend that to add remote URL for avatars — would replace things like Carrierwave pretty much entirely. Another nice to have for a future tutorial: previewing the avatar before saving.

Reply

hello,
i am having a problem , i want to work with active storage using uuids,
i changed the migration file but i am getting PG::UndefinedFunction: ERROR: function gen_random_uuid() does not exist can someone help .
i tried to add :

enable_extension "uuid-ossp"
enable_extension 'pgcrypto'
in the migration file but did not work

Reply
Reply

I got a problem with line
<%= image_tag gravatar_image_url(current_user.email, size: 100), height: 100, width: 100, class: "rounded-circle" %>

Error message:
Showing app/views/devise/registrations/edit.html.erb where line #17 raised:
undefined method `escape' for URI:Module

With Ruby3.0, URI.escape was removed
https://github.com/ruby/uri/issues/14#issuecomment-751501927

Reply

Did you ever resolve this? I just hit the same problem.

Reply

Yes, I resolved it. When I trial this, I used Rails 7 alpha2. I need to

  • Install some libvips & make config for it to work --> I think we don't need this if you use Rails 7.0. Because I hear that lipvips are used by default in this latest Rails release
    Gemfile
    gem 'image_processing', '~> 1.2'
    development.rb
    # config :vips lib for image processing
    config.active_storage.variant_processor = :vips

  • Remove gravatar_image_tag from Gemfile and use this helper
    def display_avatar_url(size: :middle)
    height = AVATAR_SIZE[size] || size
    if avatar.attached?
    avatar.variant(resize_to_fill: [height, nil])
    else
    "https://www.gravatar.com/avatar/#{Digest::MD5.hexdigest(name)}?d=identicon&s=#{height}"
    end
    end

Reply

use instazoomhd to enlarge instagram profile picture

Reply

I think use instazoom.mobi/tr is better, cause it can zoom and download any photos on Instagram.

Reply

Hello, I am new in this, studying about Active Storage I want something like I can create recipe and in recipe model I have one image to store I understood in this video about Active Storage but don't know how can I pass image and API data both with postman. Please anyone can help?

Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 85,376+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.