https://github.com/wbotelhos/active_storage_preview
:camera: Simple Active Storage script with Direct Upload and Image Preview
https://github.com/wbotelhos/active_storage_preview
active-storage activestorage direct-upload preview
Last synced: 8 months ago
JSON representation
:camera: Simple Active Storage script with Direct Upload and Image Preview
- Host: GitHub
- URL: https://github.com/wbotelhos/active_storage_preview
- Owner: wbotelhos
- License: mit
- Created: 2020-08-11T01:52:37.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-11-12T00:31:31.000Z (over 5 years ago)
- Last Synced: 2025-03-26T08:37:14.531Z (about 1 year ago)
- Topics: active-storage, activestorage, direct-upload, preview
- Language: JavaScript
- Homepage: https://www.danca.com
- Size: 66.4 KB
- Stars: 11
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Active Storage Preview
[](https://github.com/wbotelhos/active_storage_preview/actions)
[](https://badge.fury.io/js/active_storage_preview)
[](https://codeclimate.com/github/wbotelhos/active_storage_preview)
[](https://www.patreon.com/wbotelhos)
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.
```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();
```
### Multiple Uploads
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();
```