pildike

image-upload component

Usage no npm install needed!

<script type="module">
  import pildike from 'https://cdn.skypack.dev/pildike';
</script>

README

Pildike

Small but great custom element for uploading images.

gzip size

Install

npm install pildike

or add with unpkg to your HTML file

<script src="https://unpkg.com/pildike"></script>

Usage

After installing the script, you can just use a tag

<image-uploader width="700px" background="/assets/upload.svg" accept="image/*"></image-uploader>

Then you can listen to this component for upload event listener, for example

   document.querySelector("image-uploader").addEventListener("upload", (event) => {
    console.log(event.details)
  })

Attributes accepted

  • width : Add the width of the container
  • background : Source of the background image of the component
  • accept : Set what types of images are accepted for example accept="image/gif, image/jpeg, image/png" or accept="image/*"

https://tonis2.github.io/pildike/