# vue3-image-input

> Picture input for Vue 3

Latest version **0.0.8** (published 2022-06-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue3-image-input
pnpm add vue3-image-input
yarn add vue3-image-input
bun add vue3-image-input
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.8 |
| Published | 2022-06-02 |
| First published | 2022-05-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 45.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | RatumArch |
| Maintainers | ratumarch |
| Keywords | picture input, image input, Vue, Vue 3 |

## Links

- npm: https://www.npmjs.com/package/vue3-image-input
- Repository: https://github.com/RatumArch/vue3-input-image-alpha
- Homepage: https://github.com/RatumArch/vue3-input-image-alpha#readme
- Issues: https://github.com/RatumArch/vue3-input-image-alpha/issues
- npm.io page: https://npm.io/package/vue3-image-input

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.2.36

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.0.8 (latest) — 2022-06-02
- 0.0.7 — 2022-06-01
- 0.0.6 — 2022-05-31
- 0.0.5 — 2022-05-31
- 0.0.4 — 2022-05-31
- 0.0.3 — 2022-05-31
- 0.0.2 — 2022-05-31
- 0.0.1 — 2022-05-31
- 0.0.0 — 2022-05-31

## README

# vue3-image-input

File input for Vue 3.
=======
This is an enhanced and customizable file input enable to pick a file with a preview.

Support preview for :
* **Image** : jpg, png, svg...
* **Video** : preview for mp4, webm and all other browser compatible format
* **Audio**
* **PDF**


<img src="./media/Screenshot_24.png" width="300" alt="Screenshot de présentation" >

# Install
```
npm i vue3-image-input
```
# Usage
1.  Import the *ImageInput* component
```js
import { ImageInput } from 'vue3-image-input'
```
2. Import style.css
      * in style block of your SFC (don't work with *scoped* attribute).
        ```css
        @import '/node_modules/vue3-image-input/dist/style.css';
        ```
      * or in the ```<script setup>```
        ```js
        import '/node_modules/vue3-image-input/dist/style.css'
        ```
If you don't import the built-in CSS, the components will not be ergonomic and you will have to write your custom CSS.
3. Add the attribute **name** to the *ImageInput* component.

## Exemple in a SFC

```html
<template>
  <!-- an-app.vue -->
  <h2>Upload a beautiful picture</h2>
  
  <ImageInput 
      accept="image/*"
      resizable
      name="picture-uploader"
      class="a-class" />

  <button type="submit">Send</button>
</template>
```

<img src="./media/Screenshot_21.png" width="500" alt="Screenshot de présentation" >

```css
<style >
/* an-app.vue */
@import '/node_modules/vue3-image-input/dist/style.css';

.a-class {
  width: 200px;
  height: 400px;
  background-color: #ef0d50;
}
.a-class .preview {
  background-color: #e1f2f7;
  margin-top: 20px;
  border-radius: 10px;
}

```

# Props
## Required
* ### accept
  * Default value : ```"image/*, audio/*, video/*"```
  * Type: ```string```
* ### name
  * Required prop
  * Equivalent to the *name* attribute in the tradutional form input.
  * Type: ```string```
---
## Optionals
* ### imagePlaceholder
  Custom image
  * Default value : built-in cover image*
* ### alt
* ### closeButton
  * Use a close button to withdraw a picked file
  * Type: ```boolean```
  * Default value: true
* ### closeIcon
  * Path to custom icon for close button
  * Type: ```string```
* ### textPlaceholder
* ### resizable

---
# Events
*
  ```js
  @input=""
  ```
*
  ```js
  @change=""
  ```
*
  ```js
  @focus=""
  ```
*
  ```js
  @focusOff=""
  ```
*
  ```js
  @onWithdraw="" // When the user remove the from file input. The event emitted is a File object.
  ```

# Licence
MIT

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