filepond-rails 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 1d4db40f90628c511fd73a636ce3c513fd01d9db16249bf99ceb5966ea9c4469
+  data.tar.gz: ff09c1019e75f8c9aaa002397e8b797f88848e94ea4ce4deee80eaa7f6125050
+SHA512:
+  metadata.gz: b57aa9177e77918141ec1bfd2fc694f7d5ace8d37c00d7f46c6637d981f3280e6196b65447042d981f480ae825fa89323ee1fbe19b28d7e6a15804fcffec64bb
+  data.tar.gz: 135ff06a64a2c6135d524644e5597a68416f2bd3ba1a824d8e8e9ebcbf96f1d51ecf633d1c2d7f32d1ee2031d925692e7a1d40592fa766f00acdd4eab61d0677

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2022 Simon Chiu
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,81 @@
+# filepond-rails
+
+This gem allows you to quickly integrate [FilePond](https://github.com/pqina/filepond) with your Ruby on Rails app.
+
+## Requirements
+* Rails 7.0.x and above
+* Use of [importmap-rails](https://github.com/rails/importmap-rails) (optional)
+
+## Installation
+Add this line to your application's Gemfile:
+
+```ruby
+gem "filepond-rails"
+```
+
+And then execute:
+```bash
+$ bundle
+```
+
+Or install it yourself as:
+```bash
+$ gem install filepond-rails
+```
+
+Add the following to your `application.css`:
+```css
+*= require 'filepond'
+```
+
+Add `javascript_importmap_tags` in the `head` section of your layout:
+```erb
+<%= javascript_importmap_tags %>
+```
+
+Mount `filepond-rails` routes:
+```ruby
+Rails.application.routes.draw do
+  mount Filepond::Rails::Engine, at: '/filepond'
+end
+```
+
+Note: You must mount the routes at `/filepond`.
+
+## Usage
+
+This gem compromises of two parts:
+1. An ingress controller for the FilePond `fetch` and `remove` server calls. The JavaScript code leverages Active Storage's existing direct upload endpoint.
+2. JavaScript ESM module to automatically connect configured elements with the above endpoints.
+
+At the present moment, the above parts are designed (and assumed) to work together.
+
+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:
+
+```erb
+<%= form_with model: @user, url: update_avatar_path, method: :post do |f| %>
+  <%= f.label :avatar, 'Update your avatar' %>
+  <%= f.file_field :avatar, class: 'filepond', direct_upload: true %>
+  <%= f.button 'Update' %>
+<% end %>
+```
+
+You can instantiate the `file_field` component like so:
+
+```js
+// app/javascript/application.js
+import { FilePondRails, FilePond } from 'filepond-rails'
+
+window.FilePond = FilePond
+window.FilePondRails = FilePondRails
+
+const input = document.querySelector('.filepond')
+FilePondRails.create(input)
+```
+
+The gem's JavaScript provide two available exports:
+1. `FilePond` (which corresponds to the original FilePond library)
+2. `FilePondRails` (which is a convenience helper that integrates and sets up FilePond to work with our `FilePond::Rails::IngressController`
+
+## License
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,8 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"

data/app/assets/config/filepond_rails_manifest.js

@@ -0,0 +1 @@
+// = link_directory ../javascripts .js

data/app/assets/javascripts/filepond-rails.js

@@ -0,0 +1,69 @@
+import { DirectUpload } from '@rails/activestorage'
+import * as FilePond from 'filepond'
+
+let FilePondRails = {
+  directUploadUrl: null,
+  input: null,
+  default_options: {
+    server: {
+      process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
+        const uploader = new DirectUpload(file, FilePondRails.directUploadUrl, {
+          directUploadWillStoreFileWithXHR: (request) => {
+            request.upload.addEventListener(
+              'progress',
+              event => progress(event.lengthComputable, event.loaded, event.total)
+            )
+          }
+        })
+        uploader.create((errorResponse, blob) => {
+          if (errorResponse) {
+            error(`Something went wrong: ${errorResponse}`)
+          } else {
+            const hiddenField = document.createElement('input')
+            hiddenField.setAttribute('type', 'hidden')
+            hiddenField.setAttribute('value', blob.signed_id)
+            hiddenField.name = FilePondRails.input.name
+            document.querySelector('form').appendChild(hiddenField)
+            load(blob.signed_id)
+          }
+        })
+
+        return {
+          abort: () => abort()
+        }
+      },
+      fetch: {
+        url: './filepond/active_storage/fetch',
+        method: 'POST',
+        onload: (response) => {
+          console.log(response)
+          return response
+        },
+        ondata: (response) => {
+          console.log(response)
+          return response
+        }
+      },
+      revert: {
+        url: './filepond/active_storage/remove'
+      },
+      headers: {
+        'X-CSRF-Token': document.head.querySelector("[name='csrf-token']").content
+      }
+    }
+  },
+
+  // Convenience method to initialize FilePond based on the way this gem expects things to work
+  create: function(input) {
+    FilePondRails.directUploadUrl = input.dataset.directUploadUrl
+    FilePondRails.input = input
+
+    // Initialize FilePond on our element
+    FilePond.create(input, FilePondRails.default_options)
+  }
+}
+
+export {
+  FilePond as FilePond,
+  FilePondRails as FilePondRails
+}