❤
npm
Sign UpSign In

af-image-uploader
TypeScript icon, indicating that this package has built-in type declarations

1.0.1 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i af-image-uploader

Repository

github.com/appfeel/af-image-uploader

Homepage

github.com/appfeel/af-image-uploader#readme

Weekly Downloads

2

Version

1.0.1

License

MIT

Unpacked Size

306 kB

Total Files

46

Last publish

Collaborators

  • appfeel
Try on RunKit
Report malware