Show preview with <input type=file>

Demo

• Demo page

Examples

1<script type="importmap">
2  {
3    "imports": {
4      "@w0s/input-file-preview": "...",
5      "@w0s/html-escape": "...",
6      "whatwg-mimetype": "..."
7    }
8  }
9</script>
10<script type="module">
11  import inputFilePreview from '@w0s/input-file-preview';
12
13  inputFilePreview(document.querySelectorAll('.js-input-file-preview')); // `getElementById()` or `getElementsByClassName()` or `getElementsByTagName()` or `querySelector()` or `querySelectorAll()`
14</script>
15
16<input type="file" class="js-input-file-preview"
17  data-preview="preview"
18  data-max-size="1048576"
19/>
20<template id="preview">
21  <output><code>${name}</code> (<data value="${size}">${size} byte</data>) cannot be previewed.</output>
22</template>

HTML attributes

type [required]

This attribute must include file.

data-preview [required]

ID of the <template> element to display the preview.

data-max-size [optional]

The number of bytes of maximum file size to preview (Files larger than this will not be previewed, but will not result in an error). If not specified, the default value is 10 MiB.

<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>