Implementing Image Uploading in Ruby
Tags: beginners, react, database, rails
Published: 2022-07-05 13:56:22

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.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ebtvenvqmose4ku1cplc.png) 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: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4h8swenl7fvwzg69xbw8.png)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 : ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70sa91ozhja6qyphqxpo.png) with a helper method such as this: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4wqcwwkiyga6otnrdiz.png). 

I chose to do mine this way, implementing a helper method in my serializer. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkse846ce6iz81gcbeke.png)
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: ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vm005w8o9un03xubwgnj.png)

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. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsct24pvuqp94wef22pn.png)
This calls avatarURl and assigns it to the image that I use on line 26.![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmq5fdcwrni2xzt3kf2h.png)
  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!