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