Simple Active Storage script with Direct Upload and Image Preview
npm install active_storage_preview





Simple Active Storage script with Direct Upload and Image Preview
|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 |
#### With no image on page
Appends the template on target.
``html
`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

``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
`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
``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();
``