@ppci-mock/custom-image-upload

Image upload

Usage no npm install needed!

<script type="module">
  import ppciMockCustomImageUpload from 'https://cdn.skypack.dev/@ppci-mock/custom-image-upload';
</script>

README

Image Upload

Table of contents

  1. Installation
  2. Usage
  3. Properties
  4. Events

Installation

NPM

npm i @ppci-mock/custom-image-upload

// Polyfill: https://lit-element.polymer-project.org/guide/use#polyfills
npm i --save-dev @webcomponents/webcomponentsjs

Usage

Javascript

import '@ppci-mock/custom-image-upload'

Browser

<!-- Default -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/custom-image-upload/builds/index.min.js" />

<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci-mock/custom-image-upload/builds/legacy.min.js" />

<!-- Component -->
<custom-image-upload 
  multiple
  allowedExtensions="['.jpg', '.png']"
  maxFileSize="2000000"
  @change=${Function}
>
  <button>Upload Images</button>
</custom-image-upload>

Properties

Property Type Description Possible Values
*name* string Name of the input field. Which could be used in a form as field identifier. first name, surname, email, etc.
maxFileSize number The maximum file upload size in bytes. Default size 2000000.
multiple boolean Allow multiple file upload ```html ```
allowedExtensions string array Allowed extensions ```javascript ['.jpg', '.jpeg', '.png', '.gif'] ```

Events

Name Description Payload
@change on file change ```javascript [ { errors: [ '.jpg not allowed' ], file }, { errors: [], file } ] ```
@imagesLoaded Image data for all images is loaded from the filesystem and converted to base64 and stored into the dataUrl field. ```javascript [ { dataURL: 'data:image/jpeg;name=8b9625c2161d4304aa3ec7...', errors: [ '.jpg not allowed' ], file }, { dataURL: 'data:image/jpeg;name=8b9625c2161d4304aa3ec7...', errors: [], file } ] ```