Copy the following line to the head
of your site.
<script src="https://app.simplefileupload.com/buckets/UUID.js"></script>
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.
<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.
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.
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.
If the file is not an image, the file is accessible directly via the url.