Mobile-friendly Picture File Input Component For Vue.js

A mobile-friendly picture file input component that allows you to upload images from your phone’s camera roll or select them from the device’s storage.

It supports drag and drop functionality, which allows users to move files between their computer and phone. Additionally, it supports EXIF orientation data, so you can set the correct orientation of your photos when they’re uploaded.

How to use it:

1. Import and register the picture file input component.

import PictureInput from 'vue-picture-input'

export default {
  // ...
  components: {
    PictureInput
  },
}

2. Add the component to the template.

<picture-input 
  ref="pictureInput"
  width="400" 
  height="300" 
  margin="15" 
  accept="image/jpeg,image/png" 
  size="10" 
  button-class="btn"
  :custom-strings="{
    upload: '<h1>Upload!</h1>',
    drag: 'Drag And Drop'
  }"
  @change="onChange">
</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 <form>, Luke!')
      }
    }
  }
}

3. All available component props.

width: {
  type: [String, Number],
  default: Number.MAX_SAFE_INTEGER
},
height: {
  type: [String, Number],
  default: Number.MAX_SAFE_INTEGER
},
margin: {
  type: [String, Number],
  default: 0
},
accept: {
  type: String,
  default: 'image/*'
},
capture: {
  type: String,
  default: null
},
size: {
  type: [String, Number],
  default: Number.MAX_SAFE_INTEGER
},
name: {
  type: String,
  default: null
},
id: {
  type: [String, Number],
  default: null
},
buttonClass: {
  type: String,
  default: 'btn btn-primary button'
},
removeButtonClass: {
  type: String,
  default: 'btn btn-secondary button secondary'
},
aspectButtonClass: {
  type: String,
  default: 'btn btn-secondary button secondary'
},
prefill: {
  // check for File API existence, do not fail with server side rendering
  type: (typeof File === 'undefined' || typeof Blob === 'undefined') ? [String] : [String, File, Blob],
  default: ''
},
prefillOptions: {
  type: Object,
  default: () => {
    return {}
  }
},
crop: {
  type: Boolean,
  default: true
},
radius: {
  type: [String, Number],
  default: 0
},
removable: {
  type: Boolean,
  default: false
},
hideChangeButton: {
  type: Boolean,
  default: false
},
autoToggleAspectRatio: {
  type: Boolean,
  default: false
},
toggleAspectRatio: {
  type: Boolean,
  default: false
},
changeOnClick: {
  type: Boolean,
  default: true
},
plain: {
  type: Boolean,
  default: false
},
zIndex: {
  type: Number,
  default: 10000
},
alertOnError: {
  type: Boolean,
  default: true
},
customStrings: {
  type: Object,
  default: () => {
    return {}
  }
}

width: {
  type: [String, Number],
  default: Number.MAX_SAFE_INTEGER
},
height: {
  type: [String, Number],
  default: Number.MAX_SAFE_INTEGER
},
margin: {
  type: [String, Number],
  default: 0
},
accept: {
  type: String,
  default: 'image/*'
},
capture: {
  type: String,
  default: null
},
size: {
  type: [String, Number],
  default: Number.MAX_SAFE_INTEGER
},
name: {
  type: String,
  default: null
},
id: {
  type: [String, Number],
  default: null
},
buttonClass: {
  type: String,
  default: 'btn btn-primary button'
},
removeButtonClass: {
  type: String,
  default: 'btn btn-secondary button secondary'
},
aspectButtonClass: {
  type: String,
  default: 'btn btn-secondary button secondary'
},
prefill: {
  // check for File API existence, do not fail with server side rendering
  type: (typeof File === 'undefined' || typeof Blob === 'undefined') ? [String] : [String, File, Blob],
  default: ''
},
prefillOptions: {
  type: Object,
  default: () => {
    return {}
  }
},
crop: {
  type: Boolean,
  default: true
},
radius: {
  type: [String, Number],
  default: 0
},
removable: {
  type: Boolean,
  default: false
},
hideChangeButton: {
  type: Boolean,
  default: false
},
autoToggleAspectRatio: {
  type: Boolean,
  default: false
},
toggleAspectRatio: {
  type: Boolean,
  default: false
},
changeOnClick: {
  type: Boolean,
  default: true
},
plain: {
  type: Boolean,
  default: false
},
zIndex: {
  type: Number,
  default: 10000
},
alertOnError: {
  type: Boolean,
  default: true
},
customStrings: {
  type: Object,
  default: () => {
    return {}
  }
}

4. Events.

• @change
• @prefill
• @remove
• @click
• @error

Live Preview:

Changelog:

v3.0.1 (07/20/2023)

• Several bug fixes

v2.4.0 (05/07/2022)

• Fix: Disable rotation if the browser does it already

Download Details:

Author: alessiomaffeis

Live Demo: https://github.com/alessiomaffeis/vue-picture-input

Download Link: https://github.com/alessiomaffeis/vue-picture-input/archive/master.zip

Official Website: https://github.com/alessiomaffeis/vue-picture-input

Install & Download:

npm install --save vue-picture-input