❤
npm
Sign UpSign In

active_storage_preview

0.1.0 • Public • Published

Active Storage Preview

Build Status NPM Version Dependency Dev Dependency Code Climate Support

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

Readme

Keywords

Package Sidebar

Install

npm i active_storage_preview

Repository

github.com/wbotelhos/active_storage_preview

Homepage

github.com/wbotelhos/active_storage_preview

Weekly Downloads

27

Version

0.1.0

License

MIT

Unpacked Size

27 kB

Total Files

17

Last publish

Collaborators

  • wbotelhos
Try on RunKit
Report malware