rails--rails/activestorage
Richard Macklin 6b6e10d02e Enforce that activestorage compiled JS is in sync with source code
(Note: this is effectively the same change that we did for actioncable
in fefc304199 applied to activestorage.)

We have run into issues in the past where the activestorage compiled
javascript bundle got out of sync with the source code. For example, in
880f977925 the compiled bundle was
modified in a way that was inconsistent with the results of running
`yarn build` in the activestorage directory. This meant that running
`yarn build` there would produce a dirty git status indicating changes
to the compiled bundle, despite not having made any changes to the
activestorage javascript source code. That particular inconsistency was
fixed in 0e77706dc5. However, the same
problem could reoccur.

To address this, I've added a new test to enforce that activestorage's
compiled javascript bundle is in sync with the source code. When the
compiled bundle is in sync with the source code, the test will pass.
However, if the two are not in sync, the test will fail. For example, if
you were to apply the following patch (which only updates the source
code):

```
diff --git a/activestorage/app/javascript/activestorage/index.js b/activestorage/app/javascript/activestorage/index.js
index a340008fb9..a05b7223a5 100644
--- a/activestorage/app/javascript/activestorage/index.js
+++ b/activestorage/app/javascript/activestorage/index.js
@@ -8,4 +8,4 @@ function autostart() {
   }
 }

-setTimeout(autostart, 1)
+setTimeout(autostart, 2)
```
the test would then fail. Thus, the activestorage test suite will now
prevent "the compiled bundle is out of sync" issues going forward.
2019-10-18 18:02:02 -07:00
..
app Move downloader require to service 2019-10-11 18:20:39 -04:00
bin Add executable file `activestorage/bin/test` 2017-08-20 21:28:56 +03:00
config Permanent URLs for public storage blobs 2019-10-11 15:14:43 -04:00
db Make Active Storage services aware of configuration names 2019-10-03 13:08:30 -04:00
lib Merge pull request #37448 from gmcgibbon/fix_flaky_activestorage_tests 2019-10-12 21:39:00 -04:00
test Enforce that activestorage compiled JS is in sync with source code 2019-10-18 18:02:02 -07:00
.babelrc Unminify activestorage.js 2018-04-25 08:46:56 -05:00
.eslintrc
.gitignore Ignore SQLite3 database files generated by parallel testing 2019-08-27 11:42:04 +00:00
CHANGELOG.md Permanent URLs for public storage blobs 2019-10-11 15:14:43 -04:00
MIT-LICENSE Bump license years for 2019 2018-12-31 10:24:38 +07:00
README.md Fix typo in activestorage README [ci skip] 2019-09-18 09:19:22 +09:00
Rakefile Decrypt the ASt test config if available 2019-03-05 15:33:00 +10:30
activestorage.gemspec Add bug tracker/documentation/mailing list URIs to the gemspecs 2019-10-11 20:47:19 -04:00
package.json update package.json files to use https homepage value 2019-10-02 12:00:11 +02:00
rollup.config.js Unminify activestorage.js 2018-04-25 08:46:56 -05:00

README.md

Active Storage

Active Storage makes it simple to upload and reference files in cloud services like Amazon S3, Google Cloud Storage, or Microsoft Azure Storage, and attach those files to Active Records. Supports having one main service and mirrors in other services for redundancy. It also provides a disk service for testing or local deployments, but the focus is on cloud storage.

Files can be uploaded from the server to the cloud or directly from the client to the cloud.

Image files can furthermore be transformed using on-demand variants for quality, aspect ratio, size, or any other MiniMagick or Vips supported transformation.

You can read more about Active Storage in the Active Storage Overview guide.

Compared to other storage solutions

A key difference to how Active Storage works compared to other attachment solutions in Rails is through the use of built-in Blob and Attachment models (backed by Active Record). This means existing application models do not need to be modified with additional columns to associate with files. Active Storage uses polymorphic associations via the Attachment join model, which then connects to the actual Blob.

Blob models store attachment metadata (filename, content-type, etc.), and their identifier key in the storage service. Blob models do not store the actual binary data. They are intended to be immutable in spirit. One file, one blob. You can associate the same blob with multiple application models as well. And if you want to do transformations of a given Blob, the idea is that you'll simply create a new one, rather than attempt to mutate the existing one (though of course you can delete the previous version later if you don't need it).

Installation

Run rails active_storage:install to copy over active_storage migrations.

NOTE: If the task cannot be found, verify that require "active_storage/engine" is present in config/application.rb.

Examples

One attachment:

class User < ApplicationRecord
  # Associates an attachment and a blob. When the user is destroyed they are
  # purged by default (models destroyed, and resource files deleted).
  has_one_attached :avatar
end

# Attach an avatar to the user.
user.avatar.attach(io: File.open("/path/to/face.jpg"), filename: "face.jpg", content_type: "image/jpg")

# Does the user have an avatar?
user.avatar.attached? # => true

# Synchronously destroy the avatar and actual resource files.
user.avatar.purge

# Destroy the associated models and actual resource files async, via Active Job.
user.avatar.purge_later

# Does the user have an avatar?
user.avatar.attached? # => false

# Generate a permanent URL for the blob that points to the application.
# Upon access, a redirect to the actual service endpoint is returned.
# This indirection decouples the public URL from the actual one, and
# allows for example mirroring attachments in different services for
# high-availability. The redirection has an HTTP expiration of 5 min.
url_for(user.avatar)

class AvatarsController < ApplicationController
  def update
    # params[:avatar] contains an ActionDispatch::Http::UploadedFile object
    Current.user.avatar.attach(params.require(:avatar))
    redirect_to Current.user
  end
end

Many attachments:

class Message < ApplicationRecord
  has_many_attached :images
end
<%= form_with model: @message, local: true do |form| %>
  <%= form.text_field :title, placeholder: "Title" %><br>
  <%= form.text_area :content %><br><br>

  <%= form.file_field :images, multiple: true %><br>
  <%= form.submit %>
<% end %>
class MessagesController < ApplicationController
  def index
    # Use the built-in with_attached_images scope to avoid N+1
    @messages = Message.all.with_attached_images
  end

  def create
    message = Message.create! params.require(:message).permit(:title, :content)
    message.images.attach(params[:message][:images])
    redirect_to message
  end

  def show
    @message = Message.find(params[:id])
  end
end

Variation of image attachment:

<%# Hitting the variant URL will lazy transform the original blob and then redirect to its new service location %>
<%= image_tag user.avatar.variant(resize_to_limit: [100, 100]) %>

Direct uploads

Active Storage, with its included JavaScript library, supports uploading directly from the client to the cloud.

Direct upload installation

  1. Include activestorage.js in your application's JavaScript bundle.

    Using the asset pipeline:

    //= require activestorage
    

    Using the npm package:

    require("@rails/activestorage").start()
    
  2. Annotate file inputs with the direct upload URL.

    <%= form.file_field :attachments, multiple: true, direct_upload: true %>
    
  3. That's it! Uploads begin upon form submission.

Direct upload JavaScript events

Event name Event target Event data (event.detail) Description
direct-uploads:start <form> None A form containing files for direct upload fields was submitted.
direct-upload:initialize <input> {id, file} Dispatched for every file after form submission.
direct-upload:start <input> {id, file} A direct upload is starting.
direct-upload:before-blob-request <input> {id, file, xhr} Before making a request to your application for direct upload metadata.
direct-upload:before-storage-request <input> {id, file, xhr} Before making a request to store a file.
direct-upload:progress <input> {id, file, progress} As requests to store files progress.
direct-upload:error <input> {id, file, error} An error occurred. An alert will display unless this event is canceled.
direct-upload:end <input> {id, file} A direct upload has ended.
direct-uploads:end <form> None All direct uploads have ended.

License

Active Storage is released under the MIT License.

Support

API documentation is at:

Bug reports for the Ruby on Rails project can be filed here:

Feature requests should be discussed on the rails-core mailing list here: