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
Single Upload
With no image on page
Appends the template on target.
Select Image
form: document target: document { return '<img src="' + src + '">' } uploadButton: document uploadField: document;
With image on page
Change the src
attribute of image ignoring the template content.
Select Image
form: document target: document { return '<img src="' + src + '">' } uploadButton: document uploadField: document;
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'.
Select Image
attribute: 'style' form: document target: document uploadButton: document uploadField: document;
Multiple Uploads
When using multiple images, sets the target on a wrapper. Images will be appended. Do not forget the multiple
attribute on field. :)
Select Images
form: document target: document { return '<img src="' + src + '">' } uploadButton: document uploadField: document;