Adds form, image_tag, and download/save helpers to help you get up and running with filepicker.io in Rails.

Add this line to your application's Gemfile:

gem 'filepicker-rails'

And then execute:

$ bundle

Or install it yourself as:

$ gem install filepicker-rails

Add the filepicker.io javascript library to your layout:

<%= filepicker_js_include_tag %>

Set your API Key in config/application.rb:

config.filepicker_rails.api_key = "Your filepicker.io API Key"

Run the Rails migration generator from the command line:

$ rails g migration AddNameOfAttrForFilepickerUrlToUser

Then add a column to the model's table of type :string:

class AddNameOfAttrForFilepickerUrlToUser < ActiveRecord::Migration
  def up
    add_column :user, :filepicker_url, :string
  end

  def down
    remove_column :user, :filepicker_url
  end
end

<%= form_for @user do |f| %>
  <div>
    <%= f.label :filepicker_url, "Upload Your Avatar:" %>
    <%= f.filepicker_field :filepicker_url %> <!-- User#filepicker_url is a regular string column -->
  </div>

  <%= f.submit %>
<% end %>

Full options list:

• button_text - The text of the upload button.
• button_class - The class of the upload button.
• extensions - The extensions of file types you want to support for this upload. Ex: ".png,.jpg".
• mimetypes - The file types you want to support for this upload. Ex: "image/png,text/*".
• container - Where to show the file picker dialog can be "modal", "window" or the of an iframe on the page.
• multiple - (true or false) Whether or not multiple uploads can be saved at once.
• services - What services your users can upload to. Ex: "BOX, COMPUTER, FACEBOOK".
• dragdrop - (true or false) Whether or not to allow drag-and-drop uploads.
• drag_text - The text of the dragdrop pane.
• drag_class - The class of the dragdrop pane.
• onchange - The onchange event.

When the dialog finishes uploading the file, the javascript code in the onchange field will be run with a special 'event' variable. The variable has a fpfiles (or if not multiple, also fpfile) attribute with information about the files (jQuery users: look under event.originalEvent).

Example fpfiles object:

[{
    url: 'https://...',
    data: {
        filename: 'filename.txt',
        size: 100,
        type: 'text/plain'
    }
},{
    url: 'https://...',
    data: {
        filename: 'filename2.jpg',
        size: 9000,
        type: 'image/jpeg'
    }
}]

<%= filepicker_image_tag @user.filepicker_url, w: 160, h: 160, fit: 'clip' %>

See the filepicker.io documentation for the full options list.

<%= filepicker_save_button "Save", @user.filepicker_url, "image/jpg" %>

Full options list:

• container - Where to show the file picker dialog can be "modal", "window" or the of an iframe on the page.
• services - What services your users can upload to. Ex: "BOX, COMPUTER, FACEBOOK".
• save_as_name - A recommended file name. The user can override this.

See a simple demo app repo