filepond-rails 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/MIT-LICENSE +20 -0
- data/README.md +81 -0
- data/Rakefile +8 -0
- data/app/assets/config/filepond_rails_manifest.js +1 -0
- data/app/assets/javascripts/filepond-rails.js +69 -0
- data/app/assets/stylesheets/filepond.css +1047 -0
- data/app/assets/stylesheets/filepond.min.css +8 -0
- data/app/controllers/filepond/rails/application_controller.rb +6 -0
- data/app/controllers/filepond/rails/ingress_controller.rb +61 -0
- data/app/helpers/filepond/rails/application_helper.rb +6 -0
- data/app/jobs/filepond/rails/application_job.rb +6 -0
- data/app/mailers/filepond/rails/application_mailer.rb +8 -0
- data/app/models/filepond/rails/application_record.rb +7 -0
- data/app/views/layouts/filepond/rails/application.html.erb +15 -0
- data/config/importmap.rb +4 -0
- data/config/routes.rb +11 -0
- data/lib/filepond/rails/engine.rb +18 -0
- data/lib/filepond/rails/version.rb +7 -0
- data/lib/filepond/rails.rb +9 -0
- data/lib/tasks/filepond/rails_tasks.rake +5 -0
- metadata +107 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: 1d4db40f90628c511fd73a636ce3c513fd01d9db16249bf99ceb5966ea9c4469
|
4
|
+
data.tar.gz: ff09c1019e75f8c9aaa002397e8b797f88848e94ea4ce4deee80eaa7f6125050
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: b57aa9177e77918141ec1bfd2fc694f7d5ace8d37c00d7f46c6637d981f3280e6196b65447042d981f480ae825fa89323ee1fbe19b28d7e6a15804fcffec64bb
|
7
|
+
data.tar.gz: 135ff06a64a2c6135d524644e5597a68416f2bd3ba1a824d8e8e9ebcbf96f1d51ecf633d1c2d7f32d1ee2031d925692e7a1d40592fa766f00acdd4eab61d0677
|
data/MIT-LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright 2022 Simon Chiu
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,81 @@
|
|
1
|
+
# filepond-rails
|
2
|
+
|
3
|
+
This gem allows you to quickly integrate [FilePond](https://github.com/pqina/filepond) with your Ruby on Rails app.
|
4
|
+
|
5
|
+
## Requirements
|
6
|
+
* Rails 7.0.x and above
|
7
|
+
* Use of [importmap-rails](https://github.com/rails/importmap-rails) (optional)
|
8
|
+
|
9
|
+
## Installation
|
10
|
+
Add this line to your application's Gemfile:
|
11
|
+
|
12
|
+
```ruby
|
13
|
+
gem "filepond-rails"
|
14
|
+
```
|
15
|
+
|
16
|
+
And then execute:
|
17
|
+
```bash
|
18
|
+
$ bundle
|
19
|
+
```
|
20
|
+
|
21
|
+
Or install it yourself as:
|
22
|
+
```bash
|
23
|
+
$ gem install filepond-rails
|
24
|
+
```
|
25
|
+
|
26
|
+
Add the following to your `application.css`:
|
27
|
+
```css
|
28
|
+
*= require 'filepond'
|
29
|
+
```
|
30
|
+
|
31
|
+
Add `javascript_importmap_tags` in the `head` section of your layout:
|
32
|
+
```erb
|
33
|
+
<%= javascript_importmap_tags %>
|
34
|
+
```
|
35
|
+
|
36
|
+
Mount `filepond-rails` routes:
|
37
|
+
```ruby
|
38
|
+
Rails.application.routes.draw do
|
39
|
+
mount Filepond::Rails::Engine, at: '/filepond'
|
40
|
+
end
|
41
|
+
```
|
42
|
+
|
43
|
+
Note: You must mount the routes at `/filepond`.
|
44
|
+
|
45
|
+
## Usage
|
46
|
+
|
47
|
+
This gem compromises of two parts:
|
48
|
+
1. An ingress controller for the FilePond `fetch` and `remove` server calls. The JavaScript code leverages Active Storage's existing direct upload endpoint.
|
49
|
+
2. JavaScript ESM module to automatically connect configured elements with the above endpoints.
|
50
|
+
|
51
|
+
At the present moment, the above parts are designed (and assumed) to work together.
|
52
|
+
|
53
|
+
The gem assumes that you set up your models and Active Storage configuration in a standard Rails way. Assuming you have a form that looks like this:
|
54
|
+
|
55
|
+
```erb
|
56
|
+
<%= form_with model: @user, url: update_avatar_path, method: :post do |f| %>
|
57
|
+
<%= f.label :avatar, 'Update your avatar' %>
|
58
|
+
<%= f.file_field :avatar, class: 'filepond', direct_upload: true %>
|
59
|
+
<%= f.button 'Update' %>
|
60
|
+
<% end %>
|
61
|
+
```
|
62
|
+
|
63
|
+
You can instantiate the `file_field` component like so:
|
64
|
+
|
65
|
+
```js
|
66
|
+
// app/javascript/application.js
|
67
|
+
import { FilePondRails, FilePond } from 'filepond-rails'
|
68
|
+
|
69
|
+
window.FilePond = FilePond
|
70
|
+
window.FilePondRails = FilePondRails
|
71
|
+
|
72
|
+
const input = document.querySelector('.filepond')
|
73
|
+
FilePondRails.create(input)
|
74
|
+
```
|
75
|
+
|
76
|
+
The gem's JavaScript provide two available exports:
|
77
|
+
1. `FilePond` (which corresponds to the original FilePond library)
|
78
|
+
2. `FilePondRails` (which is a convenience helper that integrates and sets up FilePond to work with our `FilePond::Rails::IngressController`
|
79
|
+
|
80
|
+
## License
|
81
|
+
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
// = link_directory ../javascripts .js
|
@@ -0,0 +1,69 @@
|
|
1
|
+
import { DirectUpload } from '@rails/activestorage'
|
2
|
+
import * as FilePond from 'filepond'
|
3
|
+
|
4
|
+
let FilePondRails = {
|
5
|
+
directUploadUrl: null,
|
6
|
+
input: null,
|
7
|
+
default_options: {
|
8
|
+
server: {
|
9
|
+
process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
|
10
|
+
const uploader = new DirectUpload(file, FilePondRails.directUploadUrl, {
|
11
|
+
directUploadWillStoreFileWithXHR: (request) => {
|
12
|
+
request.upload.addEventListener(
|
13
|
+
'progress',
|
14
|
+
event => progress(event.lengthComputable, event.loaded, event.total)
|
15
|
+
)
|
16
|
+
}
|
17
|
+
})
|
18
|
+
uploader.create((errorResponse, blob) => {
|
19
|
+
if (errorResponse) {
|
20
|
+
error(`Something went wrong: ${errorResponse}`)
|
21
|
+
} else {
|
22
|
+
const hiddenField = document.createElement('input')
|
23
|
+
hiddenField.setAttribute('type', 'hidden')
|
24
|
+
hiddenField.setAttribute('value', blob.signed_id)
|
25
|
+
hiddenField.name = FilePondRails.input.name
|
26
|
+
document.querySelector('form').appendChild(hiddenField)
|
27
|
+
load(blob.signed_id)
|
28
|
+
}
|
29
|
+
})
|
30
|
+
|
31
|
+
return {
|
32
|
+
abort: () => abort()
|
33
|
+
}
|
34
|
+
},
|
35
|
+
fetch: {
|
36
|
+
url: './filepond/active_storage/fetch',
|
37
|
+
method: 'POST',
|
38
|
+
onload: (response) => {
|
39
|
+
console.log(response)
|
40
|
+
return response
|
41
|
+
},
|
42
|
+
ondata: (response) => {
|
43
|
+
console.log(response)
|
44
|
+
return response
|
45
|
+
}
|
46
|
+
},
|
47
|
+
revert: {
|
48
|
+
url: './filepond/active_storage/remove'
|
49
|
+
},
|
50
|
+
headers: {
|
51
|
+
'X-CSRF-Token': document.head.querySelector("[name='csrf-token']").content
|
52
|
+
}
|
53
|
+
}
|
54
|
+
},
|
55
|
+
|
56
|
+
// Convenience method to initialize FilePond based on the way this gem expects things to work
|
57
|
+
create: function(input) {
|
58
|
+
FilePondRails.directUploadUrl = input.dataset.directUploadUrl
|
59
|
+
FilePondRails.input = input
|
60
|
+
|
61
|
+
// Initialize FilePond on our element
|
62
|
+
FilePond.create(input, FilePondRails.default_options)
|
63
|
+
}
|
64
|
+
}
|
65
|
+
|
66
|
+
export {
|
67
|
+
FilePond as FilePond,
|
68
|
+
FilePondRails as FilePondRails
|
69
|
+
}
|