active_storage_drag_and_drop 0.3.5 → 0.4.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.
- checksums.yaml +4 -4
- data/.codeclimate.yml +5 -0
- data/.eslintignore +5 -0
- data/.eslintrc.yml +1 -0
- data/.gitignore +20 -0
- data/.rubocop.yml +9 -7
- data/.travis.yml +17 -1
- data/.yardopts +3 -0
- data/Gemfile +2 -0
- data/Gemfile.lock +93 -0
- data/README.md +112 -17
- data/Rakefile +2 -0
- data/active_storage_drag_and_drop.gemspec +19 -2
- data/app/assets/javascripts/active_storage_drag_and_drop.js +6 -6
- data/app/javascript/active_storage_drag_and_drop/direct_upload_controller.js +32 -24
- data/app/javascript/active_storage_drag_and_drop/helpers.js +36 -46
- data/app/javascript/active_storage_drag_and_drop/index.js +2 -74
- data/app/javascript/active_storage_drag_and_drop/ujs.js +95 -65
- data/app/javascript/active_storage_drag_and_drop/upload_queue_processor.js +43 -17
- data/bin/console +1 -0
- data/lib/active_storage_drag_and_drop.rb +20 -1
- data/lib/active_storage_drag_and_drop/form_builder.rb +145 -0
- data/lib/active_storage_drag_and_drop/version.rb +1 -1
- data/package.json +6 -0
- data/webpack.config.js +7 -8
- data/yarn.lock +606 -13
- metadata +220 -10
- data/app/views/application/_active_storage_drag_and_drop.html.erb +0 -15
- data/lib/active_storage_drag_and_drop/rails.rb +0 -8
- data/lib/active_storage_drag_and_drop/rails/engine.rb +0 -11
- data/lib/active_storage_drag_and_drop/rails/form_builder.rb +0 -78
- data/lib/active_storage_drag_and_drop/rails/form_helper.rb +0 -16
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 7ba690ed77fde42914d34c270c5fda5cf7746486223b6755093e533366dc0b45
|
4
|
+
data.tar.gz: 8975e08690e83f5ef6d414c02a06b24c775f3895b68e56b7c154c245f56e6461
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c9d8bdd77b497ca484f0cf5406776d661003acb83f1a8184b9eb729f2d1182f6de603b17562b9bca57801a69c3f4e2456f67f0601d3fb70f6ea797dd928416f7
|
7
|
+
data.tar.gz: '090aed49947b5fc99af2618e4c4e4d0daaeca3393e42322b4354124a109494432c26f9a690105755fa3082f4c931eb96b2a998447a97e345e2cfa456b5ebaa00'
|
data/.codeclimate.yml
ADDED
data/.eslintignore
ADDED
data/.eslintrc.yml
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
extends: standard
|
data/.gitignore
CHANGED
@@ -1,3 +1,5 @@
|
|
1
|
+
.idea
|
2
|
+
.idea/workspace.xml
|
1
3
|
/.bundle/
|
2
4
|
/.yardoc
|
3
5
|
/_yardoc/
|
@@ -8,3 +10,21 @@
|
|
8
10
|
/node_modules/
|
9
11
|
/tmp/
|
10
12
|
active_storage_drag_and_drop-*.gem
|
13
|
+
|
14
|
+
/test/dummy/.bundle
|
15
|
+
|
16
|
+
/test/dummy/db/*.sqlite3
|
17
|
+
/test/dummy/db/*.sqlite3-journal
|
18
|
+
|
19
|
+
/test/dummy/log/*
|
20
|
+
!/test/dummy/log/.keep
|
21
|
+
|
22
|
+
/test/dummy/tmp/*
|
23
|
+
!/test/dummy/tmp/.keep
|
24
|
+
|
25
|
+
/test/dummy/storage/*
|
26
|
+
!/test/dummy/storage/.keep
|
27
|
+
|
28
|
+
/test/dummy/.byebug_history
|
29
|
+
|
30
|
+
/test/dummy/db/migrate/*.active_storage.rb
|
data/.rubocop.yml
CHANGED
@@ -1,17 +1,15 @@
|
|
1
1
|
AllCops:
|
2
|
+
TargetRubyVersion: 2.5.0
|
2
3
|
Exclude:
|
3
|
-
- 'app/assets/havascripts/active_storage_drag_and_drop.js'
|
4
4
|
- 'lib/active_storage_drag_and_drop/version.rb'
|
5
|
+
- 'test/dummy/db/migrate/*'
|
6
|
+
- 'test/dummy/bin/*'
|
7
|
+
- 'test/dummy/config/**/*'
|
8
|
+
- 'vendor/**/*'
|
5
9
|
|
6
10
|
Rails:
|
7
11
|
Enabled: true
|
8
12
|
|
9
|
-
Rails/OutputSafety:
|
10
|
-
Enabled: false
|
11
|
-
|
12
|
-
Style/Documentation:
|
13
|
-
Enabled: false
|
14
|
-
|
15
13
|
Style/ClassAndModuleChildren:
|
16
14
|
Enabled: false
|
17
15
|
|
@@ -20,3 +18,7 @@ Style/BracesAroundHashParameters:
|
|
20
18
|
|
21
19
|
Metrics/LineLength:
|
22
20
|
Max: 99
|
21
|
+
|
22
|
+
Metrics/BlockLength:
|
23
|
+
Exclude:
|
24
|
+
- 'active_storage_drag_and_drop.gemspec'
|
data/.travis.yml
CHANGED
@@ -1,5 +1,21 @@
|
|
1
1
|
sudo: false
|
2
2
|
language: ruby
|
3
|
+
cache: bundler
|
3
4
|
rvm:
|
4
5
|
- 2.5.0
|
5
|
-
|
6
|
+
|
7
|
+
addons:
|
8
|
+
firefox: latest
|
9
|
+
|
10
|
+
env:
|
11
|
+
global:
|
12
|
+
CC_TEST_REPORTER_ID=93b20ad2a94eb5d9feb97dca94b2d1df4243fa3d715d5d6c1c61bc9c6199f105
|
13
|
+
|
14
|
+
before_install:
|
15
|
+
- gem install bundler -v 1.16.1
|
16
|
+
- curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
|
17
|
+
- chmod +x ./cc-test-reporter
|
18
|
+
- ./cc-test-reporter before-build
|
19
|
+
|
20
|
+
after_script:
|
21
|
+
- ./cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT
|
data/.yardopts
ADDED
data/Gemfile
CHANGED
data/Gemfile.lock
CHANGED
@@ -49,15 +49,49 @@ GEM
|
|
49
49
|
i18n (>= 0.7, < 2)
|
50
50
|
minitest (~> 5.1)
|
51
51
|
tzinfo (~> 1.1)
|
52
|
+
addressable (2.5.2)
|
53
|
+
public_suffix (>= 2.0.2, < 4.0)
|
54
|
+
archive-zip (0.11.0)
|
55
|
+
io-like (~> 0.3.0)
|
52
56
|
arel (9.0.0)
|
57
|
+
ast (2.4.0)
|
58
|
+
bootsnap (1.3.2)
|
59
|
+
msgpack (~> 1.0)
|
53
60
|
builder (3.2.3)
|
61
|
+
byebug (10.0.2)
|
62
|
+
capybara (3.12.0)
|
63
|
+
addressable
|
64
|
+
mini_mime (>= 0.1.3)
|
65
|
+
nokogiri (~> 1.8)
|
66
|
+
rack (>= 1.6.0)
|
67
|
+
rack-test (>= 0.6.3)
|
68
|
+
regexp_parser (~> 1.2)
|
69
|
+
xpath (~> 3.2)
|
70
|
+
childprocess (0.9.0)
|
71
|
+
ffi (~> 1.0, >= 1.0.11)
|
72
|
+
coderay (1.1.2)
|
54
73
|
concurrent-ruby (1.1.3)
|
55
74
|
crass (1.0.4)
|
75
|
+
docile (1.3.1)
|
56
76
|
erubi (1.7.1)
|
77
|
+
ffi (1.9.25)
|
78
|
+
geckodriver-helper (0.23.0)
|
79
|
+
archive-zip (~> 0.7)
|
80
|
+
github-markup (3.0.2)
|
57
81
|
globalid (0.4.1)
|
58
82
|
activesupport (>= 4.2.0)
|
83
|
+
haml (5.0.4)
|
84
|
+
temple (>= 0.8.0)
|
85
|
+
tilt
|
59
86
|
i18n (1.1.1)
|
60
87
|
concurrent-ruby (~> 1.0)
|
88
|
+
io-like (0.3.0)
|
89
|
+
jaro_winkler (1.5.2)
|
90
|
+
json (2.1.0)
|
91
|
+
listen (3.1.5)
|
92
|
+
rb-fsevent (~> 0.9, >= 0.9.4)
|
93
|
+
rb-inotify (~> 0.9, >= 0.9.7)
|
94
|
+
ruby_dep (~> 1.2)
|
61
95
|
loofah (2.2.3)
|
62
96
|
crass (~> 1.0.2)
|
63
97
|
nokogiri (>= 1.5.9)
|
@@ -70,9 +104,22 @@ GEM
|
|
70
104
|
mini_mime (1.0.1)
|
71
105
|
mini_portile2 (2.3.0)
|
72
106
|
minitest (5.11.3)
|
107
|
+
msgpack (1.2.4)
|
73
108
|
nio4r (2.3.1)
|
74
109
|
nokogiri (1.8.5)
|
75
110
|
mini_portile2 (~> 2.3.0)
|
111
|
+
parallel (1.13.0)
|
112
|
+
parser (2.6.0.0)
|
113
|
+
ast (~> 2.4.0)
|
114
|
+
powerpack (0.1.2)
|
115
|
+
pry (0.11.3)
|
116
|
+
coderay (~> 1.1.0)
|
117
|
+
method_source (~> 0.9.0)
|
118
|
+
pry-byebug (3.6.0)
|
119
|
+
byebug (~> 10.0)
|
120
|
+
pry (~> 0.10)
|
121
|
+
public_suffix (3.0.3)
|
122
|
+
puma (3.12.0)
|
76
123
|
rack (2.0.6)
|
77
124
|
rack-test (1.1.0)
|
78
125
|
rack (>= 1.0, < 3)
|
@@ -100,7 +147,32 @@ GEM
|
|
100
147
|
method_source
|
101
148
|
rake (>= 0.8.7)
|
102
149
|
thor (>= 0.19.0, < 2.0)
|
150
|
+
rainbow (3.0.0)
|
103
151
|
rake (10.5.0)
|
152
|
+
rb-fsevent (0.10.3)
|
153
|
+
rb-inotify (0.9.10)
|
154
|
+
ffi (>= 0.5.0, < 2)
|
155
|
+
redcarpet (3.4.0)
|
156
|
+
regexp_parser (1.3.0)
|
157
|
+
rubocop (0.63.1)
|
158
|
+
jaro_winkler (~> 1.5.1)
|
159
|
+
parallel (~> 1.10)
|
160
|
+
parser (>= 2.5, != 2.5.1.1)
|
161
|
+
powerpack (~> 0.1)
|
162
|
+
rainbow (>= 2.2.2, < 4.0)
|
163
|
+
ruby-progressbar (~> 1.7)
|
164
|
+
unicode-display_width (~> 1.4.0)
|
165
|
+
ruby-progressbar (1.10.0)
|
166
|
+
ruby_dep (1.5.0)
|
167
|
+
rubyzip (1.2.2)
|
168
|
+
selenium-webdriver (3.141.0)
|
169
|
+
childprocess (~> 0.5)
|
170
|
+
rubyzip (~> 1.2, >= 1.2.2)
|
171
|
+
simplecov (0.16.1)
|
172
|
+
docile (~> 1.1)
|
173
|
+
json (>= 1.8, < 3)
|
174
|
+
simplecov-html (~> 0.10.0)
|
175
|
+
simplecov-html (0.10.2)
|
104
176
|
sprockets (3.7.2)
|
105
177
|
concurrent-ruby (~> 1.0)
|
106
178
|
rack (> 1, < 3)
|
@@ -108,22 +180,43 @@ GEM
|
|
108
180
|
actionpack (>= 4.0)
|
109
181
|
activesupport (>= 4.0)
|
110
182
|
sprockets (>= 3.0.0)
|
183
|
+
sqlite3 (1.3.13)
|
184
|
+
temple (0.8.0)
|
111
185
|
thor (0.20.3)
|
112
186
|
thread_safe (0.3.6)
|
187
|
+
tilt (2.0.9)
|
113
188
|
tzinfo (1.2.5)
|
114
189
|
thread_safe (~> 0.1)
|
190
|
+
unicode-display_width (1.4.1)
|
115
191
|
websocket-driver (0.7.0)
|
116
192
|
websocket-extensions (>= 0.1.0)
|
117
193
|
websocket-extensions (0.1.3)
|
194
|
+
xpath (3.2.0)
|
195
|
+
nokogiri (~> 1.8)
|
118
196
|
|
119
197
|
PLATFORMS
|
120
198
|
ruby
|
121
199
|
|
122
200
|
DEPENDENCIES
|
123
201
|
active_storage_drag_and_drop!
|
202
|
+
bootsnap
|
124
203
|
bundler (~> 1.16)
|
204
|
+
capybara
|
205
|
+
geckodriver-helper
|
206
|
+
github-markup
|
207
|
+
haml
|
208
|
+
listen
|
125
209
|
minitest (~> 5.0)
|
210
|
+
nokogiri
|
211
|
+
pry
|
212
|
+
pry-byebug
|
213
|
+
puma
|
126
214
|
rake (~> 10.0)
|
215
|
+
redcarpet
|
216
|
+
rubocop
|
217
|
+
selenium-webdriver
|
218
|
+
simplecov
|
219
|
+
sqlite3
|
127
220
|
|
128
221
|
BUNDLED WITH
|
129
222
|
1.16.1
|
data/README.md
CHANGED
@@ -1,6 +1,14 @@
|
|
1
1
|
# Active Storage Drag and Drop
|
2
2
|
|
3
|
-
|
3
|
+
[](https://badge.fury.io/rb/active_storage_drag_and_drop)
|
4
|
+
[](https://travis-ci.org/marinosoftware/active_storage_drag_and_drop)
|
5
|
+
[](https://codeclimate.com/github/marinosoftware/active_storage_drag_and_drop/test_coverage)
|
6
|
+
[](https://codeclimate.com/github/marinosoftware/active_storage_drag_and_drop/maintainability)
|
7
|
+
[](https://www.rubydoc.info/gems/active_storage_drag_and_drop)
|
8
|
+
[](https://standardjs.com)
|
9
|
+
|
10
|
+
Provides a form helper to make it easy to make drag and drop file upload fields that work with
|
11
|
+
Rails' [ActiveStorage](https://github.com/rails/rails/tree/master/activestorage).
|
4
12
|
|
5
13
|
## Installation
|
6
14
|
|
@@ -35,58 +43,145 @@ You may also optionally include some basic styles in your application css:
|
|
35
43
|
|
36
44
|
Add an ActiveStorage attachment to your model:
|
37
45
|
```ruby
|
46
|
+
class Message < ApplicationRecord
|
47
|
+
has_one_attached :image
|
48
|
+
end
|
49
|
+
```
|
50
|
+
or add multiple ActiveStorage attachments to your model:
|
51
|
+
```ruby
|
38
52
|
class Message < ApplicationRecord
|
39
53
|
has_many_attached :images
|
40
54
|
end
|
41
55
|
```
|
56
|
+
|
42
57
|
Call the method `drag_and_drop_file_field` on your model's form:
|
43
58
|
```haml
|
44
59
|
= form_with model: @message, local: true do |form|
|
45
60
|
= form.drag_and_drop_file_field :images
|
46
61
|
= form.submit
|
47
62
|
```
|
48
|
-
The first parameter is a symbol representing the method of the ActiveStorage attachment and an
|
63
|
+
The first parameter is a symbol representing the method of the ActiveStorage attachment and an
|
64
|
+
optional second parameter sets the the text on the drag and drop zone.
|
49
65
|
```ruby
|
50
66
|
form.drag_and_drop_file_field :images, 'Drag and drop images here!'
|
51
67
|
```
|
52
68
|
The content of the dropzone can also be passed as a block of ERB or HAML:
|
53
69
|
```haml
|
54
|
-
= form.drag_and_drop_file_field :images do
|
70
|
+
= form.drag_and_drop_file_field :images, disabled: false do
|
55
71
|
%i.far.fa-images
|
56
72
|
Drag images here!
|
57
73
|
```
|
58
|
-
|
74
|
+
|
75
|
+
|
76
|
+
|
77
|
+
### Strong Parameters
|
78
|
+
|
79
|
+
In your controller you can permit the params like so:
|
80
|
+
```ruby
|
81
|
+
# single file upload
|
82
|
+
params.permit(:message).require(:image)
|
83
|
+
# multiple upload
|
84
|
+
params.permit(:message).require(images: [])
|
85
|
+
```
|
86
|
+
|
87
|
+
### Options
|
88
|
+
Options for the nested file field can be passed as key value pairs. The helper accepts the same
|
89
|
+
options as the rails file_field form helper
|
90
|
+
[ActionView::Helpers::FormHelper#file_field](https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-file_field)
|
59
91
|
```ruby
|
60
|
-
form.drag_and_drop_file_field :images,
|
92
|
+
form.drag_and_drop_file_field :images, nil, disabled: true
|
61
93
|
```
|
62
|
-
|
94
|
+
|
95
|
+
### Validation
|
96
|
+
|
97
|
+
Like with the
|
98
|
+
[ActionView::Helpers::FormHelper#file_field](https://edgeapi.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-file_field)
|
99
|
+
you can pass a list of acceptable mime-types for client-side validation:
|
63
100
|
```ruby
|
64
|
-
form.drag_and_drop_file_field :images,
|
101
|
+
form.drag_and_drop_file_field :images, nil, accept: 'image/png, image/jpeg, image/gif, image/tiff'
|
65
102
|
```
|
66
|
-
|
103
|
+
An additional `size_limit` option can be passed which provides validation on the maximum acceptable
|
104
|
+
filesize in bytes:
|
67
105
|
```ruby
|
68
|
-
|
106
|
+
form.drag_and_drop_file_field :images, nil, size_limit: 5_000_000 # 5MB upper limit on file size
|
107
|
+
```
|
108
|
+
When one of these errors occurs by default a JavaScript `'dnd-upload:error'` event is dispatched
|
109
|
+
and an alert detailing the validation error appears. To override this default behaviour listen
|
110
|
+
for the event and call `preventDefault()` on the event.
|
111
|
+
|
112
|
+
### JavaScript Events
|
113
|
+
|
114
|
+
| Event name | Event target | Event data (`event.detail`) | Description |
|
115
|
+
| --- | --- | --- | --- |
|
116
|
+
| `dnd-uploads:start` | `<form>` | None | A form containing files for direct upload fields was submitted. |
|
117
|
+
| `dnd-upload:initialize` | `<input>` | `{id, file, iconContainer}` | Dispatched for every file after form submission. |
|
118
|
+
| `dnd-upload:start` | `<input>` | `{id, file, iconContainer}` | A direct upload is starting. |
|
119
|
+
| `dnd-upload:before-blob-request` | `<input>` | `{id, file, iconContainer, xhr}` | Before making a request to your application for direct upload metadata. |
|
120
|
+
| `dnd-upload:before-storage-request` | `<input>` | `{id, file, iconContainer, xhr}` | Before making a request to store a file. |
|
121
|
+
| `dnd-upload:progress` | `<input>` | `{id, file, iconContainer, progress}` | As requests to store files progress. |
|
122
|
+
| `dnd-upload:error` | `<input>` | `{id, file, iconContainer, error}` | An error occurred. An `alert` will display unless this event is canceled. |
|
123
|
+
| `dnd-upload:end` | `<input>` | `{id, file, iconContainer}` | A direct upload has ended. |
|
124
|
+
| `dnd-uploads:end` | `<form>` | None | All direct uploads have ended. |
|
125
|
+
|
126
|
+
To override the default behaviour of any of these events catch them with an event listener and call
|
127
|
+
`preventDefault()` on the event:
|
128
|
+
```javascript
|
129
|
+
document.addEventListener('dnd-upload:error', function (event) {
|
130
|
+
# do something...
|
131
|
+
event.preventDefault()
|
132
|
+
})
|
133
|
+
```
|
134
|
+
|
135
|
+
To asynchronously trigger uploading without form submission dispatch a
|
136
|
+
`dnd-uploads:process-upload-queue` event:
|
137
|
+
```javascript
|
138
|
+
var callback = function(error) {
|
139
|
+
if (error) {
|
140
|
+
// ...handle error...
|
141
|
+
} else {
|
142
|
+
// ...do your stuff
|
143
|
+
}
|
144
|
+
}
|
145
|
+
|
146
|
+
const uploadEvent = document.createEvent('Event')
|
147
|
+
uploadEvent.initEvent('dnd-uploads:process-upload-queue', true, true)
|
148
|
+
uploadEvent.detail = { callback }
|
149
|
+
form.dispatchEvent(uploadEvent)
|
69
150
|
```
|
70
151
|
|
71
152
|
## Development
|
72
153
|
|
73
|
-
Install yarn to manage js dependencies.
|
74
|
-
|
154
|
+
Install yarn to manage js dependencies. After checking out the repo, run `bin/setup` to install
|
155
|
+
dependencies. Then, run `rake test` to run the tests. You can also run `bin/console` for an
|
156
|
+
interactive prompt that will allow you to experiment.
|
75
157
|
|
76
|
-
After making a change to the javascript in `app/javascript` compile it to
|
158
|
+
After making a change to the javascript in `app/javascript` compile it to
|
159
|
+
`app/assets/javascripts/active_storage_drag_and_drop.js` by running
|
160
|
+
`yarn webpack`.
|
77
161
|
|
78
|
-
Use `
|
162
|
+
Use `yarn webpack --mode=development --watch` to build files
|
163
|
+
automatically on change. Use with `gem 'active_storage_drag_and_drop', path: [local-gem-repo]` to
|
164
|
+
develop and debug the gem in place in a rails app.
|
79
165
|
|
80
|
-
To install this gem onto your local machine, run `bundle exec rake install`. To release a new
|
166
|
+
To install this gem onto your local machine, run `bundle exec rake install`. To release a new
|
167
|
+
version, update the version number in `version.rb`, and then run `bundle exec rake release`, which
|
168
|
+
will create a git tag for the version, push git commits and tags, and push the `.gem` file to
|
169
|
+
[rubygems.org](https://rubygems.org).
|
81
170
|
|
82
171
|
## Contributing
|
83
172
|
|
84
|
-
Bug reports and pull requests are welcome on GitHub at
|
173
|
+
Bug reports and pull requests are welcome on GitHub at
|
174
|
+
https://github.com/marinosoftware/active_storage_drag_and_drop. This project is intended to be a
|
175
|
+
safe, welcoming space for collaboration, and contributors are expected to adhere to the
|
176
|
+
[Contributor Covenant](http://contributor-covenant.org) code of conduct.
|
85
177
|
|
86
178
|
## License
|
87
179
|
|
88
|
-
The gem is available as open source under the terms of the
|
180
|
+
The gem is available as open source under the terms of the
|
181
|
+
[MIT License](https://opensource.org/licenses/MIT).
|
89
182
|
|
90
183
|
## Code of Conduct
|
91
184
|
|
92
|
-
Everyone interacting in the ActiveStorageDragAndDrop project’s codebases, issue trackers, chat
|
185
|
+
Everyone interacting in the ActiveStorageDragAndDrop project’s codebases, issue trackers, chat
|
186
|
+
rooms and mailing lists is expected to follow the
|
187
|
+
[code of conduct](https://github.com/marinosoftware/active_storage_drag_and_drop/blob/master/CODE_OF_CONDUCT.md).
|