Hi everyone. In this blog I ‘m going to walk you through the process of creation custom user avatars with real user pictures. This blog is going to have 3 parts and include several steps, like setting up the App environment, creation a Photo Uploader, uploading user photos to the cloud service and getting them back for rendering them in the App, rendering them in any custom format, like circled and face detected.
I’m going to demonstrate all the steps on a small app with a User Model. For saving a time I skip creation of Rail App and database and go straight to the topic.
1.Adding Active Storage.
The first step that I’m going to start with is adding Active Storage to the backend of the App(Rails). Active Storage does the job of uploading and retrieving files to a cloud storage service (like Amazon S3, Google Cloud Storage, etc) and attach those files to Active Record objects(Models). Active Storage is already integrated into Rails, just need to run 2 commands:
rails active_storage:install
rails db:migrate
It will add two tables in the application’s database:
- active_storage_blobs ,
- active_storage_attachments.
Active_storage_blobs is a record that contains filename(which is the actual file name uploaded from user machine), content_type (file type, image/jpeg), the metadata about a file and a key which is used as id of the image on Cloudionary. The storage service that I’m going to integrate to this app uses the blob key as an image name (later on I’m going to use the blob.key to retrieve the file from the storage service).
Active_storage_attachments is a polymorphic join table that stores:
- a model’s class name that have an attachment (“record_type” column),
- id of instance of the model (“record_id” column),
- id of blob attachment (“blob_id” column)
My last blog post is just about polymorphic relationship, so if you want to get dipper into it you are more than welcome to read it. https://medium.com/@juliana.ny2008/rails-polymorphic-associations-30436714c774
2. Second step is choosing and setting up the storage service.
In config/environment(both: development and production folders) you can see this line of code:
By default, when you create a new Rails application is set to :local. Yes, you can store the attached files locally, for development purpose, but for storing a big amount of files I recommend use another storage service. There are many services like :amazone , :google, :microsoft . I decided to go with Cloudinary service for my App, so I changed the setting accordingly:
Also it is necessary to set the appropriate values in config/storage.yml.
We are only half way on setting up. Lets move forward and create an account on https://cloudinary.com. With a free plan, the maximum image file size which can be uploaded to Cloudinary is 10 MB. After you sign in, go to your dashboard and download YML file which is located on the top right of your dashboard.
Add cloudionary.yml file that you have just downloaded to your config folder. The file has your api key and api secret, so ensure to add this file to gitignore.
Add the cloudinary gem to your Gemfile:
and run bundle install.
3. Next step is to make some additions to a User model.
has_one_attached :photo creates a mapping between User model and attached File. Ensure that your User table DOES NOT have column with the same name(“photo”). When you try to run the App it will cause an error :
This is it for setting up. The second part of this blog shows how to create a photo uploader with a preview, upload photo to a storage and get it back.
