active_storage_preview

Active Storage 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)
uploadButton	undefined	The button to trigger the upload file selection
uploadField	undefined	The file field

Usage

For Image

When using single image, sets the target directly on image. Image will receive the src.

<img data-target>

<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]'),
  uploadButton: document.querySelector('[data-upload-button]'),
  uploadField:  document.querySelector('[data-upload-field]'),
}).create();

For Image used on background

When using single image on background, like cover, sets the target directly on image. Image will receive the background-image. You must set attribute option as style.

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

For Images

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 Image</a>
</form>

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