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".
- store_path - The path to store the file at within the specified file store.
- store_location - The file is not copied by default. It remains in the original location. If you wish you have the file copied onto your own storage, you can specify where we should put the copy. The only value at the moment is "S3".
- 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