Simple File Upload

Page Header

Customizing The Uploader

You can change almost everything about the uploader's appearance. You can change the icon, the text color, the border color, and the background color.

File Previews

You can change whether or not the uploader shows the file preview after the file is dropped. This is enabled by default. To disable this set preview: false on the input tag:

Javascript Snippet

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

React

<SimpleFileUpload
    apiKey="YOURAPIKEY"
    preview="false"
    onSuccess={setFile}
/>

Size

You can change the size of the uploader using the width and height parameter.

Javascript Snippet

<input class="simple-file-upload" data-width="50" data-height="50"
type="hidden" value="" name="user[avatar_url]" id="user_avatar_url">

React

  <SimpleFileUpload
    apiKey="YOURAPIKEY"
    width="300"
    height="300"
    onSuccess={setFile}
  >