DEV Community: Steven Gutierrez

Active Storage Ruby on Rails

Steven Gutierrez — Wed, 08 Nov 2023 23:04:49 +0000

In today's guide, we'll explore how to seamlessly integrate Active Storage, a powerful feature of Ruby on Rails, into your web application. Active Storage allows you to manage file uploads, making it an essential tool for any project that requires handling images, documents, or any other form of file attachments. We will create a simple User model and configure image uploading for user avatars. We'll also use Active Storage Validations and Mini_Magick for image processing.

For this guide an assumption is made that you already know how to setup and create a Ruby on Rails application that uses React JS for the frontend.

Prerequisites

Before we begin, ensure you have the following:

Ruby on Rails installed and setup for your project
Node.js and Yarn installed (for React)
Basic knowledge of Ruby on Rails and React

Step 1: Setting Up a New Rails Application

Let's start by creating a new Rails application. Open your terminal and run:

rails new ActiveStorageExample --database=postgresql
cd ActiveStorageExample

This command will create a new Rails application named "ActiveStorageExample" using PostgreSQL as the database.

Step 2: Configuring Active Storage

Now, let's configure Active Storage for our application. Install Active Storage in the terminal with:

rails active_storage install 
rails db:migrate

Add the following line to your config/application.rb file:

config.active_storage.variant_processor = :mini_magick

This line configures Active Storage to use MiniMagick for image processing. If you don't need to process the images being uploaded you can skip this part

Step 3: Creating the User Model

Next, let's generate a User model and all necessary files with a user name, first/last name and an avatar image. Run the following command:

rails generate scaffold User username first_name last_name
rails db:migrate

Now, let's add Active Storage to our User model. In app/models/user.rb, make sure it looks like this:

class User < ApplicationRecord
 has_one_attached :avatar
end

This associates the User model with Active Storage and enables us to attach avatar images.

Step 4: Updating the User Controller

In your app/controllers/users_controller.rb, add the avatar attribute to the list of permitted parameters:

def user_params
 params.require(:user).permit(:name, :first_name, :last_name, :avatar)
end

Step 5: Setting Up React as the Frontend

In this example, we'll use React as our frontend library. You can set up your React frontend as needed. Make sure you've installed the required dependencies and also set up your React components as you see fit. For reference I will use this form example below to handle the user data upload:

import React, { useState, useRef } from 'react';

const UserForm = () => {
  const [userData, setUserData] = useState({
    username: '',
    firstName: '',
    lastName: '',
  });
  const imageFile = useRef(null);

  const handleChange = (e) => {
    const { name, value } = e.target;
    setUserData({ ...userData, [name]: value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const formData = new FormData();
    formData.append('user[username]', userData.username);
    formData.append('user[first_name]', userData.firstName);
    formData.append('user[last_name]', userData.lastName);
    formData.append('user[avatar]', imageFile.current.files[0]);

    try {
      const response = await fetch('/users', {
        method: 'POST',
        body: formData,
        // by using FormData() headers are not necessary
      });

      if (response.ok) {
        response.json().then((userData) => {
          console.log(userData)
        });
      } else {
        // Handle errors (e.g., show an error message)
        console.error('Error updating data.');
      }
    } catch (error) {
      console.error('An error occurred while submitting data:', error);
    }
  };

  return (
    <form onSubmit={handleSubmit} method="post" >
      <div>
        <label htmlFor="username">Username:</label>
        <input
          type="text"
          id="username"
          name="username"
          value={userData.username}
          onChange={handleChange}
        />
      </div>
      <div>
        <label htmlFor="firstName">First Name:</label>
        <input
          type="text"
          id="firstName"
          name="firstName"
          value={userData.firstName}
          onChange={handleChange}
        />
      </div>
      <div>
        <label htmlFor="lastName">Last Name:</label>
        <input
          type="text"
          id="lastName"
          name="lastName"
          value={userData.lastName}
          onChange={handleChange}
        />
      </div>
      <div>
        // Insert Image file functionality here...
      </div>
      <div>
        <button type="submit">Submit</button>
      </div>
    </form>
  );
};

export default UserForm;
}

Step 6: Adding Image Upload Functionality

Now, let's add image upload functionality to your React frontend. Create an input that allows users to select and upload their avatars.

Here's a simplified example:

    <div>
        <label htmlFor="avatar">Avatar:</label>
        <input
          type="file"
          id="avatar"
          name="avatar"
          ref={imageFile}
        />
    </div>

Step 7: Adding Active Storage Validations

Active Storage Validations is a gem that provides easy-to-use validation rules for your attachments. Add it to your Gemfile:

gem 'active_storage_validations'

Make sure to install the gem:

bundle install

In your User model, add the following validations:

class User < ApplicationRecord

  has_one_attached :avatar

  validates :avatar, content_type: ['image/png', 'image/jpg', 'image/jpeg']

end

Step 8: Processing Images with MiniMagick

If you need to manipulate the uploaded images, you can use MiniMagick. It's already configured in your Rails application.

In your controller or a service, you can use MiniMagick to process the images. Here's an example of resizing the avatar:

user.avatar.variant(resize: '100x100').processed

By resizing the image down to 100x100-pixel square, we will allow for faster load times for our app.

Step 9: Ensuring that the image data is being sent to the frontend

Much of the configuration and validations are handled at this point, however we need to send the image back to the front end to be rendered client-side.

In your User model add a Rails helper and custom method:

class User < ApplicationRecord
  include Rails.application.routes.url_helpers

  has_one_attached :avatar

  validates :avatar, content_type: ['image/png', 'image/jpg', 'image/jpeg']

  def image_url 
    url_for(self.image)
  end
end

In your Serializer include this method to format the User image, make sure to pass the method name as an attribute:

def image_format 
    return unless object.image.attached?
    object.image.blob.attributes
        .slice('filename','byte_size')
        .merge(url: object.image_url)
        .tap { |attrs| attrs['name'] = attrs.delete('filename')}
end

In your development.rb file located in config/environment folder include the default url options:

  config.action_mailer.default_url_options = { host: 'localhost', port: 3000}

The host and port values only apply to the dev environment, for a production environment make sure to make the necessary changes.

In your routes.rb file include this line:


default_url_options :host => "http://localhost:3000"

Again this is only for the dev environment!

Conclusion

Congratulations! You've successfully integrated Active Storage into your Ruby on Rails application with a React frontend. You can now allow users to upload and display avatars while ensuring the files are in the correct format. Feel free to explore more features and customization options that Active Storage offers.

This is just the beginning. You can extend this functionality to handle more types of file uploads and integrate it into different parts of your application. Happy coding!

More Resources:

Active Record

Setting up a Rails/React Project

Setting up Amazon S3 for Active Storage

Rails Client-Server communication

Steven Gutierrez — Mon, 11 Sep 2023 02:51:24 +0000

In the world of web development, React and Ruby on Rails have emerged as a popular combination in many tech stacks, powering some of the most popular applications we use daily, like Airbnb and Hulu. Behind the scenes, these applications rely on a process known as the request-response cycle to communicate between the front end (React) and back end (Ruby on Rails). This cycle is the backbone of their functionality, allowing users to seamlessly interact with the platform. In this blog post, I'll break down each step needed to create a RESTful API while exploring the intricacies of client-server communication.

Understanding the Client-Server Communication:

Before explaining the request-response cycle, let's briefly describe what client-server communication is. In a React and Ruby on Rails application, React acts as the client, running in the user's browser, while Ruby on Rails serves as the server, handling requests from the client and delivering responses.

Client-Server Communication Steps:

Step 1: Client Sends a Request

First, a user interacts with the React UI. For instance, a user might want to view a list of available Airbnb properties. The React application sends an HTTP request to the Ruby on Rails server, specifying the type of request (GET, POST, PUT, DELETE) and the resource it needs. Each type of request (also known as HTTP verbs) is associated with a different action. A few common requests:

GET: Retrieve an item or items
POST: Create a new item
PUT: Update an item
DELETE: Delete an item

// Fetch listings from the Rails API
// The default request is a GET request 


fetch('/listings')

Step 2. Rails receives the request:

The request is then processed by the routes file and directed to the appropriate controller action:

# config/routes.rb
Rails.application.routes.draw do
  resources :listings
end

In this example, the resources method generates a set of RESTful routes for a ListingsController. These routes include actions which correspond to the HTTP verbs:

index -> GET
create -> POST
update -> PUT
destroy-> DELETE

Step 3: Controller Actions

Once the route is determined, the corresponding controller action is invoked. This action processes the request, interacts with the database if necessary, and prepares a response. Here's a simplified example:

# app/controllers/listings_controller.rb
class ListingsController < ApplicationController
  def index
    render json: Listing.all 
  end
end

In this snippet, the index action retrieves a list of listings from the database and responds with a JSON representation of these listings.

Step 4: React Response from the API

On the client side, React sends an HTTP request to the Ruby on Rails API endpoint. This request is handled using the built-in fetch API to make asynchronous requests. Once the request has been processed on the backend, a response is sent to the front end. Shown below:



fetch('/listings')
  .then(response => response.json())
  .then(data => {
    setListings(data)
  })
  .catch(error => {
    setError(error)
  });
return (
<ListingsComponent listings={listings} />
)

In this snippet, the second .then will handle the process of setting the response data, which will then be sent to our React component.

Step 5: Rendering in React

Once React receives the data from the API, it will be rendered in the user interface. React's virtual DOM efficiently updates only the parts of the UI that need to change, ensuring a smooth and responsive user experience. Here's a simplified example:

// Render listings in a React component
function ListingComponent ({listings}) {
    return (
      <div>
        {listings.map(listing => (
          <div key={listing.id}>
            {listing.title}
          </div>
        ))}
      </div>
    );
export default ListingComponent;
}

In this snippet, we render a list of listings in a React component based on the data received from the Rails API.

Network Errors:

While this request-response cycle may seem straightforward, it's important to acknowledge potential network errors. Common errors include:

Timeouts: If the server takes too long to respond, the client might time out the request.
404 Not Found: This error occurs when the requested resource is not available on the server, often due to a mistyped URL.
500 Internal Server Error: An error on the server side can result in this status code, indicating that something went wrong while processing the request.
Network Connection Issues: Problems like loss of internet connectivity can interrupt the request-response cycle.

Handling these errors gracefully in your application is crucial for providing a seamless user experience. Techniques like error handling, retries, and user-friendly error messages can mitigate the impact of these issues.

In conclusion, the request-response cycle in React and Ruby on Rails is the backbone of many modern web applications. Understanding how the back end and front end work together through this cycle is essential for building robust and responsive web experiences. So, roll up your sleeves, dive into the code, and start building your own incredible web applications!

Helpful Documentation

An Introduction to Active Record

Steven Gutierrez — Mon, 10 Jul 2023 19:54:19 +0000

When looking to create a back-end for your web app, production structure is incredibly important for your program. Following good Model-View-Controller or MVC design patterns provides the structure to separate programming logic into three interconnected elements. Active Record takes full responsibility for the Model element, in other words, Active Record is the Model.

What is Active Record?

Active Record is an essential layer of the programming structure used to create and use objects whose data requires persistent storage in a database. This database management system is typically written out in SQL queries. With these queries, we will have to establish a connection to the database and create and run the query just to retrieve the data from the database. The beauty of Active Record is we don't have to write SQL queries to perform these tasks.

To accomplish the connection between objects from an application to the database, Active Record utilizes Object Relational Mapping also known as ORM. Active Record will then handle the process of translating data from this object to the database with SQL queries 'under the hood'.

There are some key mechanisms built into Active Record that allow for straightforward use:

Represent models and their data.
Represent associations between these models.
Represent inheritance hierarchies through related models.
Validate models before they get persisted in the database.
Perform database operations in an object-oriented fashion.

Advantages of Convention

When creating applications it is oftentimes necessary to configure code to match our specific needs. Active Record, however, takes pride in minimal configuration by adopting the idea that most often your applications will be configured in similar ways, making a common method the default configuration.

Naming conventions:

When creating a rails application using Active Record, the same naming conventions are crucial to establish the relationship between models and the database tables. Database tables are to be plural with underscores separating each word and lowercase, using the snake_case form(book_clubs). Model/Class will be singular with the first letter of each word capitalized(BookClub).

Schema conventions:

Columns in database tables have their naming conventions, depending on their purpose. All columns will be singular and written out in snake case. Foreign keys should be the table's name you are trying to create an association between, followed by id (item_id). Active Record will be looking for these columns when defining associations in your models. By default, Primary keys will be created when using Active Record Migrations to create the database tables. They will be named id and given an integer value. There are a few reserved column names by Active Record that should be avoided, to describe the data being modeled accurately.

Creating Migrations

Rails provides a method to manage a database schema using migrations.
These migrations are stored in files created and executed using rake. Rails will track the migration files ensuring they will be executed in sequential order and enables the rollback feature for future edits. Running rake -T in your projects directory will prompt you will all of the available migrations Active Record provides.
An example of a possible migration file:

class CreateBooks <ActiveRecord::Migration[7.0]
  def change 
    create_table :books do |t| 
      t.string :title
      t.string :edition 
      t.text :description
      t.date :publication_date

The official documentation for creating database schema can be found here Active Record Migrations.

Linking models to tables

In order to make use of Active Record's built in ORM methods, we must create our Ruby classes. By sticking to our naming conventions Active Record will establish the relationship between both class and table.

class Book < ActiveRecord::Base
end

Essentially this is all you need in order to establish the relationship and be able to take full advantage of Active Record's methods.

Full CRUD implementation

When working with data from a table it is important to have CRUD operations made when necessary. CRUD is used to interact with our stored data and it stands for create, read, update, and delete. Thankfully Active Record already creates many methods to allow an application to manipulate this stored data.
Some examples include:

Create
To create an Active Record object, there are a few key methods used. create will return the object and save it to the corresponding database. While new will simply return the object and be instantiated without being saved, the save method will then be needed to save this object to the database.

# Create a new book and save this book to the database
Book.create(title: "The Great Gatsby")

Read
Active Record has many different methods used to access data from a database, the list can be found here. However, some common examples include:

# Read all book data from a database table and their titles
@books = Book.all
@books.each do |book| 
    puts book.title
end 

@book = Book.first

@twilight = Book.find_by(title: "Twilight")

Update
Once you find the data needed, its attributes can be changed and subsequently saved back into the database using various update methods. update method will take the object modify it to the given attributes, and then save the data to the database. However, there are other ways of accomplishing the same task shown below:

# Update an existing book 
book = Book.find(21) 
book.edition = ('1st') 
book.save

Delete
Once an Active Record object has been retrieved it can be destroyed, removing it completely from the database. destroy is the generic method used for deleting single objects. If more than one object will be destroyed the destroy_by and destroy_all methods are useful.

# Delete a book 
book = Book.find(21) 
book.destroy

Full Active Record documentation can be found here.

React hooks introduction

Steven Gutierrez — Fri, 21 Apr 2023 01:15:58 +0000

Life before hooks was messy, confusing at times and full of repetitive code. With the implementation of React Hooks in early 2019, React v16.8.0 made the library simpler and more efficient. React soon became the most popular client-side framework/library for front-end development.

What are hooks and how did they impact React?

React hooks are special functions that let developers "hook into" React state and lifecycle features from functional components. Hooks allow you to reuse stateful logic without changing your component hierarchy. Hooks help to break down components into smaller functions based on their logic and relation. Hooks thus reduce the need for classes while letting you use more of React's features. They don't require you to learn complex functional or relative programming techniques making react a practical library.

Previously React relied on class components to handle state, and without a simpler stateful primitive other than class components, React relied on creating a good amount of boiler plate to define the components. As a result code became cluttered, debugging became harder and logic becoming confusing. When trying to breakdown larger components proved difficult, as component logic became scattered, many felt that React had too much of a learning curve. More issues arose as learning how this works in JavaScript, having to remember to bind event handlers and struggling when to use classes over functions continued to deter developers from using the library. However hooks changed things for the better.

When should hooks be used?

Hooks cover all existing use cases for classes as they provide a simpler implementation of state and lifecycle uses.

Displaying a stateful variable like a username, went from a cluttered logical mess, to a more concise component.

With a simple React class component there is a significant amount of boilerplate needed for the code to run:

import React from 'react'

export default class Example extends React.Component{
    constructor(props) {
        super(props) ;
        this.state = { 
            username: '',
        }
    this.handleChange = this.handleChange.bind(this);
  }

    handleChange(e) { 
        this.setState({
            username: e.target.value
        });
    }

    render(){
        return (
            <>
                <h1>Welcome, {this.state.username}</h1>
                <input 
                value={this.state.username}
                onChange={this.handleChange}
                placeholder="Enter Username">
                </input>
            </>
        )
    }
}

Understanding how this works is essential, and the logic could quickly become confusing.

Using React hooks however makes the code quick, simple and allows for an easier understanding of how React state works:

import React, {useState} from 'react'

function App() {
const [username, setUsername] = useState("")

function handleChange(e){setUsername(e.target.value)}
  return (
    <>
      <h1>Welcome, {username}</h1>
      <input 
       value={username}
       onChange={handleChange}
       placeholder="Enter Username"></input>
    </>
  )
}

export default App

Hook limitations: Classes allow for more customizable components, when compared to components using hooks. However, the React team thought of this and provided us with a method to create custom hooks.

Main Hooks:

1. useState:

Like any other React hook useState must be imported from React at the top of the file:

import {useState} from 'react';

Then called at the top level of your component declaring the state variable. When declaring state, specific syntax [ and ] is required to destructure the array as useState returns two values in an array:

function Component (){
    const [] = useState();
}

The first value is a state variable which, during the first render, will match the initial state that has been passed.
The second is the setter function that lets you update the state to a different value and trigger a re-render:

Note: it is common practice to put set and then the name of the state variable in camelCase when naming variables.

    const [age, setAge] = useState()

A value is then needed for the initial state, this value can be any value type with a special case for functions:

    const [name, setName] = useState('Henry')

In order to use the setter function and change the current state of the state variable we must call the set function with some next state:

function handleClick(){
    setName('George')
}

Note: when calling the set function the current state does not change the already executing code but rather changes what will be returned on the next render.

When everything is all put together it looks something like this:

import {useState} from 'react' 

function Component(){
    const [age, setAge] = useState(28);
    const [name, setName] = useState(Sam); 

    function handleClick(){
        setAge(22);
        setName('George');
    }
//...
}

2. useEffect:

This React hooks lets you synchronize a component with an external system.

useEffect must be imported and called at the top level of your component to declare an Effect:

import {useEffect} from 'react';

function Component () {
    useEffect()
}

The useEffect hook takes two parameters, the first being a setup function that will handle your effects logic. When the component is first added to the DOM, React will run the setup function and continue running the function with each re-render.

useEffect( ()=>{console.log('hello'},)

The second parameter is the dependency or dependencies put into an array [] that has been declared previously. If no dependency is specified then the effect will continue executing indefinitely. An empty dependency can be use to execute the effect once on the first render:

useEffect( ()=>{console.log('hello')} , [])

Note: Ensure that when thinking of using the useEffect hook you are trying to connect your component to some external system. In order to limit any unnecessary renders make sure your objects or other dependencies are necessary.

When everything is put together it looks something like this:

import {useEffect, useState} from 'react';

function Component () {
    const [data, setData] = useState({});

    useEffect(()=>{ 
        fetch('https://localhost:3000')
        .then(r => r.json)
        .then( (newData) => setData(newData))

 },[])
}

3. useContext:

This React hook lets you read and subscribe to context from your component.
It needs to be imported at the top of the file and called at the top level of the component:

import {useContext} from 'react'

function Component (){
    useContext();
}

useContext takes one parameter, the context that has been previously created with createContext at a previous component higher up on the component tree:

const page = useContext(pageContext)

The returned value will be the context value for the calling component, this value is determined as the closest corresponding Context.provider above in the tree. When everything is put together it looks something like this:

import { createContext, useContext } from 'react';

const ThemeContext = createContext(null);

function Form() {
  return (
    <Panel title="Welcome">
      <Button>Sign up</Button>
      <Button>Log in</Button>
    </Panel>
  );
};

function Panel({ title, children }) {
  const theme = useContext(ThemeContext);
  return (
    <section className='panel'}>
      <h1>{title}</h1>
      {children}
    </section>
  )
};

function Button({ children }) {
  const theme = useContext(ThemeContext);
  return (
    <button className='button'>
      {children}
    </button>
  );
};

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Form />
    </ThemeContext.Provider>
  )
};

export default App

For a more in-depth breakdown of these and all other hooks visit the React docs reference page for hooks.

A Quick Guide to Event Listeners

Steven Gutierrez — Thu, 12 Jan 2023 00:26:26 +0000

Event listeners are a useful feature built into JavaScript that showcases how dynamic web pages can be. But the question is...

What are Event Listeners?

An Event Listener is a procedure in JavaScript that waits for an event to occur. This event can be caused by the Document, Web Browser, Object, or Element. The action created by the Event Listener is done asynchronously, which allows for a quicker run time and creates a more exciting application.

How are Event Listeners used?

In order to use Event Listeners they must be applied to an object or document element that is the target of the event.Once applied the Event Listener will be invoked automatically by the browser. For example:

let form = document.querySelector('form')
form.addEventListener()

In this case, form is the element that we are targeting.

There are two ways Event Listeners can be applied to a web page:

onXYZ: The first way, although not as common, is done by directly setting the property of the object or element. This is done by adding .on followed by the event type to the desired element. For example:

let form = document.querySelector('form')
form.onsubmit = callbackFunction;

*However, there is a key issue with this kind of programming as it assumes you will only register one handler for each type of event. So if you ever need to add more handlers the previously registered handlers will be overwritten.

.addEventListener: The second, and most common way, is using the .addEventListener() method. Much like the previous example, this method is applied to an object or element. Then two parameters are needed to define the method. The first is the event type ex: click. Second is a callback function that will handle the event after an action occurs.

let form = document.querySelector('form')
form.addEventListener('submit',callbackFunction);

*Side Note: You can also set the event handler attribute to the property of a specific HTML element directly on your HTML file. However, this can cause some issues in your code later on.

Event Types:

There are many even types including: onClick submit mouseOver keyDown. Each has its own unique use, for a more comprehensive list see EventTypes.