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.

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

With image on page

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

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'.

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

Multiple Uploads

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