All Uploader options are set via a data-attribute
on the hidden input tag.
For example, to create a square Uploader with width="300"
, height="300"
, that accepts only image files, the hidden input would look something like this:
< input class="simple-file-upload" data-width="300" data-height="300" data-accepted="image/*" type="hidden" name="user[avatar_url]" id="user_avatar_url" />
Data-Attribute | Function | Accepted Values | Documentation | |
---|---|---|---|---|
data-width | Sets the width of the uploader on your page | String | Customize | |
data-height | Sets the height of the uploader on your page | String | Customize | |
data-resize-width | Cropped width of image before upload | String | Resize | |
data-resize-height | Cropped height of image before upload | String | Resize | |
data-resize-method | How the image is resized | "contain" or "crop" (defaults to contain) | Resize | |
data-maxFileSize | The maximum file size the user can upload | String (in mB) | File Acceptance | |
data-accepted | The type of files the user can upload | String | File Acceptance | |
data-tag | A tag to organize files | String (case sensitive) | Tagging Files | |
data-preview | Whether or not to show a preview image after upload | "true" or "false" (defaults to true) | File Previews |
If data-multiple="true"
, a button will replace the hidden input and the uploader will open in a modal. All of the below attributes apply to this configuration.
Data-Attribute | Function | Accepted Values | Documentation | |
---|---|---|---|---|
data-multiple | Allows for multiple file uploading | "true" or "false" | Multiple File Uploading | |
data-maxFileSize | The maximum file size the user can upload | String (in mB) | File Acceptance | |
data-accepted | The type of files the user can upload | String | File Acceptance | |
data-tag | A tag to organize files | String (case sensitive) | Tagging Files | |
data-button-text | Change the button text | String (defaults to "Add Files") | Multiple File Uploading | |
data-max-files | Maximum number of files that can be uploaded | Integer or String value (defaults to 20) | Multiple File Uploading | |
data-remove-links | Whether or not to include remove links on files | "true" or "false" | Multiple File Uploading |