Add the javascript snippet to the head of your site and create a hidden input with the class of simple-file-upload.
Copy the following line to the head of your site.
<script src="https://app.simplefileupload.com/buckets/{{yourKey}}.js"></script>
Create a hidden input with class simple-file-upload
For example, to add an avatar to a model you can create a hidden input tag with the following syntax:
Simple File Upload
<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 uploaded file.
For example, if you have an html element of this structure:
<input type="hidden" id="user_avatar_url" name="user[avatar_url]" class="simple-file-upload">
After a file is uploaded the element will become:
<input type="hidden" id="user_avatar_url" name="user[avatar_url]" class="simple-file-upload"
value="https://subdomain.files-simplefileupload.com/randomstring/filename.png">
In order to reference this file elsewhere in the application, you need to save the value parameter to your database.
If the file is an image, you can view it using a standard image tag:
<%= image_tag current_user.avatar_url, height: 20, width: 20%>
If the file is not an image, the file is accessible directly via the url.
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 the 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.