af-image-uploader

AppFeel Image Uploader WebComponent[![License][license]][npm-url] [![NPM version][npm-version]][npm-url] [![NPM downloads][npm-downloads]][npm-url] [![Built With Stencil][stencil]][stencil-url] ==========================

Usage no npm install needed!

<script type="module">
  import afImageUploader from 'https://cdn.skypack.dev/af-image-uploader';
</script>

README

AppFeel Image Uploader WebComponent
License NPM version NPM downloads Built With Stencil

This web component implements a drag and drop component to upload and preview images. Example of use:

<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
    <title>AppFeel Image Uploader WebComponent</title>
    <script src='https://unpkg.com/af-image-uploader@latest/dist/af-image-uploader.js'></script>

</head>

<body>

    <af-image-uploader id="imageUploader" width="300px" height="100px" onchange="onChange(event)" onload="onLoad(event)"></af-image-uploader>
    <button onclick="reset()">Reset</button>
    <button onclick="getFile()">Get File</button>
</body>
<script>
    const imageUploader = document.getElementById('imageUploader');
    function reset() {
        imageUploader.reset();
    }
    function onChange(image) {
        console.log('Image selected', image.detail);
    }
    function onLoad(image) {
        console.log('Image preview completed', image.detail);
    }
    async function getFile() {
        console.log('Selected image', await imageUploader.getFile());
    }
</script>
</html>

Properties

Property Attribute Description Type Default
activeColor active-color The color when it is active string 'green'
baseColor base-color The default color string '#ccc'
height height Height of the component string '300px'
hoverOutlineColor hover-outline-color The hover outline color string '#aaa'
iconSrc icon-src Icon source image (svg, png, jpg, gif, ...) string './assets/upload-cloud-flat.svg'
overlayColor overlay-color The overlay color string 'rgba(255,255,255,0.5)'
width width Width of the component string '100%'

Events

Event Description Type
change Raised when the upload has finished CustomEvent<File>
invalidformat Raised when the file tried to upload was in wrong format CustomEvent<string>
load Raised when the image has finished to load CustomEvent<File>

Methods

getFile() => Promise<File>

Obtains the selected or dropped file if any, or undefined if none available

Returns

Type: Promise<File>

selected or dropped file

reset() => void

Reset the component to void state

Returns

Type: void

Using this component

Script tag

  • Publish to NPM
  • Put a script tag similar to this <script src='https://unpkg.com/af-image-uploader@latest/dist/af-image-uploader.js'></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc

Node Modules

  • Run npm install af-image-uploader --save
  • Put a script tag similar to this <script src='node_modules/af-image-uploader/dist/af-image-uploader.js'></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

  • Run npm install af-image-uploader --save
  • Add an import to the npm packages import af-image-uploader;
  • Then you can use the element anywhere in your template, JSX, html etc