https://github.com/khofaai/vue-dropify

A Simple image dropzone component for Vuejs
https://github.com/khofaai/vue-dropify

component dropify dropzone image javascript vue vuejs vuejs-components

Last synced: about 1 month ago
JSON representation

A Simple image dropzone component for Vuejs

• Host: GitHub
• URL: https://github.com/khofaai/vue-dropify
• Owner: khofaai
• License: mit
• Created: 2018-07-05T15:38:51.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-09-16T05:40:16.000Z (about 2 years ago)
• Last Synced: 2024-10-17T23:30:31.687Z (about 2 months ago)
• Topics: component, dropify, dropzone, image, javascript, vue, vuejs, vuejs-components
• Language: Vue
• Homepage:
• Size: 273 KB
• Stars: 17
• Watchers: 2
• Forks: 9
• Open Issues: 3
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE
  • Security: SECURITY.md

Awesome Lists containing this project

• awesome-morocco - vue-dropify - dropify.svg?style=social)](https://github.com/khofaai/vue-dropify/stargazers) - Dropify build for vuejs framework. by [@khofaai](https://github.com/khofaai) (Uncategorized / Uncategorized)

README

        
## vue-dropify

[![npm](https://img.shields.io/npm/v/vue-dropify.svg)](https://www.npmjs.com/package/vue-dropify) ![license](https://img.shields.io/github/license/khofaai/vue-dropify.svg) [![Build Status](https://travis-ci.org/khofaai/vue-dropify.svg?branch=master)](https://travis-ci.org/khofaai/vue-dropify) [![npm](https://img.shields.io/npm/dw/vue-dropify.svg)](https://www.npmjs.com/package/vue-dropify) [![npm](https://img.shields.io/npm/dt/vue-dropify.svg)](https://www.npmjs.com/package/vue-dropify)

## Description

Dropify build for vuejs framework

**vue-dropify** package links :

- npm

- yarn

## Getting Started

_This packages still in Dev mode_

`vue-dropify` helps you to upload files with a simple pre-visual display.

## Installing

```bash

npm i vue-dropify

```

```bash

yarn add vue-dropify

```

## Usage

```javascript

import VueDropify from 'vue-dropify';

export default {

  components: {

    'vue-dropify': VueDropify

  }

}

```

## Attributes

| name              | default   | description |

|----               |----       |----         |

| **src**           | null      |  `String // image format: base64` |

| **full**          | false     |  `Boolean // this attribute define if dopify zone is full width` |

| **size**          | null      |  `String/Array // [minSize,maxSize] or 'maxSize'` |

| **unit**          | 'kb'      |  `String // Options are : ['b'(bytes),'kb'(kilobytes),'mb'(megabytes)] ` |

| **width**         | 'auto'    |  `String // Width of dropify zone` |

| **height**        | ''        |  `String // Height of dropify zone` |

| **dimensions**    | null      |  `Object // { width, height } for wanted image dimensions` |

| **accept**        | 'image/*' |  `String // The same option as ` |

| **message**       | null      |  `String // Displayed message when no image is selected` |

| **multiple**      | null      |  `Boolean // To enable multiple file upload` |

| **uploadIcon**    | ''        |  `String // Icon className` |

| **removeIcon**    | null      |  `String // Icon className` |

## Actions

> vue-dropify >= 0.6.0 support `v-model` directive

| name          | description |

|----           |----         |

| _@deprecated_ **_@upload_** | trigger when image is selected |

| **@change** | when change happen to input file |