Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more.

Last update: Jun 14, 2018

vue-picture-input

Mobile-friendly picture file input Vue.js component with image preview, drag and drop, EXIF orientation, and more.

Picture Input Demo

Installation

npm

npm install --save vue-picture-input

yarn

yarn add vue-picture-input

Usage

">
<template>
  <div class="hello">    
    <picture-input 
      ref="pictureInput"
      width="600" 
      height="600" 
      margin="16" 
      accept="image/jpeg,image/png" 
      size="10" 
      button-class="btn"
      :custom-strings="{
        upload: '

Bummer!

',
drag: 'Drag a ๐Ÿ˜บ GIF or GTFO' }" @change="onChange"> picture-input> div> template>
<script>
import PictureInput from 'vue-picture-input'

export default {
  name: 'app',
  data () {
    return {
    }
  },
  components: {
    PictureInput
  },
  methods: {
    onChange (image) {
      console.log('New picture selected!')
      if (image) {
        console.log('Picture loaded.')
        this.image = image
      } else {
        console.log('FileReader API not supported: use the 
, Luke!') } } } } </script>

You can also use it directly in the browser through unpkg's CDN (or jsDelivr):

In the browser!

{{ message }}

">
>
<html>
<head>
  <script src="https://unpkg.com/vue">script>
  <script src="https://unpkg.com/vue-picture-input">script>
  <title>In the browser!title>
head>
<body>
  <div id="app">
    <p>{{ message }}p>
    <picture-input>picture-input>
  div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      },
      components: {
        'picture-input': PictureInput
      }
    })
  script>
body>
html>

Example project

Try it on CodeSandbox: https://codesandbox.io/s/github/alessiomaffeis/vue-picture-input-example

Props

  • width, height: (pixels, optional) the maximum width and height of the preview container. The picture will be resized and centered to cover this area. If not specified, the preview container will expand to full width, 1:1 square ratio.
  • crop: (boolean, optional) set :crop="false" if you wish to disable cropping. The image will be resized and centered in order to be fully contained in the preview container. Default value: true.
  • margin: (pixels, optional) the margin around the preview container. Default value: 0.
  • radius: (percentage, optional) The border-radius value for the container. Set radius="50" to get a circular container. Default value: 0.
  • plain: (boolean, optional) Set :plain="true" to remove the inner border and text. Default value: false.
  • accept: (media type, optional) the accepted image type(s), e.g. image/jpeg, image/gif, etc. Default value: 'image/*'.
  • size: (MB, optional) the maximum accepted file size in megabytes.
  • removable: (boolean, optional) set :removable="true" if you want to display a "Remove Photo" button. Default value: false.
  • hideChangeButton: (boolean, optional) set :hideChangeButton="true" if you want to hide the "Change Photo" button. Default value: false.
  • id, name: (string, optional) the id and name attributes of the HTML input element.
  • buttonClass: (string, optional) the class which will be applied to the 'Change Photo' button. Default value: 'btn btn-primary button'.
  • removeButtonClass: (string, optional) the class which will be applied to the 'Remove Photo' button. Default value: 'btn btn-secondary button secondary'.
  • prefill: (image url or File object, optional) use this to specify the path to a default image (or a File object) to prefill the input with. Default value: empty.
  • prefillOptions: (object, optional) use this if you prefill with a data uri scheme to specify a file name and a media or file type:
  fileName: (string, optional) the file name
  fileType: (string, optional) the file type of the image, i.e. "png", or
  mediaType: (string, optional) the media type of the image, i.e. "image/png"
  • toggleAspectRatio: (boolean, optional) set :toggleAspectRatio="true" to show a button for toggling the canvas aspect ratio (Landscape/Portrait) on a non-square canvas. Default value: false.
  • autoToggleAspectRatio: (boolean, optional) set :autoToggleAspectRatio="true" to enable automatic canvas aspect ratio change to match the selected picture's. Default value: false.
  • changeOnClick: (boolean, optional) set :changeOnClick="true" to open image selector when user click on the image. Default value: true.
  • aspectButtonClass: (string, optional) the class which will be applied to the 'Landscape/Portrait' button. Default value: 'btn btn-secondary button secondary'.
  • zIndex: (number, optional) The base z-index value. In case of issues with your layout, change :zIndex="..." to a value that suits you better. Default value: 10000.
  • alertOnError: (boolean, optional) Set :alertOnError="false" to disable displaying alerts on attemps to select file with wrong type or too big. Default value: true.
  • customStrings: (object, optional) use this to provide one or more custom strings (see the example above). Here are the available strings and their default values:
{
  upload: '

Your device does not support file uploading.

'
, // HTML allowed drag: 'Drag an image or
click here to select a file'
, // HTML allowed tap: 'Tap here to select a photo
from your gallery'
, // HTML allowed change: 'Change Photo', // Text only remove: 'Remove Photo', // Text only select: 'Select a Photo', // Text only selected: '

Photo successfully selected!

'
, // HTML allowed fileSize: 'The file size exceeds the limit', // Text only fileType: 'This file type is not supported.', // Text only aspect: 'Landscape/Portrait' // Text only }

Events

  • change: emitted on (successful) picture change (prefill excluded). The image is passed along with the event as a Base64 Data URI string. If you need to access the underlying image from the parent component, add a ref attribute to picture-input (see the example above). You may want to use this.$refs.pictureInput.image (Base64 Data URI string) or this.$refs.pictureInput.file (File Object)
  • prefill: emitted on default image prefill.
  • remove: emitted on picture remove.
  • click: emitted on picture click.
  • error: emitted on error, along with an object with type, message, and optional additional parameters.

TODOs

  • Client-side resizing and cropping
  • Add tests

Contributions

All contributions are welcome, as long as they are within the scope of the project. Please open a new issue before submitting a pull request.

You should follow the Javascript Standard Style guidelines: https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style

GitHub

https://github.com/RobertTutaev/vue-picture-input
You might also like...

Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices

Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices

Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices

Jul 3, 2022

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

Jun 29, 2022

Lightweight and simple image gallery component for Vue.js

Lightweight and simple image gallery component for Vue.js

vue-image-box Description Lightweight and simple-ish image gallery component for Vue.js. Images can also be cycled through using the left & right arro

Oct 3, 2021

A lightweight image, video and iframe lightbox gallery component for Vue

A lightweight image, video and iframe lightbox gallery component for Vue

A lightweight image, video and iframe lightbox gallery component for Vue. Supports slide, zoom, rotation, autoplay, captions and so on.

Apr 13, 2022

Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js

v-viewer Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js Live demo Examples directive component thumbnail

Dec 3, 2020

Image viewer component for vue 3.x, supports rotation, scale, zoom and so on, based on viewer.js

v-viewer Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js v-viewer for vue2 Live demo Quick Example direct

Jun 21, 2022

๐Ÿ™‹โ€โ™€๏ธ Image magic animation drawing effect component for Vue 2.x | ๅ›พๅƒๅŠจๆ€็ป˜ๅˆถๆ•ˆๆžœ

๐Ÿ™‹โ€โ™€๏ธ Image magic animation drawing effect component for Vue 2.x | ๅ›พๅƒๅŠจๆ€็ป˜ๅˆถๆ•ˆๆžœ

vue-image-painter English | ็ฎ€ไฝ“ไธญๆ–‡ ๐ŸŒฐ Example Demo Demo Source Code ๐Ÿš€ QuickStart Install yarn add vue-image-painter # OR npm i -S vue-image-painter Imp

May 4, 2022

Imagvue is an image component for Vue.js

 Imagvue is an image component for Vue.js

Imagvue Imagvue provides basic image processing props(size,blur,contrast,grayscale, etc.). Support image lazy loading. All Attributes can bind with da

May 23, 2022

๐ŸŒ‰ Vue Image Placeholder component

๐ŸŒ‰ Vue Image Placeholder component

Vue Image Placeholder ๐ŸŒ‰ Multiservice Image Placeholder Vue component Installation yarn add vue-image-placeholder Use it in your app import ImagePlace

Aug 19, 2021
Vue picture magnifying glass
Vue picture magnifying glass

Vue picture magnifying glass

Jun 30, 2022
A Vue.js 3.0 image lightbox component with Zoom / Drag / Rotate / Switch .

A Vue.js 3.0 image lightbox component with Zoom / Drag / Rotate / Switch .

Jun 24, 2022
An Mobile-First image viewer for Vue2 / ไธ€ไธช็งปๅŠจ็ซฏไผ˜ๅ…ˆ็š„ Vue2 ๅ›พ็‰‡้ข„่งˆๆ’ไปถ
An Mobile-First image viewer for Vue2  / ไธ€ไธช็งปๅŠจ็ซฏไผ˜ๅ…ˆ็š„ Vue2 ๅ›พ็‰‡้ข„่งˆๆ’ไปถ

img-vuer An Mobile-First image viewer for Vue2 ไธญๆ–‡ README ??โ€โ™€๏ธ Easy to use ?? Swipe gesture ?? Zoom gesture V0.11.0 Now you can use thumbnail~ V0.13.0

May 1, 2022
A Vue component for showing loader during image loading https://john015.github.io/vue-load-image/

English | ํ•œ๊ตญ์–ด Vue-load-image Vue-load-image is 1KB(gzipped size) minimalist Vue component that display loader during image loading and display alterna

May 24, 2022
๐ŸŒˆ A Vue image component. Simple realization of image shadow.

?? vue-image-shadow A Vue image component. Simple realization of image shadow. ?? Example Online: https://image-component.github.io/vue-image-shadow/

Mar 31, 2022
Kirby block preview plugin to directly render block fields
Kirby block preview plugin to directly render block fields

Kirby Fields Block Kirby block preview plugin to directly render block fields, allowing for inline editing. Usage Block definition When creating a cus

Jun 28, 2022
vue-image-markup will provide you to edit uploaded image easily and save it.

Markup Image with Vue.js (customizable) vue-image-markup will provide you to edit uploaded image easily and save it. Installation npm i vue-image-mark

May 27, 2022
Vue-image-loader: image loader for vue js with prevue

Vue-image-loader: image loader for vue js with prevue

Feb 1, 2020
A Directive for setting fall back image in a vue js application if in case image is not loaded

vue-fall-back-image-directive A Directive for setting fall back image in a vue js application. Installation npm install Run npm install --save vue-fal

Oct 15, 2019
Friendly Captcha component for Vue 2 and 3

Vue Friendly Captcha Wrapper component library for Friendly Challenge. Works with Vue 2 and 3. Getting Started 1. Install the package Vue 2.x: npm ins

Jun 14, 2022