Wow, made it to the end of my Flatiron School software engineering program!
My capstone project has been one of the biggest challenges I have ever faced- and I'm old now, so that's saying a lot. The project itself, I feel is a good beginning for an extension project that I will continue to work on after the program has ended: a Craigslist-like app that is specifically for Bartering (goods, services, and another forum for free items or services). I think this could be the beginning of something really fantastic that can actually help, not hinder humans.
We need more tools like this to help connect us again, to help us help each other, to make the world a more positive place.
Anyways...I will get going on the Active Storage portion of my app.
Active Storage for Image Uploads
I knew that if this type of app was to be successful in today's world, it needed to have photo-video uploading capabilities. People are very visual and very fickle with their time now, so images are a must.
To accomplish this, I turned to Active Storage, a powerful tool that simplifies the process of uploading files to cloud storage services like Amazon S3, Cloudinary, and Google Cloud Storage- or simply uploading from your local machine.
To be honest, all the information I went through about Active Storage made it seem really easy to incorporate, I found that to be untrue at the time. I later discovered this was because of a simple error in tertiary code in my code body- discovered by my amazing advisor along the way. So...long story short, Active Storage IS very user friendly and can be incorporated into your Rails app quickly IF you don't have foolish mistakes in your code.;)
Now for the explanation of Active Storage:
Selecting Cloud Storage
First, you need to choose a cloud storage provider for your application. In my project, I opted for Amazon S3. Fortunately, a previous student had documented the step-by-step installation process, making it an easy choice. You can follow their guide here.
Installing Active Storage
To get started, install Active Storage by running the following commands in the terminal:
rails active_storage:install
rails db:migrate
This sets up the necessary tables and foreign key references in your database. Here is a reference image for what my schema looks like for my database after Active Storage installation:
Active Storage will do all the leg work for attaching images/ videos if you set up the backend properly. You do not need to create an additional column in your table(s) to have hole the image, as the image will be saved in the cloud storage, not in the database.
This is one of my tables for my different forums as an example of how image is not a column in there:
Many-to-Many Relationship
If your use case involves many-to-many relationships between a model and files, make sure to follow Rails naming conventions.
Modifying the Serializer
You'll need to modify the serializer to create a blob_path for the account image. This path is used to process the image_url into JSON for rendering as an image. I found it simpler to rename the attribute of the image_blob to "main_image" so the method name did not match and confuse things.
Association in Model
In your model you will need a specific association syntax for Active Storage associate the image to your model. YOu must have has_one_attached and the name you are giving your attached image. This name does not really matter but needs to be something you can remember and use throughout the app. Like this:
My app only allowed for one attached image, but Active Storage allows for multiple images and videos too. For syntax and extensive information check out the docs here.
Controller Configuration
Ensure that your controller is configured correctly. You really only need to add your param name to your strong params:
Now take a short break and get some coffee or a slice of pizza. On to the frontend next!
Frontend Handling
The simplest methods to send data from the JS frontend to the backend is by using the FormData API. First create state for the formData:
Then, in a handleSubmit function use the formData/ append method. Note: the syntax wit the user_id is required with this method.
Lastly, in you form include an image or images input with similar syntax. The onChange is the most important portion of this and corresponds to an onChange that handles the event and value.
Save everything, then restart your Rails server. This should have done most, if not all the legwork for setting up basic Active Storage for your app.
Note: Don't try to console.log formData because it will just be an empty object and confuse you. Also, you will know when the image data is going through properly when you see something like this in your rails server:
Additionally, if in your Network tab in the DOM you are seeing this in the payload:
and this in the preview and response,
then you have our image data getting through and simply need to handle how it renders on the front end.
I hope this helps someone, somewhere with Active Storage. Like I said before, it is fairly easy to setup as long as all gem-files, like serializer, are installed properly and other dependencies are all in place too. This is a cool Rails add-on that makes image uploading and storage super easy.
Good luck on your coding journey!
Top comments (0)