af-image-uploader
Advanced tools
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>
| 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%' |
| 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> |
getFile() => Promise<File>Obtains the selected or dropped file if any, or undefined if none available
Type: Promise<File>
selected or dropped file
reset() => voidReset the component to void state
Type: void
<script src='https://unpkg.com/af-image-uploader@latest/dist/af-image-uploader.js'></script> in the head of your index.htmlnpm install af-image-uploader --save<script src='node_modules/af-image-uploader/dist/af-image-uploader.js'></script> in the head of your index.htmlnpm install af-image-uploader --saveimport af-image-uploader;FAQs
AppFeel Image Uploader
We found that af-image-uploader demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.
Security News
AGENTS.md is a fast-growing open format giving AI coding agents a shared, predictable way to understand project setup, style, and workflows.
Security News
/Research
Malicious npm package impersonates Nodemailer and drains wallets by hijacking crypto transactions across multiple blockchains.