Vue-juicy-avatar NPM

Vue Juicy Avatar Uploader

This component that gives you opportunity to select/crop/upload user avatar

WARNING: This component is in beta test stage.

Install

npm install --save vue-juicy-avatar

yarn add vue-juicy-avatar

Usage

import Vue from 'vue'
import juicyAvatar from 'vue-juicy-avatar'

new Vue({
  el: '#app',
  data: {

  },
  methods: {
    imageChange({file, base64, crop}) {
      console.log('Image change', file, base64, crop)
    },
    uploadSuccess(response) {
      console.log('Response from server', response)
    },
    errorUpload(error) {
      console.log('Upload error', error)
    },
    validationError() {
      console.log('Display error about validation error')
    }
  },
  components: {
    juicyAvatar
  }
})

ID "juicyAvatar" required, component don't loaded without him

<div id="app">
  <juicy-avatar
    id="juicyAvatar"
    v-on:juicy-avatar-image-changes="imageChange"
    v-on:juicy-avatar-success-uploaded="uploadSuccess"
    v-on:juicy-avatar-error-uploaded="errorUpload"
    v-on:juicy-avatar-validation-error="validationError"
   />
</div>

Props

Prop	Type	Description	Required
uploadUrl	`String`	Url for upload your image	No
uploadParamName	`String`	The name of the file param that gets transferred No
uploadCropParamName	`String`	The name of the crop param that gets transferred	`No`
uploadAdditionalParams	`Object`	Can be an object of additional parameters to transfer to the server	`No`
uploadHeaders	`Object`	An optional object to send additional headers to the server	`No`
uploadFile	`Boolean`	Flag for enable/disable upload video after saving	`No`
avatar	`String`	Url existing user avatar	`No`
modalBtnSaveText	`String`	Text for save button	`No`
modalDescriptionLabel	`String`	Text for description	`No`
modalUploadBtnText	`String`	Text for upload button	`No`
modalUploadImageLabel	`String`	Text for label a little higher upload button	`No`
modalTitleLabel	`String`	Text for title modal window	`No`
showAddPhotoLabel	`Boolean`	Flag for display text "Add Photo"	`No`
addPhotoLabel	`String`	Text for link "Add Photo"	`No`

Events

Event	Description	Return
v-on:juicy-avatar-modal-show	Gets called when modal open	void
v-on:juicy-avatar-modal-close	Gets called when modal close	void
v-on:juicy-avatar-error-uploaded	Gets called at uploading error.	error object
v-on:juicy-avatar-success-uploaded	Gets called at uploading success.	response from server
v-on:juicy-avatar-validation-error	Gets called at validation error	void

License

The source code of this library is licensed under MIT, the documentation and photos are belong to their respective owners.

axios vue vue-advanced-cropper

@infinitebrahmanuniverse/nolb-vue-j @everything-registry/sub-chunk-3084

1.0.2

3 years ago

1.0.1

3 years ago