af-image-uploader
v1.0.1
Published
AppFeel Image Uploader
Downloads
4
Readme
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