Skip to main content

๐Ÿ“ท Tiny little component for input type=file (css free! style it as you want!)

Works with
This package works with Bun
It is unknown whether this package works with Cloudflare Workers
It is unknown whether this package works with Node.js
It is unknown whether this package works with Deno
This package works with Browsers
JSR Score
47%
Published
2 months ago (3.1.2)

v-image ๐Ÿ“ท

CI CodeQL Ship.js Trigger GitHub release (latest SemVer) npm npm npm (downloads) npm bundle size (version) npm type definitions DeepScan grade Snyk Vulnerabilities for GitHub Repo license GitHub contributors

eslint prettier vite vue typescript

โš ๏ธ Docs are for Vue 3, for Vue 2 docs, check this tree

Demo

Edit v-image

Features

  • ๐Ÿ’ช Built with TypeScript
  • ๐ŸŒ  Built with Vue 3
  • โšก Zero dependencies.

Table of Contents

Installation

npm i v-image

Build Setup

# install dependencies
$ npm install

# package lib
$ npm run build

Usage

Global component:

// main.ts
import { VImage } from 'v-image';
import { createApp } from 'vue';

const app = createApp({});
app.component('VImage', VImage);

Or use locally

// component.vue
<script lang="ts">
import { VImage } from 'v-image';

export default defineComponent({
  components: {
    VImage,
  },
})
</script>

For Nuxt 3, create a file in plugins/v-image.ts

import { VImage } from 'v-image';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('VImage', VImage);
});

then import the file in nuxt.config.{j|t}s:

export default {
  // ...
  plugins: [
    // ...
    { src: '~/plugins/v-image', mode: 'client' },
    // ...
  ],
  // ...
};

Example

<template>
  <v-image
    wrapper="flex justify-center items-center content-center w-full h-full"
    :placeholder="placeholder"
    :form="form"
    :uploaded="uploaded"
    @image-loaded="onImageLoad"
    @image-removed="onImageRemove"
  />
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import type { Ref } from 'vue';
  import { VImage } from 'v-image';

  export default defineComponent({
    components: { VImage },
    setup() {
      const image: Ref<null | string> = ref(null);
      const placeholder = ref({
        image: 'https://picsum.photos/1000/1000',
        alt: 'Placeholder Image',
        imgClass: 'block rounded object-contain min-h-0 w-72',
        btnClass:
          'cursor-pointer inline-flex items-center justify-center mt-4 rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 w-72',
        wrapper: 'p-4 max-w-xs w-full border border-gray-400 border-dotted',
      });
      const form = ref({
        name: 'myImage',
        label: 'Select Image',
        accept: 'image/jpg',
      });
      const uploaded = ref({
        wrapper: 'p-4 max-w-xs w-full border border-gray-400 border-dotted',
        alt: 'User uploaded dope image',
        imgClass: 'block rounded object-contain min-h-0 w-72',
        btnClass:
          'cursor-pointer inline-flex items-center justify-center mt-4 rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 w-72',
        removeBtnText: 'Remove image',
      });

      const onImageLoad = (img: string) => {
        image.value = img;
      };
      const onImageRemove = (deleted: boolean) => {
        if (deleted) {
          image.value = null;
        }
      };

      return {
        placeholder,
        form,
        uploaded,
        onImageLoad,
        onImageRemove,
      };
    },
  });
</script>

API

Props

Name Type Required? Default Description
wrapper String No '' The wrapper classes for the top level <div>
placeholder Object No - The placeholder image & input related code
placeholder.wrapper String No '' Any wrapper classes for the placeholder <div>
placeholder.image String No 'https://picsum.photos/200x200' The placeholder image
placeholder.alt String No 'Placeholder Image' The placeholder image alt attribute
placeholder.imgClass String No '' Any placeholder image classes
placeholder.btnClass String No '' Select Image button classes
form Object No - The placeholder input form
form.name String No 'v-image' Enable the label to interact with the <input />
form.label String No 'Select Image' The label/button text
form.accept String No 'image/*' Abilty to accept file types
uploaded Object No - The user uploaded image related Object
uploaded.wrapper String No '' Any wrapper classes for the uploaded image <div>
uploaded.alt String No 'Very Interesting Image' The actual uploaded image alt attribute
uploaded.imgClass String No '' Uploaded image classes
uploaded.btnClass String No '' Remove Image button classes
uploaded.removeBtnText String No 'Remove Image' Remove Image button text

Events

Name Returns Description
@image-loaded String Sends the image in base64 format
@image-removed Boolean Emits true if image is removed

Contributing

  1. Fork it (https://github.com/vinayakkulkarni/v-image/fork)
  2. Create your feature branch (git checkout -b feat/new-feature)
  3. Commit your changes (git commit -Sam 'feat: add feature')
  4. Push to the branch (git push origin feat/new-feature)
  5. Create a new Pull Request

Note:

  1. Please contribute using GitHub Flow
  2. Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
  3. PS. Ensure your commits are signed. Read why

Author

v-image ยฉ Vinayak, Released under the MIT License.
Authored and maintained by Vinayak Kulkarni with help from contributors (list).

vinayakkulkarni.dev ยท GitHub @vinayakkulkarni ยท Twitter @_vinayak_k

Built and signed on
GitHub Actions
View transparency log

Add Package

deno add @vinayakkulkarni/v-image

Import symbol

import * as mod from "@vinayakkulkarni/v-image";

Add Package

npx jsr add @vinayakkulkarni/v-image

Import symbol

import * as mod from "@vinayakkulkarni/v-image";

Add Package

yarn dlx jsr add @vinayakkulkarni/v-image

Import symbol

import * as mod from "@vinayakkulkarni/v-image";

Add Package

pnpm dlx jsr add @vinayakkulkarni/v-image

Import symbol

import * as mod from "@vinayakkulkarni/v-image";

Add Package

bunx jsr add @vinayakkulkarni/v-image

Import symbol

import * as mod from "@vinayakkulkarni/v-image";