@ppci/custom-image-upload

1.3.1 • Public • Published

Image Upload

Table of contents

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

Installation

NPM

npm i @ppci/custom-image-upload

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

Usage

Javascript

import '@ppci/custom-image-upload'

Browser

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

<!-- Legacy -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@ppci/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 } ] ```

Readme

Keywords

Package Sidebar

Install

npm i @ppci/custom-image-upload

Weekly Downloads

0

Version

1.3.1

License

ISC

Unpacked Size

1.72 MB

Total Files

27

Last publish

Collaborators

  • fsevenhuysen
  • nazim.mohammed
  • gaalman
  • borai
  • franksevenhuysen