Implementing Image Uploading in Ruby

Hello, this blog is simply going to walk you through how to implement image uploading to a react frontend with a ruby on rails backend.

First you want to create your database. Making sure you have models, controllers, and serializers for your data. You will also want to make sure that you have told your seeds file that your database contains images. Here is an example.
You can see I implemented the images on lines 15, 17, 19, 23, 25, and 27. I was able to save my images in a file and access them through app/assests/imagefilename.

Once you have that you want to install active storage using the command:
rails active_storage:install.

After that run the migration using:
rails db:migrate
This will create two new tables called active_storage_blobs and active_storage_attachments. These are important. Your code should also automatically include the files storage this will be where the database stores the images you added, as well as any more you add along the way.

These commands should also add a storage.yml file. If none of these files are included simply add them in and it should work.

Now that all the files have been created and your images are in your database, it is time to create your associations. If for example you created image uploading in products your product.rb file should include an association saying has_one_attached and what you called the image. For example: On line 8 I called my images for the products :photo. The dependent: :destroy is basically saying if I delete a product remove the attached image as well.

Whew, almost done with the backend section. Ok, now that we have that, next we need to make sure we have the proper validations to not throw an error. There are a couple ways to do this. You could write the validation in the model like so : with a helper method such as this: .

I chose to do mine this way, implementing a helper method in my serializer.

If you are able to I recommend doing it the first way I mentioned.

To make sure the image is the proper size you can add logic to your helper method such as
unless main_image.byte_size <= 1.megabyte
errors.add(:main_image, "is too big")
end
as well as
acceptable_types = ["image/jpeg", "image/png"]
unless acceptable_types.include?(main_image.content_type)
errors.add(:main_image, "must be a JPEG or PNG")
end
These would be to make sure your image is in the correct format and that it is a decent size to be able to display it in your front end.

Ok, hang in there. Almost done!

Next, we need to make sure we have access to the images. We can do that be installing a gem in the Gemfile called:

Then install it using bundle install in the terminal. You also want to say sudo apt-get install imagemagick to make sure you have all the logic implement.

Now that the logic is in all you need to do is let your frontend know there is an image to be used. This is the example that I used.

This calls avatarURl and assigns it to the image that I use on line 26.
It's a ternary to say if the image I uploaded is present display it, otherwise show the default avatar that I uploaded.

Boom! Just like that you have implemented image uploading!