README
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