Deep-dive on the Next Gen Platform. Join the Webinar!

Skip Navigation
Show nav
Dev Center
  • Get Started
  • Documentation
  • Changelog
  • Search
  • Get Started
    • Node.js
    • Ruby on Rails
    • Ruby
    • Python
    • Java
    • PHP
    • Go
    • Scala
    • Clojure
    • .NET
  • 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
Hide categories

Categories

  • Heroku Architecture
    • Compute (Dynos)
      • Dyno Management
      • Dyno Concepts
      • Dyno Behavior
      • Dyno Reference
      • Dyno Troubleshooting
    • Stacks (operating system images)
    • Networking & DNS
    • Platform Policies
    • Platform Principles
  • Developer Tools
    • Command Line
    • Heroku VS Code Extension
  • Deployment
    • Deploying with Git
    • Deploying with Docker
    • Deployment Integrations
  • Continuous Delivery & Integration (Heroku Flow)
    • Continuous Integration
  • Language Support
    • Node.js
      • Working with Node.js
      • Troubleshooting Node.js Apps
      • Node.js Behavior in Heroku
    • Ruby
      • Rails Support
      • Working with Bundler
      • Working with Ruby
      • Ruby Behavior in Heroku
      • Troubleshooting Ruby Apps
    • Python
      • Working with Python
      • Background Jobs in Python
      • Python Behavior in Heroku
      • Working with Django
    • Java
      • Java Behavior in Heroku
      • Working with Java
      • Working with Maven
      • Working with Spring Boot
      • Troubleshooting Java Apps
    • PHP
      • PHP Behavior in Heroku
      • Working with PHP
    • Go
      • Go Dependency Management
    • Scala
    • Clojure
    • .NET
      • Working with .NET
  • Databases & Data Management
    • Heroku Postgres
      • Postgres Basics
      • Postgres Getting Started
      • Postgres Performance
      • Postgres Data Transfer & Preservation
      • Postgres Availability
      • Postgres Special Topics
      • Migrating to Heroku Postgres
    • Heroku Key-Value Store
    • Apache Kafka on Heroku
    • Other Data Stores
  • AI
    • Working with AI
  • Monitoring & Metrics
    • Logging
  • App Performance
  • Add-ons
    • All Add-ons
  • Collaboration
  • Security
    • App Security
    • Identities & Authentication
      • Single Sign-on (SSO)
    • Private Spaces
      • Infrastructure Networking
    • Compliance
  • Heroku Enterprise
    • Enterprise Accounts
    • Enterprise Teams
    • Heroku Connect (Salesforce sync)
      • Heroku Connect Administration
      • Heroku Connect Reference
      • Heroku Connect Troubleshooting
  • 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
  • Simple File Upload
Simple File Upload

This add-on is operated by Bitmapped Designs LLC

Image uploading and resizing with a prebuilt S3 setup. Free cloud storage.

Simple File Upload

Last updated July 17, 2022

Table of Contents

  • Full Documentation
  • What is Simple File Upload?
  • How Does Simple File Upload Work?
  • Provisioning the add-on
  • View your dashboard
  • Add javascript
  • Add a hidden input with class simple-file-upload
  • Save the URL
  • Migrating between plans
  • Removing the add-on
  • Support

Full Documentation

This documentation is a high-level summary of the add-on, Simple File Upload. Please see the full documentation for more information.

What is Simple File Upload?

Do you need to allow your users to upload photos to your application? What about forms? Resumes? No problem. Simple File Upload is the easiest way to allow users to add files to your app. We handle all of the tooling surrounding file uploading for you. No cloud storage account needed.

How Does Simple File Upload Work?

Simple File Upload replaces a hidden input tag that you create with an upload widget. When your user adds a file, it is uploaded to the cloud and a URL that links to that file is returned.

Simple File Upload is specifically designed to work with Heroku’s ephemeral filesystem. How do we do this? We use direct uploads. Files are uploaded directly to the cloud from your user’s browser, without passing through your application.

Adding direct uploads to your app 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 app’s slug are lost whenever a dyno restarts or is replaced (this happens at least once a day).

Uploaded files are served to your app behind a CDN for blazing fast performance. You can optionally use our resize API to dynamically serve the files at any size, any time.

We also provide a responsive upload widget that looks good by default or can be customized to integrate seamlessly with your existing UI.

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 ($35/month)

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. A javascript event of FileUploadSuccess will also be fired. Javascript event documentation.

HTML

To add a hidden html input:

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

The uploader populates the value parameter of the hidden input with the url of the dropped file and emits a javascript event. You can submit the form to your server and save the URL server side, or capture the file details by listening for the javascript event.

<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 and a javascript event is fired.

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 ($35/month)

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

Support

While we try to make it easy, web applications are complicated.

Questions about direct uploads, file storage, or need more help adding the upload widget? We’re happy to help with any request! Please feel free to email us at support@simplefileupload.com.

Or book a time to talk with an uploading Engineer and get your questions answered.
Book A Time

Keep reading

  • All Add-ons

Feedback

Log in to submit feedback.

Zara 4 SolarWinds AppOptics

Information & Support

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

Language Reference

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

Other Resources

  • Careers
  • Elements
  • Products
  • Pricing
  • RSS
    • Dev Center Articles
    • Dev Center Changelog
    • Heroku Blog
    • Heroku News Blog
    • Heroku Engineering Blog
  • Twitter
    • Dev Center Articles
    • Dev Center Changelog
    • Heroku
    • Heroku Status
  • Github
  • LinkedIn
  • © 2025 Salesforce, Inc. All rights reserved. Various trademarks held by their respective owners. Salesforce Tower, 415 Mission Street, 3rd Floor, San Francisco, CA 94105, United States
  • heroku.com
  • Legal
  • Terms of Service
  • Privacy Information
  • Responsible Disclosure
  • Trust
  • Contact
  • Cookie Preferences
  • Your Privacy Choices