https://github.com/jrainlau/dolu
A light weight tool for photo uploading
https://github.com/jrainlau/dolu
Last synced: 21 days ago
JSON representation
A light weight tool for photo uploading
- Host: GitHub
- URL: https://github.com/jrainlau/dolu
- Owner: jrainlau
- License: mit
- Created: 2017-04-17T11:44:40.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-04-28T09:46:40.000Z (about 8 years ago)
- Last Synced: 2024-04-26T02:21:54.755Z (about 1 year ago)
- Language: JavaScript
- Size: 95.7 KB
- Stars: 9
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Dolu
A tool for photo uploding in formdata.
## 1. Download
```
yarn add dolu
```
## 2. Usage
Both `es6` and `AMD` are supported by `Dolu`：
```
# es6
import Dolu from 'dolu'
# AMD
const Dolu = require('Dolu')
```
After importing/requiring, create an instance：
```
const dolu = new Dolu(config)
```
## 3. Configuration
| params | type | description | default | required |
| --- | --- | --- | --- | --- |
| picker | String | selector of your `` picker | `null` | no |
| autoSend | Boolean | upload after file picking immediately | `false` | no |
| quantity | Number | the quantity of photoes | `4` | no |
| uploader | Function | defined your upload function, `dolu.send()` | `() => {}` | no |
| getDataUrls | Function | receive a `base64` array transform from your photoes | `() => {}` | no |
| getFormDatas | Function | receive a `formdata` array transform from your photoes | `() => {}` | no |
> uploader: receive two params: `data` and `index`. Param `data` is type of `formdata`, and param `index` is the number of a photo.
## 4. Methods
- `send(Array)`. This method receive an array in type of `base64 string` or `formdata`, and upload it one by one after triggering it.
```
dolulu.send(yourArray)
```
- `getUrl()`. This method receive one base64 string, and return a formdata as a param to the `callback` function.
```
dolu.getUrl(base64String, (formdata) => {
// do whatever you want
})
```
## 5. Examples
1. Using `` tag:
```
import Dolu from './dolu'
import axios from 'axios'
const dolu = new Dolu({
// define the `` tag
picker: '#picker',
// define an upload function by using `axios`
uploader(data, index) {
axios({
method: 'post',
url: '/upload',
data: data,
onUploadProgress: (e) => {
const percent = Math.round( (e.loaded * 100) / e.total )
console.log(percent, index)
}
}).then((res) => {
console.log(res)
}).catch((err) => {
console.log(err)
})
},
// receive an array in type of `base64`
getDataUrls(arr) {
console.log(arr)
},
// upload manually
getFormDatas(arr) {
dolu.send(arr)
}
})
```
2. Upload `base64` array
```
import Dolu from './dolu'
import axios from 'axios'
const dolu = new Dolu({
uploader(data, index) {
axios({
method: 'post',
url: '/upload',
data: data,
onUploadProgress: (e) => {
const percent = Math.round( (e.loaded * 100) / e.total )
console.log(percent, index)
}
}).then((res) => {
console.log(res)
}).catch((err) => {
console.log(err)
})
}
})
const base64Arr = [ ... ] // a `base64` array
dolu.send(base64Arr)
```
# 6. Development
```
git clone https://github.com/jrainlau/dolu.git
cd dolu && yarn
# open a server for uploading test
yarn run server
# run dev
yarn run dev
```
> Note: `Dolu` is under `eslint-standard` rule, everyone should observe it, nor won't allow to be run or build.