@ppci-mock/custom-file-upload

File Upload

Table of contents

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

Installation

NPM

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

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

Usage

Javascript

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

Browser

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

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

<!-- Component -->
<custom-file-upload 
  accept="* | image/* | audio/* | video/* "
  multiple
  allowedExtensions="['.jpg', '.png']"
  maxFileSize="2000000"
  @change=${Function}
>
  <button>Upload File</button>
</custom-file-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.
accept	string	The accept attribute specifies a filter for what file types the user can pick from the file input dialog box.	- * - image/* - video/* - audio/* - media_type (A valid media type, with no parameters. Look at IANA Media Types for a complete list of standard media types) - file_extension Specify the file extension(s) (e.g: .gif, .jpg, .png, .doc) the user can pick from
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 [ // file 1 { errors: [ '.jpg not allowed' ], // JS file object file }, // file 2 { errors: [], // JS file object file } ] ```