Show preview with <input type=file>

Demo

• Demo page

Examples

<input type="file" is="x-file-preview"
  data-target-for="preview"
  data-error-message='&lt;strong class="error"&gt;&lt;b&gt;${name}&lt;/b&gt; (${size} byte) cannot be previewed.&lt;/strong&gt;'
  data-max-size="1048576"
/>
<p id="preview"></p>

Attributes

type [optional]

This function automatically sets type="file". However, it is recommended to manually add type="file" for JavaScript disabled environments and browsers that do not support Customized built-in elements (Safari 16, etc.). According to the description in the HTML specification, The missing value default and invalid value default are the Text state.

data-target-for [required]

ID of the element to display the preview. If the element is <ol>, <ul>, the <li> element will be inserted.

data-error-message [required]

Error message when the file cannot be previewed. You can write HTML markup directly. ${name} in the string is converted to the file name, and ${size} is converted to the file size (in bytes).

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.