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
      • Working with Django
      • Background Jobs in Python
    • Java
      • Working with Maven
      • Java Database Operations
      • Working with the Play Framework
      • Working with Spring Boot
      • Java Advanced Topics
    • PHP
    • Go
      • Go Dependency Management
    • Scala
    • Clojure
  • Databases & Data Management
    • Heroku Postgres
      • Postgres Basics
      • Postgres Performance
      • Postgres Data Transfer & Preservation
      • Postgres Availability
      • Postgres Special Topics
    • Heroku 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)
    • 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
  • Add-ons
  • All Add-ons
  • Simple File Upload
Simple File Upload

This add-on is operated by Bitmapped Designs LLC

The fastest way to add file uploads to your Heroku Application

Simple File Upload

Last updated January 19, 2021

Table of Contents

  • Provisioning the add-on
  • View your dashboard
  • Add javascript
  • Add a hidden input with class simple-file-upload
  • Save the URL
  • Security
  • Migrating between plans
  • Removing the add-on
  • Support

Simple File Upload is an add-on for providing direct image and file uploading to the cloud.

Adding direct uploads to an application allows you to offload the storage of static files from your app. This is crucial on Heroku, because your app’s dynos have an ephemeral filesystem. This means that all files that aren’t part of your application’s slug are lost whenever a dyno restarts or is replaced (this happens at least once daily).

Simple File Upload uses direct uploads. In a direct upload, a file is uploaded to S3 from a user’s browser, without first passing through your app. This method is recommended by Heroku Dev Center here. Simple File Upload handles all of the direct upload processing for you. You do not need a cloud storage account. Simple File Upload provides a dropzone UI, allows your users to drop images or select images from a local filesystem, and returns a url of the image behind a CDN.

Provisioning the add-on

Simple File Upload can be attached to a Heroku application via the CLI:

A list of all plans available can be found here.

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

After you provision Simple File Upload, the SIMPLE_FILE_UPLOAD_KEY config var is available in your app’s configuration. It contains the API key you will need to access the service. You can confirm this via the heroku config:get command:

$ heroku config:get SIMPLE_FILE_UPLOAD_KEY
"arandomapikey1234"

After you install Simple File Upload, your application will be configured to fully integrate with the add-on. The easiest way to get started is to access the Dashboard for customized instructions.

View your dashboard

The Simple File Upload dashboard allows you to access your exact script tag and see your current usage.

You can access the dashboard via the CLI:

$ heroku addons:open simple-file-upload
Opening simple-file-upload for sharp-mountain-4005

or by visiting the Heroku Dashboard and selecting the application in question. Select Simple File Upload from the Add-ons menu.

Add javascript

Add the javascript to the head of your site.

<script src="https://app.simplefileupload.com/buckets/[your API key here].js"></script>

Using React

Additionally, there is a React component for Simple File Upload called react-simple-file-upload. You can install it with npm or yarn:

npm install react-simple-file-upload

Add a hidden input with class simple-file-upload

Add a hidden input to your form with the class simple-file-upload. The add-on will attach to this hidden input, and return the value of the dropped file in the value parameter of the hidden input. This is the preferred method of implementation. It provides a better user experience, and allows the existing file to be previewed in the drop box UI. If no class of simple-file-upload is found, the widget will attach to existing form inputs of type file, described below.

Add a form input

Alternatively you can chose to have the widget attach to all existing form inputs of type file. This implementation replaces the file field html with a hidden input, so the value parameter doesn’t persist between requests. The add-on works by attaching to a form input element and modifying its behavior and attributes.

HTML

To add a hidden html input:

<input type="hidden" name="avatar_url" id="avatar_url" class="simple-file-upload">

The uploader works by populating the value parameter of the hidden input with the url of the dropped file.

<input type="hidden" id="avatar_url" name="avatar_url" class="simple-file-upload" value="https://files.simplefileupload.com/randomstring/filename.png">

Ruby on Rails form helpers

If you are using Ruby on Rails with a model backed form as below:

 <%= form_with model: @user do |form| %>

Add the hidden field with a class of simple-file-upload

<%= form.hidden_field :avatar_url, class: "simple-file-upload" %>

This will automatically create the html element

<input type="file" name="user[avatar_url]" id="user_avatar_url" class="simple-file-upload">

If you are using Ruby on Rails without a model backed form you can use a hidden_field_tag helper:

<%= hidden_field_tag "avatar_url" class="simple-file-upload" %>

which becomes the html element

 <input type="file" name="avatar_url" id="avatar_url" class="simple-file-upload">

React

Once installed, you can import and use the package. Once uploaded, the file will be available in the onSuccess handler.

import { SimpleFileUpload } from 'react-simple-file-upload'

  <SimpleFileUpload
    apiKey="..."
    onSuccess={handleFile}
  />

  function handleFile(url){
    console.log('The URL of the file is ' + url)
  }

Save the URL

Once your user drops a file, the file is immediately uploaded. The hidden input with class simple-file-upload‘s value is populated with the URL of the file.

Security

The files stored with Simple File Upload are publicly available to anyone with the URL. Security is provided through obscurity. Each file url includes a unique key, which makes guessing the URL challenging.

Migrating between plans

Use the heroku add-ons:upgrade command to migrate to a new plan.

$ heroku add-ons:upgrade simple-file-upload:newplan
-----> Upgrading simple-file-upload:newplan to sharp-mountain-4005... done, v18 ($49/mo)
       Your plan has been updated to: simple-file-upload:newplan

Removing the add-on

You can remove Simple File Upload via the CLI:

This will destroy all associated data and cannot be undone! Download all your files before destroying the add on!

$ heroku add-ons:destroy simple-file-upload
-----> Removing simple-file-upload from sharp-mountain-4005... done, v20 (free)

Before removing Simple File Upload, you can export your data by downloading all files stored with Simple File Upload and storing them elsewhere.

Support

All Simple File Upload support and runtime issues should be submitted via one of the Heroku Support channels. Any non-support related issues or product feedback is welcome at support@simplefileupload.com.

Keep reading

  • All Add-ons

Feedback

Log in to submit feedback.

Ziggeo Snyk

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