# m24-vue-upload-file

> A super simple unstyled file upload component in Vue.js

Latest version **1.0.2** (published 2020-03-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install m24-vue-upload-file
pnpm add m24-vue-upload-file
yarn add m24-vue-upload-file
bun add m24-vue-upload-file
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2020-03-12 |
| First published | 2020-02-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 25 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Adam Stradovnik |
| Maintainers | neoglyph |
| Keywords | simple, small, vue, component, file, upload |

## Links

- npm: https://www.npmjs.com/package/m24-vue-upload-file
- Repository: https://github.com/Media24si/vue-file-upload
- Issues: https://github.com/Media24si/vue-file-upload/issues
- npm.io page: https://npm.io/package/m24-vue-upload-file

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) latest

## Alternatives

- [unionfs](https://npm.io/package/unionfs.md) — 2.2M weekly downloads
- [path-starts-with](https://npm.io/package/path-starts-with.md) — 35.9K weekly downloads
- [redzip](https://npm.io/package/redzip.md) — 1.2K weekly downloads
- [vscode-anymatch](https://npm.io/package/vscode-anymatch.md) — 848 weekly downloads
- [@ledgerhq/coin-filecoin](https://npm.io/package/@ledgerhq/coin-filecoin.md) — 793 weekly downloads

## Recent versions

- 1.0.2 (latest) — 2020-03-12
- 1.0.1 — 2020-03-12
- 1.0.0 — 2020-02-20
- 0.0.1-security — 2020-02-20

## README

# Super simple File upload component with Vue.js
A super simple unstyled file upload component in Vue.js

<p align="center">
  <a href="LICENSE">
    <img src="https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square" alt="Software License" />
  </a>
  <a href="https://npmjs.org/package/m24-vue-upload-file">
    <img src="https://img.shields.io/npm/v/m24-vue-upload-file.svg?style=flat-square" alt="Packagist" />
  </a>
</p>

* [Vue.js](http://vuejs.org/) (tested with 2.6.11).

### Installation
```
npm install --save m24-vue-upload-file
```

### Example
```js
import Vue from 'vue'
import FileUpload from 'm24-vue-upload-file'

new Vue({
  el: '#app',
  data: {
    upload: {
      acceptTypes: 'image/*',
      multiple: false
    },
    files: [],
  },
  components: {
    FileUpload
  },
  methods: {
    filesAdded (fileArray) {
      this.files = fileArray
    },
    fileRemoved (fileArray) {
      this.files = fileArray
    },


    ...


    // Example of a file submit
    submitFiles (files) {
      const formData = new FormData()
      for (var i = 0; i < this.files.length; i++) {
        const file = this.files[i]
        formData.append('files[' + i + ']', file)
      }

      axios.post(this.submitEndpoint, formData, { headers: { 'Content-Type': 'multipart/form-data' } })
        .then(response => {
          // Upload
        })
        .catch(errors => {
          // Upload failes
        })
    },
  }
})
```

```html
<body id="app">
  <file-upload :acceptTypes="upload.acceptTypes"
               :multiple="upload.acceptsMultiple"
               @files-uploaded="filesAdded"
               @file-removed="fileRemoved"></file-upload>
</body>
```

#### Props
| Name          | Type     | Default | Required | Description
| :------------ | :--------| :-------| :--------| :-----------
| acceptTypes   | String   | ''      | false    | [HTML input accept types](https://www.geeksforgeeks.org/html-input-accept-attribute/)
| multiple      | Boolean  | 0       | false    | Should the upload accept one or multiple files

### Events
| Name           | Returns  | Description
| :------------  | :--------| :-----------
| files-uploaded | array of [files](https://developer.mozilla.org/en-US/docs/Web/API/File) | Returns an array with files added
| file-removed   | array of [files](https://developer.mozilla.org/en-US/docs/Web/API/File) | Returns an array of the remaining files

## Contributing

Please see [CONTRIBUTING](CONTRIBUTING.md) for details.

## License

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

[link-author]: https://github.com/pogachar

---
_Source: https://npm.io/package/m24-vue-upload-file · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._