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

Install

npm i vue3-image-input

Usage

1. Import the ImageInput component

1import { ImageInput } from 'vue3-image-input'

2. Import style.css
   • in style block of your SFC (don't work with scoped attribute).

     1@import '/node_modules/vue3-image-input/dist/style.css';

   • or in the <script setup>

     1import '/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

1<template>
2  <!-- an-app.vue -->
3  <h2>Upload a beautiful picture</h2>
4  
5  <ImageInput 
6      accept="image/*"
7      resizable
8      name="picture-uploader"
9      class="a-class" />
10
11  <button type="submit">Send</button>
12</template>

1<style >
2/* an-app.vue */
3@import '/node_modules/vue3-image-input/dist/style.css';
4
5.a-class {
6  width: 200px;
7  height: 400px;
8  background-color: #ef0d50;
9}
10.a-class .preview {
11  background-color: #e1f2f7;
12  margin-top: 20px;
13  border-radius: 10px;
14}
15

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

• 1@input=""

• 1@change=""

• 1@focus=""

• 1@focusOff=""

• 1@onWithdraw="" // When the user remove the from file input. The event emitted is a File object.

Licence

MIT