Image Upload
Table of contents
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 } ] ``` |