Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yudax42/vue-upload-drop-images
🖼️ Drag-and-drop image upload component for Vue
https://github.com/yudax42/vue-upload-drop-images
drag-drop-upload-images upload-images vue vue-upload-component
Last synced: about 1 month ago
JSON representation
🖼️ Drag-and-drop image upload component for Vue
- Host: GitHub
- URL: https://github.com/yudax42/vue-upload-drop-images
- Owner: yudax42
- License: mit
- Created: 2021-04-05T18:01:04.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-11-19T12:58:03.000Z (over 3 years ago)
- Last Synced: 2024-12-26T13:08:23.024Z (about 2 months ago)
- Topics: drag-drop-upload-images, upload-images, vue, vue-upload-component
- Homepage: https://vueupload.yudax.dev/
- Size: 2.92 MB
- Stars: 82
- Watchers: 2
- Forks: 39
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue Images Upload Component
Vue component that provides drag and drop images upload with preview.
## Features
* Upload files by Drag & Drop
* Upload files by clicking on the upload icon
* Add images
* Delete Images
* Append Images
* Remove all images
## Example
[DEMO](https://vueupload.yudax.dev)
## Install
1. install the package:
```bash
npm i vue-upload-drop-images --save
```
2. import it in your project
.vue file:
```javascript
import UploadImages from "vue-upload-drop-images"
...
export default {
components: {
UploadImages,
},
...
```
3. add component in template
```html
...
...
```
4. for Nuxt support
.nuxt.config:
```javascript
build: {
transpile: ['vue-upload-drop-images']
}
```
## Events
### @changed
Fired when new images are added or deleted it always returns uploaded files
Template:
```html
```
Script:
```javascript
...
methods:{
handleImages(files){
console.log(files)
/*
[
{
"name": "Screenshot from 2021-02-23 12-36-33.png",
"size": 319775,
"type": "image/png",
"lastModified": 1614080193596
...
},
...
]
*/
}
}
...
```
## Props
### max
Type: `Number`
Required: `false`
default: `null`
```html
```
### maxError
Type: `String`
Required: `false`
default: `Maximum files is`
```html
```
### uploadMsg
Type: `String`
Required: `false`
default: `Click to upload or drop your images here`
```html
```
### fileError
Type: `String`
Required: `false`
default: `Unsupported file type`
```html
```
### clearAll
Type: `String`
Required: `false`
default: `clear All`
```html
```