npmpackage.info

Gathering detailed insights and metrics for @saekitominaga/customelements-input-file-preview

@saekitominaga/customelements-input-file-preview - 1.1.6 | npmpackage.info

@saekitominaga/customelements-input-file-preview

JavaScript library that works in the browser

1.1.6

MIT

TypeScript

47.53 kB

Installations

npm install @saekitominaga/customelements-input-file-preview

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

18.15.0

NPM Version

9.5.0 Pull Requests

Open

0

Total

121

Closed

1

Merged

120

Issues

Open

2

Total

6

Closed

4

Releases

Unable to fetch releases

Languages

TypeScript

HTML

JavaScript

TypeScript (76.22%)

HTML (22.92%)

JavaScript (0.86%)

Developer

SaekiTominaga

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

1 Stars

513 Commits

1 Watchers

1 Branches

1 Contributors

Updated on Mar 25, 2025

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

1.1.6

Package Id

@saekitominaga/customelements-input-file-preview@1.1.6

Unpacked Size

47.53 kB

Size

16.84 kB

File Count

NPM Version

9.5.0

Node Version

18.15.0

Published on

Dec 28, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

@saekitominaga/mime-parser @saekitominaga/string-escape-html

Show preview with `<input type=file>`

Demo

Demo page

Examples

1<input type="file" is="x-file-preview"
2  data-target-for="preview"
3  data-error-message='&lt;strong class="error"&gt;&lt;b&gt;${name}&lt;/b&gt; (${size} byte) cannot be previewed.&lt;/strong&gt;'
4  data-max-size="1048576"
5/>
6<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.

No vulnerabilities found.

No security vulnerabilities found.

@saekitominaga/customelements-input-file-preview

Installations

Developer Guide

Yes

ESM

18.15.0

9.5.0

Pull Requests

0

121

1

120

Issues

2

6

4

Releases

Unable to fetch releases

Languages

Developer

SaekiTominaga

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Show preview with <input type=file>

Demo

Examples

Attributes

Show preview with `<input type=file>`