drop-zone

Allows you to drag and drop to <input type="file">

code

<style>
  drop-zone {
    display: inline-block;
    width: 100%;
    height: 250px;
    border: dashed 1px var(--color);
    border-radius: 0.5em;
  }
</style>
<drop-zone>
  <input type="file">
</drop-zone>

Colors and labels

It will use the color and of the page but you can set another one with CSS.

Change the labels with the following properties: label-line-1, label-line-2 and label-on-dragover

code

<style>
  drop-zone#custom {
    max-width: 300px;
    height: 200px;
    background-color: #fcedf0;
    color: indianred;
    border-color: indianred;
  }
</style>
<drop-zone id="custom" label-line-1="Dump it here" label-line-2="or check your folders" label-on-dragover="Go ahead, drop it">
  <input type="file">
</drop-zone>

Events

Listen to changes on the <input>.

code

<drop-zone>
  <input type="file" id="event">
</drop-zone>
<script>
  document.querySelector("#event")
  .addEventListener(
    "change",
    (e) => alert(`You dropped ${e.target.files[0]?.name}`),
  );
</script>