Af-image-uploader NPM

AppFeel Image Uploader WebComponent

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

@everything-registry/sub-chunk-1103 @zalastax/nolb-af-

1.0.1

5 years ago

1.0.0

5 years ago