# vuetify-avatar-uploader

> Vuetify's v-avatar component extended with file upload support

Latest version **0.3.0** (published 2020-02-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install vuetify-avatar-uploader
pnpm add vuetify-avatar-uploader
yarn add vuetify-avatar-uploader
bun add vuetify-avatar-uploader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2020-02-27 |
| First published | 2019-06-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 69 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Erik Vavro |
| Maintainers | slurm |
| Keywords | vue, vuejs, vuetify, vuetifyjs, avatar, upload |

## Links

- npm: https://www.npmjs.com/package/vuetify-avatar-uploader
- Repository: https://github.com/slurmulon/vuetify-avatar-uploader
- Homepage: https://github.com/slurmulon/vuetify-avatar-uploader#readme
- Issues: https://github.com/slurmulon/vuetify-avatar-uploader/issues
- npm.io page: https://npm.io/package/vuetify-avatar-uploader

## Alternatives

- [lodash.startswith](https://npm.io/package/lodash.startswith.md) — 769.7K weekly downloads
- [@tarojs/service](https://npm.io/package/@tarojs/service.md) — 33.9K weekly downloads
- [io.extendreality.tilia.indicators.spatialtargets.unity](https://npm.io/package/io.extendreality.tilia.indicators.spatialtargets.unity.md) — 131 weekly downloads
- [@rtarojs/taro](https://npm.io/package/@rtarojs/taro.md) — 90 weekly downloads
- [node-branch-io](https://npm.io/package/node-branch-io.md) — 50 weekly downloads

## Recent versions

- 0.3.0 (latest) — 2020-02-27
- 0.2.1 — 2019-06-13
- 0.2.0 — 2019-06-13
- 0.1.2 — 2019-06-06
- 0.1.1 — 2019-06-05
- 0.1.0 — 2019-06-05

## README

# vuetify-avatar-uploader
> :koala: `v-avatar` + file uploads
---

Wraps Vuetify's [`v-avatar`](https://vuetifyjs.com/en/components/avatars) component with file upload magic.

1. User clicks on their avatar
2. User selects an image file to use as their new avatar
3. File is uploaded to your API
4. User's avatar is replaced :sparkles:

## Installation

```sh
npm i vuetify-avatar-uploader
```

### Module

```js

import VAvatarUploader from 'vuetify-avatar-uploader'

export default {
  components: {
    VAvatarUploader
  }
}
```

### Browser

```html
<script type="text/javascript" src="node_modules/vuejs/dist/vue.min.js"></script>
<script type="text/javascript" src="node_modules/vuetify/dist/vuetify.min.js"></script>
<script type="text/javascript" src="node_modules/vuetify-avatar-uploader/dist/vuetify-avatar-uploader.min.js"></script>
<script type="text/javascript">
  Vue.use(VAvatarUploader);
</script>
```

## Usage

At a minimum, you must provide `:url` and `:request` properties:

```html
<template>
  <v-avatar-uploader
    :url="url"
    :request="request"
  />
</template>

<script>
import VAvatarUploader from 'vuetify-avatar-uploader'

export default {
  computed: {
    // Determine the URL to show, typically from an object representing a user
    url () {
      return 'https://randomuser.me/api/portraits/men/1.jpg'
    }
  },

  methods: {
    // Responsible for performing the upload request to your API
    request (form, config) {
      return this.$http.post('/v1/avatars', form, config)
    }
  },

  components: {
    VAvatarUploader
  }
}
</script>
```

## Example

The following is a real-world example of how the library can be used to support user avatar uploads:

```html
<template>
  <v-avatar-uploader
    :url="url"
    :request="request"
    :clickable="clickable"
    :rename="rename"
    @success="success"
    @failed="failed"
  />
</template>

<script>
import VAvatarUploader from 'vuetify-avatar-uploader'
import events from '@/util/events'

import uuid from 'uuid/v4'
import get from 'dlv'
import { mapState } from 'vuex'

export default {
  name: 'user-avatar-uploader',

  props: {
    user: {
      type: Object,
      required: true
    }
  },

  computed: {
    ...mapState('api/user', ['session']),

    url () {
      return get(this.user, 'avatar.thumb')
    },

    clickable () {
      return this.user.id === this.session.id
    }
  },

  methods: {
    request (form, config) {
      return this.$http.post('/v1/avatars', form, config)
    },

    rename (file) {
      const ext = file.name.split('.')[1]
      const name = `${uuid()}.${ext}`

      return name
    },

    success ({ data }) {
      // Update user avatar with the latest
      Object.assign(this.user.avatar, data)

      // Request the latest user object from the API to update all other references in the app
      this.$store.dispatch('api/user/get')
    },

    failed (error) {
      events.$emit('notify', { text: 'Failed to upload avatar', kind: 'error', icon: 'warning' })
    }
  },

  components: {
    VAvatarUploader
  }
}
</script>
```

## API

### Props

**Name**|**Description**|**Type**|**Required**|**Default**
-----|-----|-----|-----|-----
`url`|URL of the avatar|`String`|Yes| 
`request`|Performs the file upload|`Function`|Yes|
`rename`|Renames the file before upload|`Function`|No|`file => file.name`
`field`|`FormData` field name to use for file data|`String`|No|`'file'`
`clickable`|Determines if the user can click to upload|`Boolean`|No|`true`
`maxSize`|Maximum file upload size (in KiB)|`Number`|No|`2048`
`headers`|Optional HTTP headers to send with upload request|`Object`|No|`{}`
`avatar`|Core `v-avatar` configuration object|`Object`|No|`{}`

### Events

**Name**|**Description**
-----|-----
`success`|File upload succeeded
`progress`|File upload progress (`axios` only)
`cancel`|File upload interrupted (i.e. user clicked on avatar while uploading)
`replace`|User clicks on a pre-existing avatar (overrides default file selection flow!)
`failed`|File upload failed
`error-type`|File upload MIME type is unsupported
`error-size`|File upload exceeds maximum size
`error-empty`|File upload is empty

### Slots

**Name**|**Description**
-----|-----
`none`|Displayed when the `url` prop is falsy
`loading`|Displayed when an avatar is being uploaded

### Future

 - [ ] Document more real-world examples
 - [ ] Provide configuration options for `v-progress-bar`
 - [ ] Support upload cancellations
 - [x] Allow custom supported MIME types
 - [x] Allow custom form property name for file uploads
 - [x] Emit event on empty files

## License

MIT

---
_Source: https://npm.io/package/vuetify-avatar-uploader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._