Simple File Upload

Getting Started

1. Add the javascript snippet

Copy the following line to the head of your site.

<script src="https://app.simplefileupload.com/buckets/{{yourKey}}.js"></script>

2. Create a hidden input

Create a hidden input with class simple-file-upload.

The html snippets on this page will use the example of adding an avatar to a model. An example input tag is shown below. Replace the name and id with whatever you want.

HTML

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

3. Save the returned URL to your database

The uploader works by populating the value parameter of the hidden input with the url of the uploaded file.
The uploader also emits a javascript event if you'd like to handle everything client side. See javascript events for more information on events.

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.

4. View or download the user uploaded file

If the file is an image, you can view it using a standard image tag:

<img src="the-returned-url"/>

You can dynamically size this image using our fast and robust resizing API. See the resizing page for more information.