Skip Navigation
Show nav
Heroku Dev Center
  • Get Started
  • Documentation
  • Changelog
  • Search
  • Get Started
    • Node.js
    • Ruby on Rails
    • Ruby
    • Python
    • Java
    • PHP
    • Go
    • Scala
    • Clojure
  • Documentation
  • Changelog
  • More
    Additional Resources
    • Home
    • Elements
    • Products
    • Pricing
    • Careers
    • Help
    • Status
    • Events
    • Podcasts
    • Compliance Center
    Heroku Blog

    Heroku Blog

    Find out what's new with Heroku on our blog.

    Visit Blog
  • Log inorSign up
View categories

Categories

  • Heroku Architecture
    • Dynos (app containers)
    • Stacks (operating system images)
    • Networking & DNS
    • Platform Policies
    • Platform Principles
  • Command Line
  • Deployment
    • Deploying with Git
    • Deploying with Docker
    • Deployment Integrations
  • Continuous Delivery
    • Continuous Integration
  • Language Support
    • Node.js
    • Ruby
      • Working with Bundler
      • Rails Support
    • Python
      • Background Jobs in Python
      • Working with Django
    • Java
      • Working with Maven
      • Java Database Operations
      • Java Advanced Topics
      • Working with Spring Boot
    • PHP
    • Go
      • Go Dependency Management
    • Scala
    • Clojure
  • Databases & Data Management
    • Heroku Postgres
      • Postgres Basics
      • Postgres Getting Started
      • Postgres Performance
      • Postgres Data Transfer & Preservation
      • Postgres Availability
      • Postgres Special Topics
    • Heroku Data For Redis
    • Apache Kafka on Heroku
    • Other Data Stores
  • Monitoring & Metrics
    • Logging
  • App Performance
  • Add-ons
    • All Add-ons
  • Collaboration
  • Security
    • App Security
    • Identities & Authentication
    • Compliance
  • Heroku Enterprise
    • Private Spaces
      • Infrastructure Networking
    • Enterprise Accounts
    • Enterprise Teams
    • Heroku Connect (Salesforce sync)
      • Heroku Connect Administration
      • Heroku Connect Reference
      • Heroku Connect Troubleshooting
    • Single Sign-on (SSO)
  • Patterns & Best Practices
  • Extending Heroku
    • Platform API
    • App Webhooks
    • Heroku Labs
    • Building Add-ons
      • Add-on Development Tasks
      • Add-on APIs
      • Add-on Guidelines & Requirements
    • Building CLI Plugins
    • Developing Buildpacks
    • Dev Center
  • Accounts & Billing
  • Troubleshooting & Support
  • Integrating with Salesforce
  • Add-ons
  • All Add-ons
  • Filestack
Filestack

This add-on is operated by Filestack

The complete file infrastructure for websites and mobile apps.

Filestack

Last updated February 03, 2016

Table of Contents

  • Provisioning the add-on
  • Local setup
  • Using with Rails
  • Dashboard
  • Removing the add-on
  • Support
  • Additional resources

The Filepicker provides file uploading and content management for developers as an add-on for Heroku.

The Filepicker excels any time you want to add uploading or cloud file integration into your application. Worried about running into the Heroku 30-second-timeout with big files? No worries, we can handle files upward of 100GB. Need to store them on S3? Done, no questions asked.

Even better, Filepicker provides:

  • Integration with 19 content providers, so your users can pull in content directly from the cloud, increasing their engagement in your application. No wrestling with APIs required - one line of code and your app is set up with Dropbox, Facebook Photos, Google Drive, Instagram, and many more.
  • Powerful image processing functionality, so you can take uploads from the user and crop them to a 128x128 profile pictured centered around their face, for example
  • Stellar performance, streaming large files in parallel at speeds 4-10 times faster than basic flash uploaders

The Filepicker is accessible via our filepicker.js API as well as SDKs for iOS and Android.

Provisioning the add-on

Filepicker can be attached to a Heroku application via the CLI:

A list of all plans available can be found here.

$ heroku addons:create filepicker
-----> Adding filepicker to sharp-mountain-4005... done, v18 (free)

Once the Filepicker has been added, two additional config variables will be set up:

  • FILEPICKER_APP_KEY: Your Filepicker api key, used to perform uploads and other actions against the Filepicker.io API.
  • FILEPICKER_APP_SECRET: Your Filepicker secret key, used for signing policies as part of the Filepicker security scheme.

This can be confirmed using the heroku config:get command.

$ heroku config:get FILEPICKER_API_KEY
KJsdf8KSDFjksdf
$ heroku config:get FILEPICKER_API_SECRET
ZXJM897LJ9752de

After installing Filepicker your application should be good-to-go to start utilizing the capabilities of the Filepicker

Local setup

Environment setup

After provisioning the add-on, you’ll want to copy the config vars to your local development environment so you can make the same calls using Filepicker

Though less portable it’s also possible to set local environment variables using export FILEPICKER_API_KEY=value.

Use the Heroku Local command-line tool to configure, run and manage process types specified in your app’s Procfile. Heroku Local reads configuration variables from a .env file. To view all of your app’s config vars, type heroku config. Use the following command to add the FILEPICKER_API_KEY and FILEPICKER_API_SECRET values retrieved from heroku config to your .env file.

$ heroku config -s | grep FILEPICKER >> .env
$ more .env

Credentials and other sensitive configuration values (like your Filepicker credentials!) should not be committed to source-control. In Git exclude the .env file with: echo .env >> .gitignore.

For more information, see the Heroku Local article.

Using with Rails

Ruby on Rails applications will need to add the following entry into their Gemfile specifying the filepicker-rails client library.

gem 'filepicker-rails'

Update application dependencies with bundler.

$ bundle install

In config/application.rb, set

config.filepicker_rails.api_key = ENV['FILEPICKER_API_KEY']

Deploy changes

Deploy the filepicker configuration to Heroku:

$ git add .
$ git commit -a -m "Adding filepicker-rails config"
$ git push heroku master
...
-----> Heroku receiving push
-----> Launching... done, v3
       http://warm-frost-1289.herokuapp.com deployed to Heroku
 To git@heroku.com:warm-frost-1289.git
 * [new branch]      master -> master

Integrate the JavaScript library into your layout

For all the pages where you want to integrate the Filepicker functionality, add the following code to your layout:

    <%= filepicker_js_include_tag %>

Adding an upload field to your form

One of the most common uses of the Filepicker is to upload files to your application. The filepicker-rails gem simplifies this process, storing the file on S3 and attaching a url to your model for later retrieval

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

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

Displaying the image

In the example above the user uploaded an image. If you then want to display that image in the page, cropped to 160x160 pixels, you can take advantage of the Filepicker image process capabilities like so:

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

Dashboard

For more information on the features available within the Filepicker dashboard please see the docs at www.filepicker.com/documentation/.

The Ink dashboard allows you to add your S3 credentials and configure security, as well as monitor your usage and see how users are working with your application

The dashboard can be accessed via the CLI:

$ heroku addons:open filepicker
Opening filepicker for sharp-mountain-4005…

or by visiting the Heroku Dashboard and selecting the application in question. Select Ink file picker from the Add-ons menu.

Removing the add-on

The Ink file picker can be removed via the CLI.

This will destroy all associated data and cannot be undone!

$ heroku addons:destroy filepicker
-----> Removing filepicker from sharp-mountain-4005... done, v20 (free)

Before removing Ink a data export can be performed by visiting your developer console and exporting any uploaded files. Contact contact@filepicker.io for assistance.

Support

All Ink file picker support and runtime issues should be submitted via on of the Heroku Support channels. Any non-support related issues or product feedback is welcome at Stack Overflow via the ink-file-picker tag or via email at contact@filepicker.io

Additional resources

Additional resources are available at:

  • Filepicker Documentation
  • Sample code and Demos

Keep reading

  • All Add-ons

Feedback

Log in to submit feedback.

Ziggeo FileTurn

Information & Support

  • Getting Started
  • Documentation
  • Changelog
  • Compliance Center
  • Training & Education
  • Blog
  • Podcasts
  • Support Channels
  • Status

Language Reference

  • Node.js
  • Ruby
  • Java
  • PHP
  • Python
  • Go
  • Scala
  • Clojure

Other Resources

  • Careers
  • Elements
  • Products
  • Pricing

Subscribe to our monthly newsletter

Your email address:

  • RSS
    • Dev Center Articles
    • Dev Center Changelog
    • Heroku Blog
    • Heroku News Blog
    • Heroku Engineering Blog
  • Heroku Podcasts
  • Twitter
    • Dev Center Articles
    • Dev Center Changelog
    • Heroku
    • Heroku Status
  • Facebook
  • Instagram
  • Github
  • LinkedIn
  • YouTube
Heroku is acompany

 © Salesforce.com

  • heroku.com
  • Terms of Service
  • Privacy
  • Cookies
  • Cookie Preferences