Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

vue-photo-upload

imadx7ISC1.0.4

An easy to use photo upload component with a simple ui, with image cropping and image adjusting capability. Best suited for uploading profile pictures.

vue, image, photo, upload, crop, position, simple, ui, ux, component, profile, picture

readme

Vue Photo Upload

Simple UI for cropping, positioning and uploading a single photo.

Installation

1. Install using npm

npm install --save vue-photo-upload

2. Import Vue and vue-photo-upload

import Vue from 'vue'  
import PhotoUpload from 'vue-photo-upload'  
Vue.use(PhotoUpload);

3. Include components with your app

Within your Vue app, use, <photo-upload></photo-upload> as a Vue.component, with the following options.

<photo-upload 
    :enableEdits="true"
    :photoDefault="defaultPhoto"
    buttonClass="btn btn-primary"
    @photo-submit="photo_upload"
    @photo-change="photo_changed"
    >
</photo-upload>

The enableEdits, and photoDefault props can be reactive.
Use photoDefault can be used to include a default photo or an existing photo. The photo_upload event emits event parameters and the html5 file component

photo_upload: function(e, file){
    console.log(e,file)
}