Wondering what’s next for npm?Check out our public roadmap! »

    @canner/image-service-config

    0.4.0 • Public • Published

    image-service-config

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

    Support platforms:

    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}`
    };

    Keywords

    none

    Install

    npm i @canner/image-service-config

    DownloadsWeekly Downloads

    28

    Version

    0.4.0

    License

    ISC

    Unpacked Size

    325 kB

    Total Files

    34

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar
    • avatar