CI NPM Version Maintainability Sponsor
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 |
Appends the template on target.
<div data-target></div> <form data-form enctype="multipart/form-data"> <input data-upload-field type="file"> <a data-upload-button href="javascript:void(0)">Select Image</a> </form>
new ActiveStoragePreview({ form: document.querySelector('[data-form]'), target: document.querySelector('[data-target]'), template: function(src, _id, _file) { return '<img src="' + src + '">' }, uploadButton: document.querySelector('[data-upload-button]'), uploadField: document.querySelector('[data-upload-field]'), }).create();
Change the src attribute of image ignoring the template content.
<div data-target> <img src="pixel.png"> </div> <form data-form enctype="multipart/form-data"> <input data-upload-field type="file"> <a data-upload-button href="javascript:void(0)">Select Image</a> </form>
new ActiveStoragePreview({ form: document.querySelector('[data-form]'), target: document.querySelector('[data-target]'), template: function(src, _id, _file) { return '<img src="' + src + '">' }, uploadButton: document.querySelector('[data-upload-button]'), uploadField: document.querySelector('[data-upload-field]'), }).create();
Ignores template and changes the property background-image of the style tag of the target. To enable it, you must set `attribute: 'style'.
<div data-target></div> <form data-form enctype="multipart/form-data"> <input data-upload-field type="file"> <a data-upload-button href="javascript:void(0)">Select Image</a> </form>
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();
When using multiple images, sets the target on a wrapper. Images will be appended. Do not forget the multiple attribute on field. :)
<div data-target></div> <form data-form enctype="multipart/form-data"> <input data-upload-field multiple="multiple" type="file"> <a data-upload-button href="javascript:void(0)">Select Images</a> </form>
new ActiveStoragePreview({ form: document.querySelector('[data-form]'), target: document.querySelector('[data-target]'), template: function(src, _id, _file) { return '<img src="' + src + '">' }, uploadButton: document.querySelector('[data-upload-button]'), uploadField: document.querySelector('[data-upload-field]'), }).create();