uploadcare-rails 3.4.4 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +66 -0
  3. data/Gemfile +10 -9
  4. data/README.md +188 -119
  5. data/lib/generators/templates/uploadcare_config_template.erb +136 -109
  6. data/lib/generators/templates/uploadcare_js_initializer.js +25 -0
  7. data/lib/generators/uploadcare_config_generator.rb +3 -3
  8. data/lib/generators/uploadcare_importmap_generator.rb +56 -0
  9. data/lib/uploadcare/rails/action_view/uploadcare_form_builder.rb +82 -0
  10. data/lib/uploadcare/rails/action_view/uploadcare_include_tags.rb +61 -25
  11. data/lib/uploadcare/rails/action_view/uploadcare_uploader_tags.rb +163 -30
  12. data/lib/uploadcare/rails/active_record/mount_uploadcare_file.rb +5 -5
  13. data/lib/uploadcare/rails/active_record/mount_uploadcare_file_group.rb +5 -5
  14. data/lib/uploadcare/rails/api/rest/addons_api.rb +1 -1
  15. data/lib/uploadcare/rails/api/rest/base.rb +1 -1
  16. data/lib/uploadcare/rails/api/rest/conversion_api.rb +1 -1
  17. data/lib/uploadcare/rails/api/rest/file_api.rb +1 -1
  18. data/lib/uploadcare/rails/api/rest/file_metadata_api.rb +1 -1
  19. data/lib/uploadcare/rails/api/rest/group_api.rb +1 -1
  20. data/lib/uploadcare/rails/api/rest/project_api.rb +1 -1
  21. data/lib/uploadcare/rails/api/rest/webhook_api.rb +2 -2
  22. data/lib/uploadcare/rails/api/upload/base.rb +1 -1
  23. data/lib/uploadcare/rails/api/upload/upload_api.rb +2 -2
  24. data/lib/uploadcare/rails/configuration.rb +83 -4
  25. data/lib/uploadcare/rails/engine.rb +9 -8
  26. data/lib/uploadcare/rails/jobs/delete_file_job.rb +1 -1
  27. data/lib/uploadcare/rails/jobs/store_file_job.rb +1 -1
  28. data/lib/uploadcare/rails/jobs/store_group_job.rb +1 -1
  29. data/lib/uploadcare/rails/mongoid/mount_uploadcare_file.rb +6 -6
  30. data/lib/uploadcare/rails/mongoid/mount_uploadcare_file_group.rb +6 -6
  31. data/lib/uploadcare/rails/objects/concerns/loadable.rb +2 -2
  32. data/lib/uploadcare/rails/objects/file.rb +7 -7
  33. data/lib/uploadcare/rails/objects/group.rb +6 -6
  34. data/lib/uploadcare/rails/services/files_count_extractor.rb +1 -1
  35. data/lib/uploadcare/rails/transformations/image_transformations.rb +6 -6
  36. data/lib/uploadcare/rails/version.rb +1 -1
  37. data/lib/uploadcare/rails.rb +1 -1
  38. data/lib/uploadcare-rails.rb +12 -12
  39. data/uploadcare-rails.gemspec +5 -5
  40. metadata +10 -10
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 84a1955833b6989dafad0bcd3bbfd9186c84f619f75949aa972e007f480b7483
4
- data.tar.gz: e2a813f07691e21d11877e6cc5926dbd03b8ddeca5d7bc6e86445316ba71fe12
3
+ metadata.gz: 88002fcbaf5425a210b4b200796a3d1f5069427cfc99a029fca4ced62c2a34d6
4
+ data.tar.gz: 9c40d8fb04f3555daab74c01a013638c93e659ebfb6d3a78128f2c9e3bfd0d19
5
5
  SHA512:
6
- metadata.gz: 5e4192606fb0d70db16c9ac22da5bf44bd42fc2b2b597fbb8445e4f8e9479d03aa523474ef456e48530192807c548c556ad7137d4e0e652d79981dd1173b857c
7
- data.tar.gz: d9d15fd8e45b9dcc557a216fcba5947b7b33f2b3adbdb7e4009f06a1056b86eb15c1bd0a6e9f9911a86da031eb4844d4f59e0cb1e1edd3ef4d5fee4e35f7c73c
6
+ metadata.gz: 18b0076f6f009a8cf7049c560b559c6389c23b0ee6e9a1f375188049ef93102ae9547281d394852fd00d47ce1314831e37d42fd12a0dd18a0fcf4eeac0adf368
7
+ data.tar.gz: 11cd90aa7ea71c128f656a29faf206ea1d95ccf4996dee83596fddf3b7ba12b6e0e1d169c3dac4ab93122ddd40af01fcf8229b7b2ec7f0bd8a450181f45760b6
data/CHANGELOG.md CHANGED
@@ -4,6 +4,72 @@ All notable changes to this project will be documented in this file.
4
4
  The format is based now on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
5
5
  and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
6
6
 
7
+ ## 4.0.0
8
+
9
+ This is a major release that replaces the legacy jQuery-based widget with the new
10
+ [File Uploader](https://uploadcare.com/docs/file-uploader/) built on Web Components.
11
+
12
+ See [v4.x-migrations-guide.md](https://github.com/uploadcare/uploadcare-rails/blob/main/v4.x-migrations-guide.md) for a detailed upgrade guide.
13
+
14
+ ### Breaking Changes
15
+
16
+ * **Minimum Ruby version raised to 3.3+**
17
+ * **Minimum Rails version raised to 7.2+**
18
+ * Replaced legacy jQuery widget with the new File Uploader (Web Components based)
19
+ * `uploadcare_include_tag` now loads File Uploader CSS and JS instead of the jQuery widget bundle.
20
+ The `bundle:` parameter is removed; use `solution:` instead (`"regular"`, `"inline"`, `"minimal"`)
21
+ * `uploadcare_uploader_field` and `uploadcare_uploader_field_tag` now render Web Components
22
+ (`<uc-form-input>`, `<uc-config>`, `<uc-file-uploader-*>`, `<uc-upload-ctx-provider>`)
23
+ instead of hidden `<input>` elements. Method signatures now use keyword arguments
24
+ * Auto-detection of `multiple` from `mount_uploadcare_file_group` is preserved but can now
25
+ be overridden by passing `multiple:` explicitly
26
+ * Module `Uploadcare::Rails::ActionView::UploadcareWidgetTags` renamed to
27
+ `Uploadcare::Rails::ActionView::UploadcareIncludeTags`
28
+ * Configuration options renamed to match File Uploader API:
29
+ `images_only` -> `img_only`, `tabs` -> `source_list`, `input_accept_types` -> `accept`,
30
+ `preferred_types` -> `external_sources_preferred_types`, `multipart_min_size` -> `multipart_min_file_size`,
31
+ `preview_proxy` -> `secure_delivery_proxy`, `cdn_base` -> `cdn_cname`,
32
+ `camera_mirror_default` -> `camera_mirror`, `crop` -> `crop_preset`
33
+ * `do_not_store` is still used for server-side model callbacks (`mount_uploadcare_file*`).
34
+ File Uploader `store` is a separate client-side setting and is not a drop-in replacement
35
+ * Removed widget-specific configuration options with no File Uploader equivalent:
36
+ `live`, `manual_start`, `preview_step`, `clearable`, `system_dialog`,
37
+ `audio_bits_per_second`, `video_preferred_mime_types`, `video_bits_per_second`,
38
+ `locale_translations`, `locale_pluralize`
39
+ * Legacy widget parameters (`WIDGET_PARAMS`) are retained in Configuration for backward compatibility
40
+ but are marked deprecated and no longer affect the new File Uploader
41
+
42
+ ### Added
43
+
44
+ * File Uploader integration using Web Components (`<uc-config>`, `<uc-file-uploader-*>`,
45
+ `<uc-upload-ctx-provider>`, `<uc-form-input>`)
46
+ * `uploadcare_stylesheet_tag` helper for including only File Uploader CSS
47
+ * `uploadcare_uploader` helper for rendering the uploader without a form input
48
+ * `uploadcare_config_tag` helper for rendering a `<uc-config>` element
49
+ * `uploadcare_uploader_tag` helper for rendering a `<uc-file-uploader-*>` element
50
+ * `uploadcare_ctx_provider_tag` helper for rendering a `<uc-upload-ctx-provider>` element
51
+ * `uploadcare_form_input_tag` helper for rendering a `<uc-form-input>` element
52
+ * FormBuilder integration: `f.uploadcare_file` for use with `form_with` / `form_for`
53
+ * Importmap generator: `rails g uploadcare_importmap` for Rails 7+ importmap setup
54
+ * Importmap mode for `uploadcare_include_tag` (`importmap: true` loads only CSS)
55
+ * Per-component configuration via `<uc-config>` with global defaults from initializer
56
+ * Rails 8.0 and 8.1 support
57
+ * `FILE_UPLOADER_PARAMS` configuration constants for the new File Uploader options
58
+
59
+ ### Changed
60
+
61
+ * Widget script CDN changed from `ucarecdn.com` to `cdn.jsdelivr.net` (for File Uploader assets)
62
+ * Configuration now uses `uploader_config_attributes` (returns Hash for Web Component attributes)
63
+ instead of `uploader_parameters` (returned JS global variable assignments)
64
+ * Generated config template (`rails g uploadcare_config`) updated with new File Uploader options
65
+ * `store_files_async` and `delete_files_async` default to `false` in generated config template
66
+
67
+ ### Deprecated
68
+
69
+ * `Uploadcare::Rails::Configuration#uploader_parameters` — use `uploader_config_attributes` instead
70
+ * `Uploadcare::Rails::Configuration#widget` — use `uploader_config_attributes` instead
71
+ * Legacy `WIDGET_PARAMS` configuration parameters — use `FILE_UPLOADER_PARAMS` equivalents instead
72
+
7
73
  ## 3.4.4 — 2024-11-07
8
74
 
9
75
  ### Added
data/Gemfile CHANGED
@@ -1,18 +1,19 @@
1
1
  # frozen_string_literal: true
2
2
 
3
- source 'https://rubygems.org'
3
+ source "https://rubygems.org"
4
4
 
5
5
  # Specify your gem's dependencies in uploadcare-rails.gemspec
6
6
  gemspec
7
7
 
8
- gem 'http-parser', '~> 1.2', '>= 1.2.3'
9
- gem 'rake', '~> 13.0.6'
8
+ gem "http-parser", "~> 1.2", ">= 1.2.3"
9
+ gem "rake", "~> 13.0.6"
10
10
 
11
11
  group :test do
12
- gem 'mongoid', '~> 9', require: false
13
- gem 'rspec', '~> 3.12'
14
- gem 'rspec-rails', '>= 5.1'
15
- gem 'rubocop', '~> 1.48'
16
- gem 'vcr', '~> 6.1'
17
- gem 'webmock', '~> 3.18'
12
+ gem "mongoid", "~> 9", require: false
13
+ gem "ostruct"
14
+ gem "rspec", "~> 3.12"
15
+ gem "rspec-rails", ">= 5.1"
16
+ gem "rubocop-rails-omakase", require: false
17
+ gem "vcr", "~> 6.1"
18
+ gem "webmock", "~> 3.18"
18
19
  end
data/README.md CHANGED
@@ -9,10 +9,13 @@
9
9
  A Ruby on Rails plugin for [Uploadcare](https://uploadcare.com) service.
10
10
  Based on [uploadcare-ruby](https://github.com/uploadcare/uploadcare-ruby) gem (general purpose wrapper for Uploadcare API)
11
11
 
12
- :heavy_exclamation_mark: *Note: the gem uploadcare-rails 2.x is not backward compatible with 1.x.*
12
+ :heavy_exclamation_mark: *Note: This version uses the new [File Uploader](https://uploadcare.com/docs/file-uploader/) (Web Components based). For the legacy jQuery widget, use version 3.x.*
13
+
14
+ :arrow_up: **Upgrading from 3.x?** See the [Migration Guide](https://github.com/uploadcare/uploadcare-rails/blob/main/v4.x-migrations-guide.md) for step-by-step instructions.
13
15
 
14
16
  ## Table of Contents
15
17
 
18
+ * [Migration from 3.x](https://github.com/uploadcare/uploadcare-rails/blob/main/v4.x-migrations-guide.md)
16
19
  * [Requirements](#requirements)
17
20
  * [Installation](#installation)
18
21
  * [Using Gemfile](#using-gemfile)
@@ -20,10 +23,12 @@ Based on [uploadcare-ruby](https://github.com/uploadcare/uploadcare-ruby) gem (g
20
23
  * [Usage](#usage)
21
24
  * [Configuration](#configuration)
22
25
  * [Uploadcare File Uploader](#uploadcare-file-uploader)
23
- * [Widget](#widget)
26
+ * [Include Tag](#include-tag)
24
27
  * [Using CDN](#using-cdn)
25
28
  * [Using NPM](#using-npm)
26
- * [Input](#input)
29
+ * [Using Importmap (Rails 7+)](#using-importmap-rails-7)
30
+ * [Uploader Field](#uploader-field)
31
+ * [FormBuilder Integration](#formbuilder-integration)
27
32
  * [Using the File Uploader with Rails models](#using-the-file-uploader-with-rails-models)
28
33
  * [Form data](#form-data)
29
34
  * [File and Group wrappers](#file-and-group-wrappers)
@@ -40,8 +45,8 @@ Based on [uploadcare-ruby](https://github.com/uploadcare/uploadcare-ruby) gem (g
40
45
  * [Useful links](#useful-links)
41
46
 
42
47
  ## Requirements
43
- * ruby 2.7+
44
- * Ruby on Rails 6.0+
48
+ * ruby 3.3+
49
+ * Ruby on Rails 7.2+
45
50
 
46
51
  ## Installation
47
52
 
@@ -120,33 +125,28 @@ config.delete_files_after_destroy = true
120
125
  # Sets caching for Uploadcare files
121
126
  config.cache_files = true
122
127
 
123
- # Available locales currently are:
124
- # ar az ca cs da de el en es et fr he it ja ko lv nb nl pl pt ro ru sk sr sv tr uk vi zhTW zh
128
+ # Available locales: ar, ca, cs, da, de, el, en, es, et, fr, he, hr, hu, id,
129
+ # it, ja, ko, nb, nl, pl, pt, ro, ru, sk, sr, sv, tr, uk, vi, zh-CN, zh-TW
125
130
  config.locale = "en"
126
-
127
- # If true, inputs on your page are initialized automatically, see the article for details -
128
- # https://uploadcare.com/docs/file-uploader-api/widget-initialization/
129
- config.live = true
130
-
131
- # If true, input initialization is invoked manually.
132
- # See https://uploadcare.com/docs/file-uploader-api/widget-initialization/).
133
- config.manual_start = false
134
131
  ```
135
132
 
136
133
  Then you can configure all global variables such as files storing/caching, deleting files, etc.
137
134
  Full list of available options is listed in the file itself. Just uncomment an option and set the value.
138
135
 
136
+ In examples we're going to use `ucarecdn.com` domain. Check your project's subdomain in the [Dashboard](https://app.uploadcare.com/projects/-/settings/#delivery).
139
137
 
140
138
  ### Uploadcare File Uploader
141
139
 
142
- ### Widget
140
+ The gem integrates with the new [Uploadcare File Uploader](https://uploadcare.com/docs/file-uploader/) which is built with Web Components for maximum compatibility across frameworks.
141
+
142
+ ### Include Tag
143
143
 
144
144
  #### Using CDN
145
145
 
146
- The fastest way to start using file uploading is to add the Uploadcare widget to the html-page.
147
- There is a view helper that can do it with two strings of code:
146
+ The fastest way to start using file uploading is to add the Uploadcare File Uploader to the html-page.
147
+ There is a view helper that can do it with one line of code:
148
148
 
149
- Add this string to your `<head>` html-tag
149
+ Add this to your `<head>` html-tag (e.g., in `application.html.erb`):
150
150
 
151
151
  ```erb
152
152
  <!DOCTYPE html>
@@ -156,60 +156,177 @@ Add this string to your `<head>` html-tag
156
156
  <%= uploadcare_include_tag %>
157
157
  <!--
158
158
  results in:
159
- <script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js"></script>
160
- <script>
161
- //<![CDATA[
162
- UPLOADCARE_PUBLIC_KEY = "your_public_key";
163
- UPLOADCARE_LOCALE = "en";
164
- UPLOADCARE_LIVE = true;
165
- UPLOADCARE_MANUAL_START = false;
166
- //]]>
159
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/web/uc-file-uploader-regular.min.css">
160
+ <script type="module">
161
+ import * as UC from 'https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/web/file-uploader.min.js';
162
+ UC.defineComponents(UC);
167
163
  </script>
168
164
  -->
169
165
  </head>
170
166
  ...
171
167
  ```
172
- This helper uses a CDN-url for the widget bundle and supports three options:
173
168
 
174
- - **version** version of the Uploadcare widget. Default is "3.x".
175
- - **bundle** — bundle name. Available names are "full", "default", "api", "ie8" and "lang.en".
176
- Default bundle is "full" a full bundle with built-in jQuery.
177
- More info about bundles [here](https://uploadcare.com/docs/uploads/file-uploader/#bundles).
169
+ This helper uses a CDN-url for the File Uploader and supports these options:
170
+
171
+ - **version** version of the Uploadcare File Uploader. Default is "v1".
172
+ - **solution** solution type. Available names are "regular", "inline", "minimal".
173
+ Default is "regular". More info about solutions [here](https://uploadcare.com/docs/file-uploader/solutions/).
178
174
  - **min** — bool value detecting if the bundle must be minified.
179
175
 
180
- The `<head>` tag then also includes the `<script>` with widget global settings set in `config/initializers/uploadcare.rb`. You can override them later in an individual widget.
176
+ ```erb
177
+ <%= uploadcare_include_tag(version: 'v1', solution: 'inline', min: true) %>
178
+ ```
179
+
180
+ #### Using Importmap (Rails 7+)
181
+
182
+ For modern Rails applications using [importmap-rails](https://github.com/rails/importmap-rails), you can set up Uploadcare with a single command:
183
+
184
+ ```console
185
+ $ rails g uploadcare_importmap
186
+ ```
187
+
188
+ This generator will:
189
+ 1. Add the Uploadcare File Uploader pin to your `config/importmap.rb`
190
+ 2. Create `app/javascript/uploadcare.js` with initialization code
181
191
 
192
+ After running the generator, import Uploadcare in your `app/javascript/application.js`:
182
193
 
183
- #### Using asset pipeline.
194
+ ```javascript
195
+ import "uploadcare"
196
+ ```
197
+
198
+ And add the CSS stylesheet to your application layout:
184
199
 
185
- Download and append widget manually to your asset pipeline. You may download (e.g. https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js) and serve the widget yourself along with your other assets.
200
+ ```erb
201
+ <%= uploadcare_stylesheet_tag %>
202
+ ```
186
203
 
187
204
  #### Using NPM
188
205
 
189
- Installing via NPM instructions can be found [here](https://uploadcare.com/docs/uploads/file-uploader/#npm).
206
+ You can also install the File Uploader via NPM:
207
+
208
+ ```bash
209
+ npm install @uploadcare/file-uploader
210
+ ```
211
+
212
+ Then import it in your JavaScript:
213
+
214
+ ```javascript
215
+ import * as UC from '@uploadcare/file-uploader';
216
+
217
+ UC.defineComponents(UC);
218
+ ```
219
+
220
+ And include the CSS in your application:
221
+
222
+ ```javascript
223
+ import '@uploadcare/file-uploader/web/uc-file-uploader-regular.min.css';
224
+ ```
225
+
226
+ **Manual Setup**
227
+
228
+ If you prefer manual setup, create your JavaScript initializer in `app/javascript/uploadcare.js`:
190
229
 
191
- ### Input
230
+ ```javascript
231
+ import * as UC from "@uploadcare/file-uploader";
232
+
233
+ UC.defineComponents(UC);
234
+ ```
235
+
236
+ Import it in `app/javascript/application.js`:
237
+
238
+ ```javascript
239
+ import "uploadcare"
240
+ ```
192
241
 
193
- When the widget is on a html-page, you want to add an input to your view that will be used by the File Uploader:
242
+ Pin File Uploader and initializer in `config/importmap.rb`:
243
+
244
+ ```ruby
245
+ pin "@uploadcare/file-uploader", to: "https://cdn.jsdelivr.net/npm/@uploadcare/file-uploader@v1/web/file-uploader.min.js"
246
+ pin "uploadcare"
247
+ ```
248
+
249
+ Add the CSS to your layout:
194
250
 
195
251
  ```erb
196
- ...
197
- <%= uploadcare_uploader_field :object, :attribute %>
252
+ <%= uploadcare_stylesheet_tag %>
253
+ ```
254
+
255
+ ### Uploader Field
256
+
257
+ Add an uploader field to your form using the `uploadcare_uploader_field` helper:
258
+
259
+ ```erb
260
+ <%= uploadcare_uploader_field :post, :picture %>
198
261
  <!--
199
262
  results in:
200
- <input role="uploadcare-uploader" type="hidden" name="object[attribute]" id="object_attribute">
263
+ <uc-form-input ctx-name="<auto-generated-uuid>" name="post[picture]"></uc-form-input>
264
+ <uc-config ctx-name="<auto-generated-uuid>" pubkey="your_public_key" locale="en"></uc-config>
265
+ <uc-file-uploader-regular ctx-name="<auto-generated-uuid>"></uc-file-uploader-regular>
266
+ <uc-upload-ctx-provider ctx-name="<auto-generated-uuid>"></uc-upload-ctx-provider>
201
267
  -->
202
- ...
203
268
  ```
204
269
 
205
- - **object** object name;
206
- - **attribute**object attribute name.
270
+ The helper automatically generates all required Web Components:
271
+ - `<uc-form-input>`syncs uploaded files with your form (no manual JS needed!)
272
+ - `<uc-config>` — applies configuration from `config/initializers/uploadcare.rb`
273
+ - `<uc-file-uploader-*>` — the uploader UI component
274
+ - `<uc-upload-ctx-provider>` — context provider for component communication
275
+
276
+ **Options:**
277
+
278
+ - **object_name** — object name which a field belongs to
279
+ - **method_name** — object method name
280
+ - **solution** — uploader solution type: "regular" (default), "inline", or "minimal"
281
+ - **multiple** — allow multiple file selection
282
+ - **img_only** — only allow image uploads
283
+ - Any other [File Uploader configuration option](https://uploadcare.com/docs/file-uploader/configuration/)
284
+
285
+ ```erb
286
+ <%= uploadcare_uploader_field :post, :picture, solution: "inline", img_only: true %>
287
+ ```
288
+
289
+ **Standalone fields** (outside of model context):
290
+
291
+ ```erb
292
+ <%= uploadcare_uploader_field_tag :file %>
293
+ ```
294
+
295
+ **Just the uploader component** (without form input, for custom JS handling):
296
+
297
+ ```erb
298
+ <%= uploadcare_uploader(ctx_name: 'my-uploader', solution: 'inline') %>
299
+ ```
300
+
301
+ **Low-level component helpers** (for fully custom composition):
302
+
303
+ ```erb
304
+ <%= uploadcare_form_input_tag(name: "post[picture]", ctx_name: "post-picture") %>
305
+ <%= uploadcare_config_tag(ctx_name: "post-picture", multiple: true, img_only: true) %>
306
+ <%= uploadcare_uploader_tag(ctx_name: "post-picture", solution: "regular") %>
307
+ <%= uploadcare_ctx_provider_tag(ctx_name: "post-picture") %>
308
+ ```
309
+
310
+ ### FormBuilder Integration
311
+
312
+ When using `form_with` or `form_for`, you can use the `uploadcare_file` method on the form builder:
313
+
314
+ ```erb
315
+ <%= form_with model: @post do |f| %>
316
+ <%= f.uploadcare_file :picture %>
317
+ <%= f.uploadcare_file :gallery, multiple: true, solution: "inline" %>
318
+ <%= f.submit %>
319
+ <% end %>
320
+ ```
321
+
322
+ This provides the same functionality as `uploadcare_uploader_field` but with proper form builder integration and automatic validation error wrapping.
207
323
 
208
324
  ### Using the File Uploader with Rails models
209
325
 
210
- View helpers are good to be used for Rails models.
211
- First, you need to mount uploadcare file or group to the model attribute.
212
- For example you have a database table like this and model `Post`:
326
+ View helpers are designed to work seamlessly with Rails models.
327
+ First, mount an uploadcare file or group to the model attribute.
328
+
329
+ For example, if you have a database table like this and a model `Post`:
213
330
  ```
214
331
  # DB table "posts"
215
332
  ---------------------
@@ -234,20 +351,27 @@ end
234
351
 
235
352
  ```erb
236
353
  <!-- app/views/posts/new.html.erb -->
237
- <h1> NEW POST </h1>
354
+ <h1>NEW POST</h1>
355
+
356
+ <%= uploadcare_include_tag %>
238
357
 
239
358
  <%= form_tag("/posts", method: :post) do %>
240
359
  <%= uploadcare_uploader_field :post, :picture %>
241
- <!--
242
- results in:
243
- <input role="uploadcare-uploader" multiple="false" type="hidden" name="post[picture]" id="post_picture">
244
- -->
245
360
  <div>
246
361
  <%= submit_tag "Save" %>
247
362
  </div>
248
363
  <% end %>
249
364
  ```
250
365
 
366
+ Or using `form_with`:
367
+
368
+ ```erb
369
+ <%= form_with model: @post do |f| %>
370
+ <%= f.uploadcare_file :picture %>
371
+ <%= f.submit %>
372
+ <% end %>
373
+ ```
374
+
251
375
  #### Uploadcare File Group
252
376
 
253
377
  ```ruby
@@ -259,74 +383,18 @@ end
259
383
 
260
384
  ```erb
261
385
  <!-- app/views/posts/new.html.erb -->
262
- <h1> NEW POST </h1>
386
+ <h1>NEW POST</h1>
263
387
 
264
- <%= form_tag("/posts", method: :post) do %>
265
- <%= uploadcare_uploader_field :post, :attachments %>
266
- <!--
267
- results in:
268
- <input role="uploadcare-uploader" multiple="true" type="hidden" name="post[attachments]" id="post_attachments">
269
- -->
270
- <div>
271
- <%= submit_tag "Save" %>
272
- </div>
273
- <% end %>
274
- ```
275
-
276
- The input will have a `value` property set to CDN-urls when you will select files to upload in the widget.
277
-
278
- ```erb
279
- <input role="uploadcare-uploader" type="hidden" name="post[picture]" id="post_picture" value="https://ucarecdn.com/8355c2c5-f108-4d74-963d-703d48020f83/">
280
- ```
281
-
282
- So, you get CDN-urls as a value of the attribute in the controller on form submit.
283
- The value will be available in the controller by `params[:post][:picture]`.
284
-
285
- The helper is detecting the value of the `multiple` property based on the mount type in your model.
286
-
287
- ### Caching issues with Turbolinks/Hotwire
288
-
289
- If you are facing issue, with multiple input elements being rendered due to turbolinks caching you can append this fix in the `app/javascript/application.js` to overcome this:
290
-
291
- ```
292
- document.addEventListener('turbolinks:before-cache', function() {
293
- const dialogClose = document.querySelector('.uploadcare--dialog__close');
294
- if (dialogClose) {
295
- dialogClose.dispatchEvent(new Event('click'));
296
- }
297
-
298
- const dialog = document.querySelector('.uploadcare--dialog');
299
- if (dialog) {
300
- dialog.remove();
301
- }
302
-
303
- const widgets = document.querySelectorAll('.uploadcare--widget');
304
- widgets.forEach(widget => {
305
- widget.remove();
306
- });
307
- });
308
- ```
309
-
310
- Similarly if you are using [Hotwire](https://hotwired.dev/) then use can you use below code:
388
+ <%= uploadcare_include_tag %>
311
389
 
390
+ <%= form_with model: @post do |f| %>
391
+ <%= f.uploadcare_file :attachments, multiple: true, group_output: true %>
392
+ <%= f.submit %>
393
+ <% end %>
312
394
  ```
313
- document.addEventListener('turbo:before-cache', function() {
314
- const dialogClose = document.querySelector('.uploadcare--dialog__close');
315
- if (dialogClose) {
316
- dialogClose.dispatchEvent(new Event('click'));
317
- }
318
-
319
- const dialog = document.querySelector('.uploadcare--dialog');
320
- if (dialog) {
321
- dialog.remove();
322
- }
323
395
 
324
- const widgets = document.querySelectorAll('.uploadcare--widget');
325
- widgets.forEach(widget => {
326
- widget.remove();
327
- });
328
- });
329
- ```
396
+ The `<uc-form-input>` component automatically syncs uploaded file URLs with your form.
397
+ When you submit the form, the CDN URL(s) will be available in the controller via `params[:post][:picture]`.
330
398
 
331
399
  ### File and Group wrappers
332
400
 
@@ -716,7 +784,7 @@ Uploadcare::GroupApi.store_group("d476f4c9-44a9-4670-88a5-c3cf5d26a6c2~20")
716
784
  ```
717
785
 
718
786
 
719
- #### Create a new group by file's uuids.
787
+ #### Create a new group by file's uuids
720
788
 
721
789
  It is possible to specify transformed URLs with UUIDs of files OR just UUIDs.
722
790
 
@@ -981,7 +1049,7 @@ Uploadcare::AddonsApi.rekognition_detect_labels_status('dfeaf81c-5c0d-49d5-8ed4-
981
1049
  # => {"status"=>"done"}
982
1050
  ```
983
1051
 
984
- #### Execute AWS Rekognition Moderation Add-On for a given target to detect moderation labels in an image.
1052
+ #### Execute AWS Rekognition Moderation Add-On for a given target to detect moderation labels in an image
985
1053
  ```
986
1054
  Note: Detected labels are stored in the file's appdata.
987
1055
  ```
@@ -991,7 +1059,7 @@ Uploadcare::AddonsApi.rekognition_detect_moderation_labels('f757ea10-8b1a-4361-9
991
1059
  # => {"request_id"=>"dfeaf81c-5c0d-49d5-8ed4-ac09bac7998e"}
992
1060
  ```
993
1061
 
994
- # Check the status of an AWS Rekognition Moderation Add-On execution request that had been started using the Execute Add-On operation.
1062
+ # Check the status of an AWS Rekognition Moderation Add-On execution request that had been started using the Execute Add-On operation
995
1063
 
996
1064
  ```ruby
997
1065
  Uploadcare::AddonsApi.rekognition_detect_moderation_labels_status('dfeaf81c-5c0d-49d5-8ed4-ac09bac7998e')
@@ -1030,6 +1098,7 @@ Uploadcare::AddonsApi.remove_bg_status('6d26a7d5-0955-4aeb-a9b1-c9776c83aa4c')
1030
1098
 
1031
1099
 
1032
1100
  ## Useful links
1101
+ * [Migration guide from 3.x](https://github.com/uploadcare/uploadcare-rails/blob/main/v4.x-migrations-guide.md)
1033
1102
  * [Uploadcare documentation](https://uploadcare.com/docs/?utm_source=github&utm_medium=referral&utm_campaign=uploadcare-rails)
1034
1103
  * [Upload API reference](https://uploadcare.com/api-refs/upload-api/?utm_source=github&utm_medium=referral&utm_campaign=uploadcare-rails)
1035
1104
  * [REST API reference](https://uploadcare.com/api-refs/rest-api/?utm_source=github&utm_medium=referral&utm_campaign=uploadcare-rails)