# input-file-preview

> simple change input file to be a button, show name, size, and preview of image. Just tiny lib that could make it eazy.

Latest version **1.0.9** (published 2022-08-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install input-file-preview
pnpm add input-file-preview
yarn add input-file-preview
bun add input-file-preview
```

## Health

**Score 5/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score; declining downloads.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2022-08-14 |
| First published | 2022-08-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 13 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Achmad Yusuf |
| Maintainers | yusuf1980 |
| Keywords | input, button, file, image, size, file name |

## Links

- npm: https://www.npmjs.com/package/input-file-preview
- npm.io page: https://npm.io/package/input-file-preview

## Alternatives

- [unionfs](https://npm.io/package/unionfs.md) — 2.2M weekly downloads
- [path-starts-with](https://npm.io/package/path-starts-with.md) — 35.9K weekly downloads
- [redzip](https://npm.io/package/redzip.md) — 1.2K weekly downloads
- [vscode-anymatch](https://npm.io/package/vscode-anymatch.md) — 848 weekly downloads
- [@ledgerhq/coin-filecoin](https://npm.io/package/@ledgerhq/coin-filecoin.md) — 793 weekly downloads

## Recent versions

- 1.0.9 (latest) — 2022-08-14
- 1.0.8 — 2022-08-13
- 1.0.7 — 2022-08-13
- 1.0.6 — 2022-08-13
- 1.0.5 — 2022-08-13
- 1.0.4 — 2022-08-12
- 1.0.3 — 2022-08-12
- 1.0.2 — 2022-08-12
- 1.0.1 — 2022-08-12
- 1.0.0 — 2022-08-12

## README

# Input Image File Button and Preview.

simple change input file to be a button, show name, size, and preview of image. Just tiny lib that could make it eazy.

	$ npm install input-file-preview

#Usage
______

Create div element

	<div id="yourid">
	</div>

Call:

	import inputfile from 'input-file-preview'

	let button = document.getElementById('inputbutton');
    new buttontest(inputfile)

Change Preview Position
-----------------------

By default, position preview bellow of button input. But it's could change the position to up of preview. Just add div element after first div with class <code>.inbpreview</code> and your class.

	<div id="yourid">
	  <div class="inbpreview"></div>
	</div>

There are options, example if you would change label, and custom of name input that default is "filename":

	new InputFilePreview(inputimage, {
	  buttonText: "Browse Image",
	  name: "myInputName"
	});

Filter Image Type
-----------------
It could filter image type by acceptType:

	new InputFilePreview(inputimage, {
	  buttonText: "Browse Image",
	  acceptType: ['image/gif', 'image/png']
	});


Default Options:
----------------
<table>
<thead>
<tr>
<th>Property</th>
<th>Type</th>
<th>Default Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>buttonText</td>
<td>string</td>
<td>"Choose Image"</td>
</tr>
<tr>
<td>name</td>
<td>string</td>
<td>"filename"</td>
</tr>
<tr>
<td>showInfo</td>
<td>Boolean</td>
<td>true</td>
</tr>
<tr>
<td>showPreview</td>
<td>Boolean</td>
<td>true</td>
</tr>
<tr>
<td>acceptType</td>
<td>Array</td>
<td>['image/jpg', 'image/jpeg', 'image/png', 'image/gif']</td>
</tr>
<tr>
<td>previewStyles</td>
<td>Object</td>
<td>{'max-width': '200px', 'max-height': '200px', 'border-radius': '10px', 'border': '3px solid #ccc', 'margin-bottom': 0}</td>
</tr>
<td>onChange</td>
<td>function</td>
<td>arguments (event, imagesrc)</td>
</tr>
</tbody>
</table>

onChange
--------
There is onchange event to customization
	
	let imgid = document.getElementById('myImage');

	new InputFilePreview(inputimage, {
	  showPreview: false,
	  onChange: function(e, imagesrc) {
	  	// your another scripts
	  }
	});

On Vuejs
--------

	mounted() {
      let button = document.getElementById('inputbutton');
      let self = this;
      new buttontest(button, {
        buttonText: "Pilih Gambar",
        name: self.myName,
        onChange: function(e, imagesrc) {
          self.yourInputData = imagesrc;
        }
      });
    }


Styles
------
For custom style for preview it could use previewStyles property (look Default Options), follow property default and input the value.
	
	buttonText: 'Browse Image',
	previewStyles: {
	  'border': '10px solid #ccc'
	}

Or, replace on style and using <code>!important</code> if have the same style. And for another stylist also use this.

example:
	
	<style>
	/* for button */
	.inblabel {
	  width: 500px !important;
	}

	/* for preview */
	.inbpreview img {
	  /*
	  some style here
	  */
	}

	/* for text name and size */
	.inbfilename {
	  font-size: 20px !important;
	}
	</style>

---
_Source: https://npm.io/package/input-file-preview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._