Active Storage Preview


Simple Active Storage script with Direct Upload and Image Preview

Options

|Attribute |Default |Description |
|------------|---------|-------------------------------------------------|
|attribute |'src' |The attribute that will receive the image preview|
|form |undefined|The form that contain the file uplod field |
|target |undefined|The target for the image(s) |
|template |undefined|Callback used to build the preview element |
|uploadButton|undefined|The button to trigger the upload file selection |
|uploadField |undefined|The file field |

Usage

$3

#### With no image on page

Appends the template on target.

``html


Select Image

`

`js
new ActiveStoragePreview({
form: document.querySelector('[data-form]'),
target: document.querySelector('[data-target]'),
template: function(src, _id, _file) { return '' },
uploadButton: document.querySelector('[data-upload-button]'),
uploadField: document.querySelector('[data-upload-field]'),
}).create();
`

#### With image on page

Change the src attribute of image ignoring the template content.

`html


Select Image

`

`js
new ActiveStoragePreview({
form: document.querySelector('[data-form]'),
target: document.querySelector('[data-target]'),
template: function(src, _id, _file) { return '' },
uploadButton: document.querySelector('[data-upload-button]'),
uploadField: document.querySelector('[data-upload-field]'),
}).create();
`

#### When image is on background

Ignores template and changes the property background-image of the style tag of the target. To enable it, you must set attribute: 'style'.

``html


Select Image

`

`js
new ActiveStoragePreview({
attribute: 'style',
form: document.querySelector('[data-form]'),
target: document.querySelector('[data-target]'),
uploadButton: document.querySelector('[data-upload-button]'),
uploadField: document.querySelector('[data-upload-field]'),
}).create();
`

$3

When using multiple images, sets the target on a wrapper. Images will be appended. Do not forget the multiple attribute on field. :)

`html


Select Images

`

`js
new ActiveStoragePreview({
form: document.querySelector('[data-form]'),
target: document.querySelector('[data-target]'),
template: function(src, _id, _file) { return '' },
uploadButton: document.querySelector('[data-upload-button]'),
uploadField: document.querySelector('[data-upload-field]'),
}).create();
``