Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cannercms/image-service-config
Help you setup configurations in ant design uploader, support imgur, Firebase client, Firebase admin
https://github.com/cannercms/image-service-config
antd antdesign firebase firestore image image-upload imgur
Last synced: 5 days ago
JSON representation
Help you setup configurations in ant design uploader, support imgur, Firebase client, Firebase admin
- Host: GitHub
- URL: https://github.com/cannercms/image-service-config
- Owner: CannerCMS
- Created: 2017-12-27T09:03:42.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-11-13T06:15:11.000Z (about 6 years ago)
- Last Synced: 2024-10-29T22:25:47.636Z (20 days ago)
- Topics: antd, antdesign, firebase, firestore, image, image-upload, imgur
- Language: JavaScript
- Homepage:
- Size: 152 KB
- Stars: 1
- Watchers: 3
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# image-service-config
> Configuration for image services using antd uploader: https://ant.design/components/upload/
Support platforms:
- [Imgur](#imgurservice)
- [Firebase client JS SDK](#firebaseclientservice)
- [Firebase admin](##firebaseadminservice)
## Installation
```
yarn add @canner/image-service-config
npm i --save @canner/image-service-config
```
## Usage
```js
const serviceConfig = imageService.getServiceConfig();
class MyUpload extends React.Component {
render() {
return (
// just pass `serviceConfig` to props, then your done!
upload
);
}
}
```
## Support
### ImgurService (Imgur)
Imgur API support.
#### args
name
type
default
description
clientId
string
''
(required) Your Imgur's clientId, Docs: https://apidocs.imgur.com/
mashapeKey
string
''
(optional) Your mashape's imgur key, Docs: https://market.mashape.com/imgur/imgur-9#image-upload
#### methods
name
type
description
getServiceConfig
() => {name: "image", accept: "image/*", action: string, headers: Object}
return the uploading configuration for imgur
```js
import {ImgurService} from '@canner/image-service-config';
const imageService = new ImgurService({
clientId, // https://apidocs.imgur.com/
mashapeKey // https://market.mashape.com/imgur/imgur-9#image-upload
});
const serviceConfig = imageService.getServiceConfig();
console.log(serviceConfig);
// {
// name: "image",
// accept: "image/*",
// action: "https://api.imgur.com/3/image",
// headers: {
// Authorization: `Client-ID `,
// "X-Requested-With": null
// }
// }
```
### FirebaseClientService (Firebase JS SDK)
Firebase client SDK support.
#### args
name
type
default
description
firebase
Firebase
''
(required) A authenticated Firebase instance to upload image to firebase storage
filename
string
''
(optional) filename without extension
dir
string
''
(optional) directory name, eg: `path/to/you/want`
hash
boolean
false
(optional) if true, filename will add a postfix hash, e.g.: filename-<hash>.png
#### methods
name
type
description
getServiceConfig
() => {customRequest: Function}. See https://github.com/react-component/upload#customrequest
return the uploading configurations for firebase client sdk
setHash
boolean => ImageService
set the hash
setDir
string => ImageService
set the dir
setFilename
string => ImageService
set the filename
```js
import {FirebaseClientService} from '@canner/image-service-config';
import firebase from 'firebase';
firebase.initializeApp({
apiKey,
storageBucket
});
// remember to autauthencate firebase first, or uploading will be failed,
// https://firebase.google.com/docs/auth/web/start
firebase.auth().signInAnonymously();
const imageService = new FirebaseClientService({
firebase: firebase,
dir: "the/path/to", // specify the path you want upload to
filename: "filename", // rename file without extension
hash: false, // if true, the filename will add a hash string, e.g.: `filename-${hash}.jpg`
});
const serviceConfig = imageService.getServiceConfig();
console.log(serviceConfig);
// see https://github.com/react-component/upload#customrequest
// {
// customRequest: Function
// }
```
### FirebaseAdminService (Firebase admin SDK)
Firebase admin SDK support.
name
type
default
description
getSignedUrl
(file: File, filePath: string) => Promise<{uploadUrl: string, publicUrl: sring}>
null
(required) async method to get the signedUrl and publicUrl of firebase storage
filename
string
''
(optional) filename without extension
dir
string
''
(optional) directory name, eg: `path/to/you/want`
hash
boolean
false
(optional) if true, filename will add a postfix hash, e.g.: filename-<hash>.png
#### methods
name
type
description
getServiceConfig
() => {customRequest: Function}. See https://github.com/react-component/upload#customrequest
return the uploading configurations for firebase admin sdk
setHash
boolean => ImageService
set the hash
setDir
string => ImageService
set the dir
setFilename
string => ImageService
set the filename
``` js
import {FirebaseAdminService} from '@canner/image-service-config';
function getSignedUrl(file, filePath) {
// GET your API server
return fetch('')
.then(res => res.json())
.then(data => {
console.log(data);
// {
// uploadUrl: '',
// publicUrl: '',
// }
return data;
});
}
const imageService = new FirebaseAdminService({
getSignedUrl,
dir: "the/path/to", // specify the path you want upload to
filename: "filename", // rename file without extension
hash: false, // if true, the filename will add a hash string, e.g.: `filename-${hash}.jpg`
});
const serviceConfig = imageService.getServiceConfig();
console.log(serviceConfig);
// see https://github.com/react-component/upload#customrequest
// {
// customRequest: Function
// }
```
**backend code in koa**
``` js
// use firebase admin sdk to generate signedUrl and publicUrl
// https://firebase.google.com/docs/storage/admin/start
let firebaseApp;
try {
firebaseApp = firebaseAdmin.app(service.config.projectId);
} catch (e) {
firebaseApp = firebaseAdmin.initializeApp({
credential: firebaseAdmin.credential.cert(service.config.serviceAccountJson),
databaseURL: service.config.databaseURL,
storageBucket: service.config.storageBucket
}, service.config.projectId);
}
const bucket = firebaseApp.storage().bucket();
const token = UUID();
const urls = await bucket.file(filepath)
.createResumableUpload({
origin: `https://`,
metadata: {
contentType,
metadata: {
firebaseStorageDownloadTokens: token
}
}
});
ctx.body = {
uploadUrl: urls[0],
publicUrl: `https://firebasestorage.googleapis.com/v0/b/${service.config.storageBucket}/o/${encodeURIComponent(filepath.startsWith("/") ? filepath.slice(1) : filepath)}?alt=media&token=${token}`
};
```