Show preview with <input type=file>

Demo

• Demo page

Examples

<script type="importmap">
  {
    "imports": {
      "@w0s/input-file-preview": "...",
      "@w0s/html-escape": "...",
      "whatwg-mimetype": "..."
    }
  }
</script>
<script type="module">
  import InputFilePreview from '@w0s/input-file-preview';

  for (const targetElement of document.querySelectorAll('.js-input-file-preview')) {
    new InputFilePreview(targetElement);
  }
</script>

<input type="file" class="js-input-file-preview"
  data-preview="preview"
  data-max-size="1048576"
/>
<template id="preview">
  <output><code>${name}</code> (<data value="${size}">${size} byte</data>) cannot be previewed.</output>
</template>

Attributes

<template> element

• <template> element must have one <output> element.
  • 🆗 <template> <output>Message</output> </template>
  • 🆗 <ul> <template> <li> <output>Message</output> </li> </template> </ul>
  • 🆖 <template> <p>Message</p> </template>
• Include the error message in the <output> element.
• ${name} in the <output> element is converted to the file name, and ${size} is converted to the file size (in bytes).
  • e.g. <output><code>${name}</code> (<data value="${size}">${size} byte</data>) cannot be previewed.</output>