DEV Community: Simple File Upload

The Complete Guide to using a CDN with Rails Active Storage

ctln88 — Mon, 08 Aug 2022 20:39:23 +0000

In Rails versions prior to 6.1, Rails Active Storage only served files from an expiring URL that redirected to the selected service. This made it impossible to serve the files via a CDN. There were many workarounds to this problem, and fortunately Rails introduced the new proxy features for serving files from Active Storage in Rails 6.1.

What does the proxy feature do?

The proxy feature provides a permanent URL to an asset through your Rails application instead of an expiring URL. This enables you to put a CDN between your application and the browser. When a user requests an asset from your site the architecture looks like this:

The first time an asset is requested, it will be served by your application. On all subsequent requests, it will be served from the CDN. To test this, access a file served by Active Storage. Here is one as an example: View this link to see a proxied URL.

Open the “Network” tab in developer tools and request the resource again (i.e. refresh the page). You can see HIT in the cache headers, showing the file was served from a CDN, not from your application.

Why is this important?

A lot of the workarounds the community was doing before Rails 6.1 involved creating a direct URL using the object key and the desired CDN domain. There were a few problems with this.

First of all, if you were serving public files from S3, the storage providers usually required the domain name and the bucket name to be identical. This really became a problem if you were using wildcard subdomains.

Also, it made it tricker to switch storage providers. It was possible, but there were necessary DNS changes and the buckets still had to conform to the specified naming conventions.

With the new proxy feature switching storage providers is as easy as updating storage.yml in your Rails application. You can also now easily use wildcard subdomains and have more freedom in naming your buckets.

How do you add a CDN to Rails active storage?

Assuming you have Active Storage set up and you’re trying to add a CDN, all you need to do is update your routing and serving of files.

In your storage.yml, add the public:true setting to your configuration if you haven’t already done so:

In a standard Active Storage configuration, you serve the file using <%= image_tag(@user.avatar) %> (for example).

This provides you an expiring URL that redirects to your storage service. You’ll notice the URL typically has the word “redirect” in the path.

Using the default Active Storage serving service, the URL will look like the one below:

"http://localhost:3000/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6I-kJBaHBCZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19–c5090cc1490554569fbdd6a90ad0f99ae1f416e8/matthijs-van-schuppen-8jGB-ud8MtI-unsplash.jpg"

Notice the blobs/redirect string in the URL. If you click an expiring URL it will redirect to your bucket and eventually expire. Which means it can’t be cached by a CDN.

To use a CDN, you need to change the URL to be permanent. One way to do this is to modify the routes.rb file and use the route directly.

In your view you can now use <%= image_tag cdn_image_url(@user.avatar) %>. If you look at the generated URL, you will see it now contains the string blob/proxy and when you click it you are not redirected to the bucket/key endpoint:

“http://localhost:3000/rails/active_storage/blobs/proxy/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJ-BaHBCZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19–c5090cc1490554569fbdd6a90ad0f99ae1f416e8/matthijs-van-schuppen-8jGB-ud8MtI-unsplash.jpg”

If you don’t have your CDN set up at this point, you can use your app host in the CDN_HOST variable, and the assets will still resolve correctly.

With the setup just described, you can still use the redirect URL alongside the cdn_url as needed. The following routes both work. The first produces the redirect URL, and the second produces the proxy URL.

<%= image_tag (@user.avatar)%> creates a redirect URL
<%= image_tag cdn_image_url(@user.avatar) %> creates a proxy URL

What if I want to proxy all my files?

If you want to proxy all your files, you can add an initializer to your application. Create an active_storage.rb file in config/initializers with the following:

Rails.application.config.active_storage.resolve_model_to_route = :rails_storage_proxy

You can then remove the cdn_routes created in the previous step, and all files will use the proxy URL. So in this case with one additional line in the configuration a standard <%= image_tag (@user.avatar), width: 500, height: 500 %> will produce a proxy URL.

What about the route helpers?

Another option is to use route helpers directly. With no active_storage.rb configuration and no cdn_image routes defined, you can use <%= image_tag rails_storage_proxy_path(@user.avatar), height: 100, width: 100 %> directly in your view to generate the proxy URL.

This helper accepts parameters, so you can specify your CDN host if desired:

rails_storage_proxy_url(@user.avatar, host: Rails.application.credentials.dig(:CDN_HOST), protocol: “https")

How do I connect my CDN to my application?

The architecture for the complete DNS and CDN setup for the application will look something like this:

How do I configure a CDN?

Select a CDN. For this article, we’ll use the Expedited CDN provided in the Heroku application store. We’ll also deploy the application with Heroku. If using Heroku, add your custom domain to your Heroku application. This is available on the Settings tab of your Heroku application.

Add the target to your DNS provider. After you add a custom domain with Heroku, Heroku will provide you a DNS record. Add this record to your domain's DNS configuration. Here’s an example of what that might look like with NameCheap as a DNS provider:

Complete the Setup of Expedited CDN or the CDN of your choice. Typically at this point, you will be prompted by your CDN provider to add additional DNS records to start using the CDN. Expedited CDN with Heroku will provide a set of prompts to configure the service. The first step is to select the Heroku domain you would like to use with the CDN. Follow the prompts to add additional DNS records.

Wait for the DNS to resolve. After the DNS has resolved, complete the CDN setup. Add the CDN_HOST as an environment variable on your production environment.

That's it! Once all the DNS changes have propagated, the setup is complete. The very first time a file is requested, the request will go through your Rails application, and subsequent requests will be served via the CDN.

Here at Simple File Upload, we've taken all of the pain out of using a CDN with Rails Active Storage. We provide a drop-in javascript widget to upload and serve files from a CDN for you. Try it free for 7 days!

Easy File Uploads in React with Simple File Upload

Drew Clements — Tue, 06 Jul 2021 12:30:27 +0000

What would you say are the two most difficult things to do in front-end programming for you? State management? Data integrity? Those are valid choices, and there’s plenty more that you could add, but for me-- the answer would be working with Amazon S3 and file uploads.

Most devs know that nothing about S3 is easy. The pricing model is ambiguous at best and the integration can be an entire nightmare in and of itself. That’s still only half of the problem. What about the file upload? The input? Everyone expects drag-and-drop these days but that’s not really an easy thing to build, and again, only half of the problem.

That’s where Simple File Upload comes in. Simple File Upload abstracts out the tough stuff so you can get to building the parts you love!

Today we’re going to build a quick file uploader with built-in S3 uploads using the React framework.

Setting up the Project

We’re going to keep this pretty barebones. We’ll write some CSS, but the main feature we’ll be focusing on is how simple it is to get the Simple File Uploader into your project and working!

I have a folder on my desktop where I keep all of my projects, so we’ll start by cd-ing into that directory and running npx create-react-app simple-file-uploader in the terminal.

From there we’re going to install Simple File Upload. They have a React package for it, so we’ll just npm install react-simple-file-upload, and voila- we have it ready to use.

Simple File Upload is a paid solution, so you’ll have to create an account and get an API key- which we’ll use later in the project. Once we have all of that ready then we can jump into the code!

Now let’s get our local server running. In your terminal you want to cd YOUR_PROJECT_NAME and then run npm run start. Boom! Let’s go!

Summary:

npx create-react-app simple-file-uploader
npm install react-simple-file-upload
Create an account at simplefileupload.com and grab your API key
CD into your project folder and run npm run start

Getting into the Code

First things first. Let’s jump over to our App.js file and get rid of the react boilerplate.

Strip it all of the way down until it looks like this.

// App.js

import './App.css';

function App() {

  return (
    <div className="App">
      <header className="App-header">
      </header>
    </div>
  );
}

export default App;

This gives us a clean base to work from and now we can get started building.

I always like to come up with a definition of done list when I’m building out projects or features. This is simply a quick list of key functionality we want to ensure exists. In this app we want to be able to drop images into our Simple File Uploader and have them render in a grid below.

Our Definition of Done could look something like this:
The simple file uploader widget is in the UI
The preview is disabled
The uploaded images render in a grid

We’ll refer back to this as we build.

Let’s start by giving it a quick “website” feel with some content in the header.

// App.js

<header className="App-header">
  <h1>Simple File Upload Demo</h1>
  <a className="btn" href="https://simplefileupload.com">
    Try it now!
  </a>
</header>

From here, let’s get our Simple File Upload widget into the UI. We’ll import the SimpleFileUpload package into the project. To do that, we'll add import SimpleFileUpload from ‘react-simple-file-upload’ back in our App.js file.

And we’ll go ahead and place the widget in the markup as well. Let’s put in a main tag to use as a wrapper for the uploader and our grid.

One very important thing to note about the upload widget is the onSuccess attribute available. This where you’ll call the function you want to happen when a file is successfully uploaded.

This is also where you’ll receive access to the S3 generated URL for your asset. This is where you could push that url to an array, write it to a database, package it up in an email- the sky's the limit.

// App.js

import './App.css';
import SimpleFileUpload from 'react-simple-file-upload';

function App() {

  return (
    <div className="App">
      <header className="App-header">
        <h1>Simple File Upload Demo</h1>
        <a className="btn" href="https://simplefileupload.com">
          Try it now!
        </a>
      </header>
      <main>
        <div className="upload-wrapper">
          <SimpleFileUpload
            apiKey="YOUR_API_KEY_GOES_HERE"
            onSuccess={handleUpload}
            preview="false"
          />
        </div>
      </main>
    </div>
  );
}

export default App;

You’re probably seeing an error right now. Your project is probably yelling at you because handleUpload doesn’t exist. Let’s fix that.

Let’s create that function just before your return statement. To quickly check that our uploader is working, we can just quickly console the url.

function handleUpload(url) {
   console.log(url)
  }

Now… upload a file! Did it work?! Sweet! So at this point our upload widget is functioning and we just need to build out our UI a little more.

So in very little code we’ve gotten a working drag-and-drop widget connected straight to Amazon S3 buckets. Isn’t that wild? That simple. That quick.

So now your file should be looking something like this.

// App.js

import './App.css';
import SimpleFileUpload from 'react-simple-file-upload';

function App() {

function handleUpload(url) {
   console.log(url)
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Simple File Upload Demo</h1>
        <a className="btn" href="https://simplefileupload.com">
          Try it now!
        </a>
      </header>
      <main>
        <div className=’upload-wrapper’>
          <SimpleFileUpload
            apiKey=’YOUR_API_KEY_GOES_HERE’
            onSuccess={handleUpload}
            preview="false"
          />
        </div>
      </main
    </div>
  );
}

export default App;

Let’s check our Definition of Done and see where we stand:

~~The simple file uploader widget is in the UI~~
~~The preview is disabled~~
The uploaded images render in a grid

Looks like we’re almost done! All that’s left is to get our uploaded images into a grid!

Since we’re not using a database in this project, the easiest way to accomplish this will be to store the image urls in hook and have our UI display them all.

Our next step is to add import { useState } from ‘react’ at the top of our file. After that we’ll create the hook just below the line function App() {.

We’ll just call this uploadedImages. const [uploadedImages, setUploadedImages] = useState([]).

Now that we have that in place, we can change our handleUpload() to set the images in our hook rather than just logging them out.

function handleUpload(url) {
    setUploadedImages([...uploadedImages, url])
}

From there, we just need our front-end to map through the images and display them!

Add this code just below your .upload-wrapper div

<ul className="image-grid">
  {uploadedImages.length ? (
    uploadedImages.map((image) => (
      <li>
        <img src={image} alt="Fun images" />
      </li>
    ))
   ) : (
   <p>Your uploaded images will appear here!</p>
 )}
</ul>

There you go!! We’re now using Simple File Upload to send images straight to S3 and displaying them in a grid!

The last step is to dress this up just a little bit.

Move over to your App.css file and add the code below

.App header {
  padding: 1rem 4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.App header h1 {
  font-size: 1.25rem;
}

.btn {
  background: linear-gradient(90deg, #b731dd 0, #4161eb 100%);
  padding: 0.5rem 1.25rem;
  border-radius: 0.25rem;
  text-transform: uppercase;
  font-weight: bold;
  transition: 150ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  box-shadow: 5px 5px 10px rgba(17, 17, 17, 0.25);
}

.btn:hover {
  transform: scale(1.05);
}

.App header a {
  color: white;
  text-decoration: none;
}

.App main {
  max-width: 1024px;
  margin: 0 auto;
  overflow: hidden;
}

.App .upload-wrapper {
  display: flex;
  justify-content: center;
}

.App main .image-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  row-gap: 6rem;
  list-style: none;
  margin-top: 6rem;
  text-align: center;
  padding-left: 0;
}

.image-grid p {
  grid-column-start: 2;
  opacity: 50%;
}

.image-grid li {
  overflow: hidden;
  height: 200px;
}

.image-grid img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

What just happened?

You, my friend, just uploaded images to Amazon S3 in 6 minutes (according to this article’s read time)!

So now the tough stuff is out of the way and you can go build the fun parts of your app!