Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sethsandaru/vue-simple-gallery-uploader

Simple Uploader Zone with Drag and Drop for your Image Gallery built from top of Vue
https://github.com/sethsandaru/vue-simple-gallery-uploader

and drag drag-and-drop drop image-gallery image-uploader upload uploader vue

Last synced: 2 months ago
JSON representation

Simple Uploader Zone with Drag and Drop for your Image Gallery built from top of Vue

Host: GitHub
URL: https://github.com/sethsandaru/vue-simple-gallery-uploader
Owner: sethsandaru
License: mit
Created: 2020-07-29T14:44:06.000Z (over 4 years ago)
Default Branch: master
Last Pushed: 2024-05-13T07:13:04.000Z (8 months ago)
Last Synced: 2024-05-13T08:29:52.354Z (8 months ago)
Topics: and, drag, drag-and-drop, drop, image-gallery, image-uploader, upload, uploader, vue
Language: Vue
Homepage:
Size: 4.57 MB
Stars: 2
Watchers: 3
Forks: 0
Open Issues: 24
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Vue Simple Uploader - Gallery Uploader

A simple UI for Vue to upload a gallery (images) or files with drag & drop for position arrangement

You can upload:
- Images (including preview mode)
- Files

## Demo

### Online
Coming soon...

### Image

![Vue Simple Gallery Uploader](./demo/vue-uploder-pro.gif)

## Built with
- JavaScript
- Vue 2
- Sortable

### Styling
I'm using Bootstrap 3 (only some basic class), it would be normally fine if you're using Bootstrap (3 or 4).

Next version `0.2.0`, I'll add the standalone styling version.

## Install

### Node
NPM/Yarn:
```bash
npm i vue-simple-gallery-uploader
```

### Browser Component
Pick up the latest build in the [Release](https://github.com/sethsandaru/vue-simple-gallery-uploader/releases) page.

```html

```

## Usage

### Node (Basic)
```vue

import VueUploader from 'vue-simple-gallery-uploader'
import 'vue-simple-gallery-uploader/dist/simple-uploader.min.css'

export default {
components: {
VueUploader,
// or if you want do use kebab-case
// 'vue-uploader': VueUploader
}
}

```

### Browser
Simply use it without a doubt >o<

```html

new Vue({
//...
data: {
myFiles: []
},
//...
})

```

## Config Options - Component Props
| Props | Data Type | Description |
|--------------------|-----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| limit | Integer | Number of files can be uploaded. 0 for unlimited.
Default: 0 |
| formMode | Boolean | If you're using the Component inside `` and you handle the form action like the old fashion way, turn this to "true".
Vue-Uploader will created 2 hidden fields: `files[]` and `urls[]` which contain the fileIDs and fileURLs
Default: false |
| fileRules | String | The `accept` attribute for the input=file.
Default: "image/jpg, image/jpeg, image/png" |
| acceptedExtensions | Array | For validation purpose. To check the file's extension before upload it.
Default: ['jpg','jpeg','png'] |
| endpoint | Object | API-Endpoint in order to Upload or Delete your image(s).
Must be declared like this:
{
"upload": "https(s)://< your-host >/< your-path >",
"delete": "..."
}
Note: If the "delete" endpoint is empty/null => When user deleted an image, Vue-Uploader won't make any request. |

## V-Model Information
Yes, you can use `v-model` to get/set your files data. Data passed in must be an `Array` of `Object`.

### Get
After uploaded a file, Vue Simple Gallery Uploader will add a new record into the Value Array. This is what you will got:
```javascript
[
{
fileId: 1,
fileURL: "< path >,
},
{
fileId: 2,
fileURL: " < path >"
},
//...
]
```

### Set
Yes, you need to pass in an Array of Objects like example above. Otherwise, Vue Simple Gallery Uploader will not working correctly.

```html

new Vue({
//...
data: {
myFiles: [
{fileId: 1, fileURL: "https://abc.com/file.jpg"},
{fileId: 10, fileURL: "https://abc.xyz/aaa.png"}
//...
]
},
//...
})

```

## API Information
Vue Simple Gallery Uploader need these REST APIs:
- Upload
- Delete (Optional)

### [POST] Upload API Note

#### Request
Vue Simple Gallery Uploader will include these data and send to you:
```
URL: http(s):///
Method: POST
Content-Type: multipart/form-data
Body:
- file: Binary data
```

#### Response
Success-Response must send the data back like below in order to let the Vue Simple Gallery Uploader works normally:

```json
{
"fileId": 1,
"fileURL": "https://your-host/uploads/imagexyz.jpg"
}
```

### [DELETE] Delete File API Note
Vue Simple Gallery Uploader will send a request when users clicked the delete icon:
```
Method: DELETE
URL: http(s):////{fileId}
```

Eg: DELETE https://sethphat.com/api/gallery/delete/51

No response needed.

### Ajax Note
Vue Simple Gallery Uploader is smart enough to find your current Ajax Client in the following order:
- JQuery Ajax ($.ajax)
- Axios (axios.post && axios.delete)
- fetch API (Final fallback)

### Basic API Implementation
Visit [HERE](./backend). Quick and not very dirty ExpressJS.

## Want to improve?
Feel free to make a fork and create a pull request. I'll review it.

## Demo Images Copyright
- Image by Patricia Román from Pixabay
- Image by Joseph Mucira from Pixabay
- Image by LUM3N from Pixabay

Thanks all for great works.

## LICENSE
MIT License