image-service-config

Configuration for image services using antd uploader: https://ant.design/components/upload/

Support platforms:

• Imgur
• Firebase client JS SDK
• Firebase admin

Installation

yarn add @canner/image-service-config

npm i --save @canner/image-service-config

Usage

const serviceConfig = imageService.getServiceConfig();

class MyUpload extends React.Component {
  render() {
    return (
      <Upload {...serviceConfig}>  // just pass `serviceConfig` to props, then your done!
        <Button>
          <Icon type="upload" /> upload
        </Button>
      </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

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 <YOUR CLIENTID>`,
//     "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

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

import {FirebaseAdminService} from '@canner/image-service-config';

function getSignedUrl(file, filePath) {
  // GET your API server
  return fetch('<YOUR_API_ENDPOINT>')
    .then(res => res.json())
    .then(data => {
      console.log(data);
      // {
      //   uploadUrl: '<FIREBASE_SIGNED_URL>',
      //   publicUrl: '<FIREBASE_PUBLIC_URL>',
      // }
      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

// 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://<YOUR WEBSITE HOST>`,
  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}`
};