DEV Community: andrewjpwalters

Using Active Storage with Amazon S3 and React

andrewjpwalters — Thu, 04 May 2023 09:30:51 +0000

In this blog post, we'll explore how to use Active Storage with Amazon S3 to store image files and how to use React to display those images in a web application.

Setting up Amazon S3

The first step is to create an Amazon S3 bucket to store your image files. To do this, log in to your Amazon Web Services (AWS) account and navigate to the S3 dashboard. From there, click on the "Create bucket" button and follow the prompts to create your bucket.

Once your bucket is created, you'll need to generate an access key and secret key for your AWS account. These credentials will be used by Rails to access your S3 bucket. To generate your credentials, navigate to the AWS Identity and Access Management (IAM) dashboard and create a new user. Make sure to give the user the appropriate permissions to access your S3 bucket.

Once your bucket is set up, you will also want to add the following permission object into the CORS (Cross-origin resource sharing) configuration in your bucket settings:

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": []
    }
]

Setting up Active Storage

The next step is to set up Active Storage in your Rails application. To do this, first, add the following line to your Gemfile:

gem 'aws-sdk-s3'

This will install the necessary dependencies for using Active Storage with Amazon S3.

Next, run the following command to set up Active Storage:

rails active_storage:install

This will generate a migration that adds the necessary tables to your database.

Run the migration with the following command:

rails db:migrate

You will also need to uncomment Amazon storage code in your storage.yml file and fill in the appropriate data:

amazon:
  service: S3
  access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
  secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %>
  region: your-region
  bucket: your-bucket-name

Next, with this command you will be able to edit your credential files and include the access key and secret access key provided by AWS:

EDITOR="code --wait" rails credentials:edit

In your development.rb file in your environments, you will also need to change your config.active_storage.service to Amazon:

config.active_storage.service = :amazon

Finally, in your initializers, in your cors.rb file, uncomment out the necessary code, and change the origins to whatever your project requires. For the sake of this example, a wildcard will be included:

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'

    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

Now that Active Storage is set up, we can start using it to store our image files.

Uploading Files

To upload an image file, first, create a form in your React application that allows users to select a file to upload. Here's an example:

import React, { useState } from 'react';

function ImageUploadForm() {
  const [file, setFile] = useState(null);

  function handleChange(event) {
    setFile(event.target.files[0]);
  };

  function handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData();
    formData.append('image', file);

    fetch('/images', {
      method: 'POST',
      body: formData,
    });

    if (response.ok) {
      console.log('Image uploaded successfully');
    } else {
      console.log('Error uploading image');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" onChange={handleChange} />
      <button type="submit">Upload Image</button>
    </form>
  );
}

export default ImageUploadForm;

This form will allow users to select an image file to upload. Note that images must be appended to a new FormData as the information can not be sent as JSON.

Next, create a Rails controller action to handle the file upload. Here's an example:

class ImagesController < ApplicationController
  def create
    image = Image.new(image_params)
    if image.save
      render json: { image_url: url_for(image.image) }, status: :created
    else
      render json: image.errors, status: :unprocessable_entity
    end
  end

  private

  def image_params
    params.permit(:image)
  end
end

This controller action creates a new Image object and assigns it the uploaded file. The image_params method is used to permit only the image parameter to be passed to the Image model. The response includes the URL of the uploaded image, which we'll use in the React application to display the image.

Another way to access the image’s url is to define the image_url in the serializer. Here’s an example for that:

class ImageSerializer < ActiveModel::Serializer
  include Rails.application.routes.url_helpers

  attributes :id, :image_url

  def image_url
    if object.image.attached?
      url_for(object.image)
    else
      ""
    end
  end
end

Note that the line “include Rails.application.routes.url_helpers” must be included to have access to the url_for helper.

Next, add the following code to your Image model to use Active Storage to store the image file:

class Image < ApplicationRecord
  has_one_attached :image
end

Displaying Files

Now that we have uploaded our images to S3 using Active Storage, we can display them in our React application. Here's an example of how to display an image in React:

import React from 'react';

function ImageDisplay({ imageUrl }) {
  return (
    <div>
      <img src={imageUrl} alt="Uploaded Image" />
    </div>
  );
}

export default ImageDisplay;

This component takes the URL of the image as a prop and displays it using an img element.

Finally, we can use our ImageUploadForm and ImageDisplay components together to create a complete image upload and display feature:

import React, { useState } from 'react';
import ImageUploadForm from './ImageUploadForm';
import ImageDisplay from './ImageDisplay';

function App() {
  const [imageUrl, setImageUrl] = useState(null);

  function handleImageUpload(formData) {
    fetch('/images', {
      method: 'POST',
      body: formData,
    });

    if (response.ok) {
      r.json().then((data) => setImageUrl(data.image_url));
    } else {
      console.log('Error uploading image');
    }
  };

  return (
    <div>
      <ImageUploadForm onImageUpload={handleImageUpload} />
      {imageUrl && <ImageDisplay imageUrl={imageUrl} />}
    </div>
  );
}

export default App;

This component creates an ImageUploadForm and an ImageDisplay component. When an image is uploaded, the handleImageUpload function is called, which sends a POST request to the Rails API and sets the imageUrl state to the URL of the uploaded image. The ImageDisplay component is only shown if imageUrl is not null.

And that's it! You should now have a fully functioning image upload and display feature in your React application using Active Storage with Amazon S3.

Active Record Validations

andrewjpwalters — Fri, 21 Apr 2023 09:02:28 +0000

One of the key features of Ruby on Rails is its powerful Active Record ORM (Object Relational Mapping) layer, which abstracts away the details of database access and allows you to work with your data in a more object-oriented way. One of the most important features of Active Record is its support for validations, which allow you to ensure that the data stored in your database is always consistent, accurate, and valid.

What are Active Record Validations?

Active Record validations live on the model layer of Rails, which is structured on the MVC architecture. They are a way to check that the data stored in your database is always valid and consistent. They allow you to define rules or constraints on the data, and then check that those rules are being followed whenever you try to save or update an object to the database. For example, you might want to ensure that a user's email address is unique, or that a blog post's title is at least 5 characters long.

Active Record provides a wide range of built-in validation helpers that make it easy to define these rules. Some of the most common validation helpers include:

presence: ensures that a field is not empty or nil
uniqueness: ensures that a field is unique across all records in the table
numericality: ensures that a field is a number
length: ensures that a field is a certain length
format: ensures that a field matches a certain regular expression

When are Active Record Validations Run?

Active Record validations are run automatically whenever you try to save or update an object to the database using the save, create or update methods. When you call one of these methods, Active Record first checks that all the validations defined for the object pass. If any of the validations fail, the operation is cancelled and the object is not saved to the database.

For example, let's say you have a User model with a name field that must be present. You might define a validation like this:

class User < ApplicationRecord
  validates :name, presence: true
end

Now, if you try to save a User object without a name, like this:

user = User.new
user.save!

The save method will return false, indicating that the object was not saved, and, by using the bang version of save, an exception will be raised and the errors object on the User object will contain an error message indicating that the name field must be present. The same is true for the bang version of create and update.

In addition to running validations when you save an object, you can also manually trigger validations on an object by calling the valid? method. This method runs all the validations for the object and returns true if all validations pass, or false if any of them fail.

For example:

User.create(name: "Jane Johnson” ).valid?
=> true
User.create(name: nil).valid?
=> false

In short, if you're new to Ruby on Rails like I am, learning how to use Active Record validations is essential. By mastering this feature, you'll be able to build more robust, secure, and user-friendly applications that store consistent and valid data.

Phase 4 Wrap Up and Utilizing useContext

andrewjpwalters — Fri, 07 Apr 2023 21:04:40 +0000

Phase 4 of my time at Flatiron School is coming to a close. I wrapped up my phase 4 final project, which was the biggest challenge I’ve faced as a new programmer to date. One of the requirements was the inclusion of the React hook, useContext. I’d never used this hook before, so it was an interesting challenge to learn how it works and to implement it into my project.

What I found was that the useContext hook is a powerful tool in React that can simplify state management and make your code more organized and reusable. Together we'll explore what the useContext hook is, how it works, and how you can use it in your own React applications.

What is the useContext hook?

The useContext hook is a built-in React hook that allows you to access state and methods from a parent component in any child component without having to pass props down through each level of the component tree.

When using the useContext hook, you create a context object that contains the shared state and methods you want to use across multiple components. Then, you can use the useContext hook to access that context object in any child component and use its state and methods.

Here’s an example to show how the useContext hook works.

Suppose you have a parent component called App that has a state variable called count and a method called incrementCount:

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  const incrementCount() {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
      <ChildComponent />
    </div>
  );
};

export default App;

Here we're using the useState hook to create a state variable called count and a method called setCount to update the count. We're also rendering a button that calls the incrementCount method when clicked.

Now, suppose we have a child component called ChildComponent that needs access to the count and incrementCount variables. We could pass these variables down as props, but that would require us to pass them through every level of the component tree, which, I discovered, opens up your code to all kinds of headache inducing troubleshooting if you miss a step. Instead, we can use the useContext hook to access these variables directly.

To use the useContext hook, we first need to create a context object in the parent component. We can do this using the createContext method:

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

const CountContext = React.createContext()

export const CountContext = createContext();

In this example, we're creating a context object called CountContext using the createContext method. We're exporting this object so that we can use it in other components.

Next, we need to wrap our parent component with the CountContext.Provider component and pass it the count and incrementCount variables:

import React, { useState, createContext } from 'react';
import ChildComponent from './ChildComponent';

export const CountContext = createContext();

function App() {
  const [count, setCount] = useState(0);

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <CountContext.Provider value={{ count, incrementCount }}>
      <div>
        <p>Count: {count}</p>
        <button onClick={incrementCount}>Increment</button>
        <ChildComponent />
      </div>
    </CountContext.Provider>
  );
};

export default App;

In this example, we're wrapping the App component with the CountContext.Provider component and passing it an object with the count and incrementCount variables as values.

Finally, in the ChildComponent, we can use the useContext hook to access the count and incrementCount variables:

import React, { useContext } from 'react';
import { CountContext } from './App';

function ChildComponent() {
  const { count, incrementCount } = useContext(CountContext);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

export default ChildComponent;

In this example, we're importing the CountContext object from the App component and using the useContext hook to access the count and incrementCount variables. We can then render these variables in the ChildComponent JSX and use the incrementCount method to update the count.

By using the useContext hook, we're able to access shared state and methods without having to pass props down through every level of the component tree.

One can also set state or even define the provider in the context file, as I did with my own project, to pass down user information:

import React, { useState } from "react";

const UserContext = React.createContext();

function UserProvider({ children }) {
    const [user, setUser] = useState(null);
    return (
        <UserContext.Provider value={{ user, setUser }}>
            {children}
        </UserContext.Provider>
    );
}

export { UserContext, UserProvider };

This way, I just needed to import UserContext and if I wanted, say, just the user variable, in any component I would declare:

const { user } = useContext(UserContext)

And in the same way have access to the user variable.

My instructor, when speaking to him, mentioned useContext was becoming quite popular and I now understand why. useContext is a powerful tool that requires minimal setup and makes your code more simple, and easier to understand and develop.

Phase 3 Project Wrap-up

andrewjpwalters — Fri, 23 Sep 2022 05:55:28 +0000

It’s time! I’m now finishing up my phase 3 final project at Flatiron School. In this phase we covered a lot of things: Ruby basics, the fundamentals of the backend of an app, Active Record and Sinatra.

Ruby is a pleasure to work with. I wonder if it would’ve been such a breeze to get into if I didn’t have any familiarity with JavaScript, but as it stands, its emphasis on clean readability is very welcome. I appreciate Yukihiro Matsumoto’s desire to make programmers happy and, although I am a newcomer to this field and especially to this language, I think I can see why it’s such a popular language.

Working with Active Record was also refreshing. As always, I appreciate learning how to do something the hard way before learning the shortcut—or in this case, the modern, efficient way. The same goes for Sinatra. Sometimes I feel like I’m cheating, knowing how many steps are automated by these wonderful tools.

The guidelines for this project were relatively straightforward, building on the things we’d learned in the past phases—particularly React and assembling frontend applications. I was required to: Use Active Record to start a database with at least two models with a one-to-many relationship, use Sinatra to set up API routes for both models (with create and read actions for both and one with full CRUD), and, as I stated, create a front end with React to interact with the API and utilize those CRUD capabilities.

I was at a bit of a loss of what to create that would hit all these guidelines and still be an app I could see using, and finally I settled on my reliable love of film to provide an answer: A movie watchlist, where the user can add films they would like to watch and filter them by genre. Genre and movie would be my two models, with MANY movies belonging to ONE genre. The movies model ended up being the one receiving full CRUD—the ability to create new movies, as well as list all the movies saved, edit any comments left on the individual movies as well as delete them from the database.

First, I created a very simple framework of a React application, setting up the very basic components I would need. But I could only go so far without any information to feed through an API. So, I had to create one.

To set up these models I called on the ever-handy Rake:

bundle exec rake db:create_migration NAME=create_movies
bundle exec rake db:create_migration NAME=create_genre

These lines called on Active Record to create two migrations, one for a movies table and one for a genres table. From there I defined the rows for movies:

class CreateMovies < ActiveRecord::Migration[6.1]
  def change
    create_table :movies do |t|
      t.string :name
      t.integer :genre_id
      t.integer :year
      t.string :comment
    end
  end
end

And for genres:

class CreateGenres < ActiveRecord::Migration[6.1]
  def change
    create_table :genres do |t|
      t.string :name
    end
  end
end

From there I had to write my models and establish their association. Once again, Active Record made it shockingly easy, utilizing the has_many and belongs_to macros :

class Movie < ActiveRecord::Base
    belongs_to :genre
end

And for genres:

class Genre < ActiveRecord::Base
    has_many :movies
end

And that was it for Active Record! I just had to create my migration:

bundle exec rake db:migrate

And my schema was created and ready to be populated with date! After installing Faker, I filled the seed.rb with some randomized movie data and provide a strong base of genres to get started with.

Next Sinatra came into play, and this is where I started to hit some snags. Here I had to write my pathways and assign my models some CRUD. Because my two models were associated, I knew I needed to include a special keyword “includes” in my pathway definitions. That was simple enough when creating and reading for my models:

class ApplicationController < Sinatra::Base
  set :default_content_type, 'application/json'
  
  get "/movies" do
    movies = Movie.all.order(:name)
    movies.to_json(include: :genre)
  end
 
  get "/genres" do
    genres = Genre.all.order(:name)
    genres.to_json(include: :movies)
  end
 
  post "/movies" do
    movie = Movie.create(name: params[:name], genre_id: params[:genre_id], year: params[:year], comment: params[:comment])
    movie.to_json(include: :genre)
  end
 
  post "/genres" do
    genre = Genre.create(name: params[:name])
    genre.to_json(include: :movies)
  end
 
end

But for some reason, when it came to writing my patch and delete methods, I kept getting strange errors and my React application would break. The strangest thing is I was getting no errors from my API. Only from React. When I would refresh the page, the changes I’d made—whether a deleted movie or patched comment—would be rendered just fine. It was only during the act of rendering those changes in my front end application would the app break. My first clue was that trying to access the genre name through each movie, rather than the genre_id property, and the error would tell me it didn’t recognize “genre” and would declare it undefined. Although it didn’t occur to me at first, I once again had to include the associated model in my pathway definition. For some reason, I seemed to think that information was already packaged with the instance once it was created. But once I added that all important “include” keyword, the errors went away:

  patch "/movies/:id" do
    movie = Movie.find(params[:id])
    movie.update(comment: params[:comment])
    movie.to_json(include: :genre)
  end
 
  delete "/movies/:id" do
    movie = Movie.find(params[:id])
    movie.destroy
    movie.to_json(inlude: :genre)
  end

It took me longer than I would care to admit to solve this in-retrospect simple problem, but once I got it up and working, the struggle and headache was worth it.

My Phase 2 Project and Working with React Bootstrap

andrewjpwalters — Fri, 29 Jul 2022 02:11:39 +0000

It looks like my phase 2 at Flatiron School is coming to a close. This phase was all about React, which I enjoyed quite a bit. There's always something exhilarating and, at the same time, a little exasperating about learning a "shortcut" after taking the time to learn something the hard way. One, of course, must learn the fundamentals before learning how to break them, so there's no misunderstanding there. But React, at the surface, certainly feels like a "shortcut" of sorts. A very welcome one at that.

But no shortcut is ever completely clean and React has its quirks and oddities to make it work smoothly. Thankfully, the ever-helpful community of programmers have come up with a variety of packages to help make even this "shortcut" easier and friendlier to use.

React Router is a great example, and one that I used extensively on this project. It gives functionality and illusion of paths in an SPA (single page application). Flatiron's curriculum taught React Router quite thoroughly, so I didn't have any issues implementing it.

This was not the case when I decided to try Bootstrap with my application, my old standby which I used in my phase 1 project. I've always liked the ease and styling of Bootstrap, so I thought it would be a nice challenge to apply it to my first Javascript framework.

I found during my research the perfect solution: React Bootstrap

React Bootstrap, as the name would suggest, was built from scratch specifically for React, doing away with dependencies like jQuery, but still retaining the classic Bootstrap styling and functionality.

Installing it was easy. After creating my app using create-react-app I just had to installing it, also utilizing NPM:

npm install react-bootstrap

The documentation suggest installing vanilla Bootstrap as well:

npm install bootstrap

Or you can combine both into a single line:

npm install react-bootstrap bootstrap

NPM will install both React Bootstrap and vanilla Bootstrap frameworks into your project as dependencies.

Once that is done, because React Bootstrap doesn't automatically ship with Bootstrap CSS, you must include this import line at the top of either or src/index.js or App.js file:

import 'bootstrap/dist/css/bootstrap.min.css';

This will import all the styling you'll need to match React Bootstrap's blind spots.

Next, you'll need to start importing the components you'll be using in your app. These include things like buttons, cards, navbars and tables. There are two ways of doing this, and one is recommended over the other.

Firstly, and most simply, you can destructure out the component you need like this:

import { Button, Card, Navbar } from 'react-bootstrap';

However, the issue with this is it will instruct React to load the entire React Bootstrap library, potentially loading your app down and making it less efficient.

Best practice is to import each component individually on separate lines, thus avoiding importing the entire library unnecessarily. You can do so like this:

import Button from 'react-bootstrap/Button';
import Card from 'react-bootstrap/Card';
import Navbar from 'react-bootstrap/Navbar';

Not quite as pretty or succinct as destructuring, but certainly more ideal. The way I approached it, and the way it was recommended to me, was to use the destructuring method while I was developing my app, being able to quickly and easily slot in and out components as I needed them. But as I neared the end of production and the needed components were solidified, I rewrote my code to the individual import method.

Once these steps are done, you will be able to include these React Bootstrap components in the return of your own components just like any other JSX element.

For example:

import React from 'react';
import Button from 'react-bootstrap/Button';

function Example(){
return (
<h1>Hello!</h1>
<Button>Click Me!</Button>
)};

export default Example;

One of the issues I immediately ran across with React Bootstrap my app's usage of React Router. React Bootstrap has plenty of support for navbars, but React Router uses a specific <Link> or <NavLink> element that React Bootstrap has no reference to. A quick Google search and I found the community has plenty to provide yet again. In came the extremely specific and extremely useful React Router Bootstrap to solve this problem.

It's just as simple to install as all the others. One just needs to run this line if he or she is using the most current version of React Router:

npm install -S react-router-bootstrap

Although, because I was specifically using React Router v5, I instead ran this:

npm install -S react-router-bootstrap@rr-v4

React Router Bootstrap was in my project, and then to get that nice Bootstrap styling in my navbar, I just needed to wrap each of my <NavLink> elements in a React Router Bootstrap specific <LinkContainer> tag, importing it at the top of my component page just as I did any of my React Bootstrap components.

All this proves this community is constantly pushing and evolving to incorporate new technologies. Every issue I had, someone had already discovered a solution and presented it in a clean, understandable fashion. And when I ever felt confused, there were countless YouTube tutorials to fill in the gaps.

Phase 2 is finished. On to the next.

Wrapping Up My First Project at Flatiron

andrewjpwalters — Mon, 23 May 2022 03:55:22 +0000

Here we are. I'm wrapping up m first major project at Flatiron School. Maybe this feeling won't fade away, but early in my software development journey, coding still feels a little like learning magic. That may sound silly but think of it this way: In books and movies, magic is expressed with words of power--with expressions and phrases that are filled with such potent meaning, they alter the world around them. With coding, you're using a language filled with words of power, that can alter the behavior of a computer, giving it instructions to do incredible things. Typing in the right words in the right order and somehow it works. Your vision becomes reality.

And in a more mundane way, learning to code is just like learning any other language. You learn the syntax and grammar, the meaning. Currently, I feel a little like I did in French class back in high school: I can read the language just fine. I can follow the logic and decipher the meaning, but when it comes to speaking it, much of the time, my mind just goes blank. I've been told many times that there's no shame in Googling answers to problems. Everyone does it all the time. But I do hope I manage to build the mental muscle memory for some of these simpler problems sooner rather than later.

This first project was where I felt both feelings really clash for me. A sense of elation when, oh wow, the code I wrote worked! It was doing just what I envisioned! And a sense of dread when I would hit a roadblock in my knowledge or would see an error pop up while my website would refuse to do what I wanted it to do. But going back to the idea of Googling, I will say, the programming community has a willingness to share knowledge and an eagerness to help its fellows in a way I've never seen in any other community.

Taking these steps, following the path laid by other programmers, I found my way through and around every roadblock I came across.

First, I should probably lay out what the function of my project is: I found an API called TV Maze and decided to build a search that would fetch a list of TV shows from their database. The results of the search would be rendered as "cards" and appended to an empty element. Each card would have a button that would add the show to another section on the page called "Watch List." If I were to build a server myself, this would be accomplished with a POST request, but since the site didn't need to be persistent, I needed to find a way to clone the card to this watch list. Most of the objectives I needed to make this project a reality, I already had an idea of how to do. The means to clone elements, however, was something I need to figure out how to do from scratch.

I went about writing the code for the things I already knew how to do: Making the bare bones of the HTML, adding important ids to elements I knew my script would be frequently working with through the DOM. Writing the FETCH request to interact with TV Maze's API, and the function to render the received data in HTML elements (This was tricky, and I ended up having to rely heavily on the innerHTML property, which I have since discovered has the potential to be a security risk; in the future, I will have to use other means to a achieve this), and the event listeners for the search input and the "Add to Watch List" buttons. When I got stuck, I referred to the videos and lessons Flatiron had provided on whatever subject I needed help with. And when I had nothing left to do, I had to confront the biggest blank in my knowledge: How to copy elements in the DOM.

I was expecting a lot of finagling, but instead, it turned out good ol' Javascript had my back. I came across a node method called (wait for it) cloneNode. All I had to do was capture an element in the DOM, call this method and then append the cloned element wherever I wanted on the page. The only thing that threw me for a loop was an optional parameter in the method called "deep." When "true," it would copy the entire node, including its entire subtree (minus any event listeners). Otherwise, it would default to "false," and the node would be cloned, but it would be essentially empty.

Here's an example:

const el = document.querySelector('#example')

const elCopy = el.cloneNode(true)
elCopy.setAttribute('id', 'example2')
body.append(elCopy)

There is an issue with cloning elements with ids, but any attribute, content, etc., can be modified by normal means before it is appended to the page, as seen above.

Next, I had to learn the basics of Bootstrap because I decided I would challenge myself to learn a CSS framework. But perhaps I'll save that for another blog post.

In any case, this first project is wrapping up and I'm ready to face my next challenge--whatever it may be.