diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000000..a8211d329f --- /dev/null +++ b/.babelrc @@ -0,0 +1,5 @@ +{ + "presets": [ + ["env", { "modules": false } ] + ] +} diff --git a/.gitignore b/.gitignore index dc4b5ef71b..c5ff07cedd 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .byebug_history +/node_modules test/dummy/db/*.sqlite3 test/dummy/db/*.sqlite3-journal test/dummy/log/*.log diff --git a/README.md b/README.md index 328bf01672..b127f87c5c 100644 --- a/README.md +++ b/README.md @@ -96,6 +96,44 @@ Variation of image attachment: 6. Optional: Add `gem "google-cloud-storage", "~> 1.3"` to your Gemfile if you want to use Google Cloud Storage. 7. Optional: Add `gem "mini_magick"` to your Gemfile if you want to use variants. +## 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: + ```js + //= require activestorage + ``` + Using the npm package: + ```js + import * as ActiveStorage from "activestorage" + ActiveStorage.start() + ``` +2. Annotate file inputs with the direct upload URL. + + ```ruby + <%= form.file_field :attachments, multiple: true, data: { direct_upload_url: rails_direct_uploads_url } %> + ``` +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` | `