Show preview with <input type=file>
Demo
Examples
<input type="file" is="x-file-preview"
data-target-for="preview"
data-error-message='<strong class="error"><b>${name}</b> (${size} byte) cannot be previewed.</strong>'
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.
