{"id":20218257,"url":"https://github.com/cannercms/image-service-config","last_synced_at":"2026-05-07T23:35:38.093Z","repository":{"id":65914538,"uuid":"115502529","full_name":"CannerCMS/image-service-config","owner":"CannerCMS","description":"Help you setup configurations in ant design uploader, support imgur, Firebase client, Firebase admin","archived":false,"fork":false,"pushed_at":"2018-11-13T06:15:11.000Z","size":156,"stargazers_count":1,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-03T02:04:39.647Z","etag":null,"topics":["antd","antdesign","firebase","firestore","image","image-upload","imgur"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CannerCMS.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-12-27T09:03:42.000Z","updated_at":"2022-09-25T15:36:29.000Z","dependencies_parsed_at":"2023-02-16T01:45:39.657Z","dependency_job_id":null,"html_url":"https://github.com/CannerCMS/image-service-config","commit_stats":null,"previous_names":["canner/image-service-config"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fimage-service-config","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fimage-service-config/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fimage-service-config/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fimage-service-config/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CannerCMS","download_url":"https://codeload.github.com/CannerCMS/image-service-config/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241655195,"owners_count":19998001,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["antd","antdesign","firebase","firestore","image","image-upload","imgur"],"created_at":"2024-11-14T06:37:45.942Z","updated_at":"2026-05-07T23:35:38.058Z","avatar_url":"https://github.com/CannerCMS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# image-service-config\n\u003e Configuration for image services using antd uploader: https://ant.design/components/upload/\n\nSupport platforms:\n\n- [Imgur](#imgurservice)\n- [Firebase client JS SDK](#firebaseclientservice)\n- [Firebase admin](##firebaseadminservice)\n\n## Installation\n\n```\nyarn add @canner/image-service-config\n\nnpm i --save @canner/image-service-config\n```\n\n## Usage\n\n```js\nconst serviceConfig = imageService.getServiceConfig();\n\nclass MyUpload extends React.Component {\n  render() {\n    return (\n      \u003cUpload {...serviceConfig}\u003e  // just pass `serviceConfig` to props, then your done!\n        \u003cButton\u003e\n          \u003cIcon type=\"upload\" /\u003e upload\n        \u003c/Button\u003e\n      \u003c/Upload\u003e\n    );\n  }\n}\n```\n\n## Support\n\n### ImgurService (Imgur)\n\nImgur API support.\n\n#### args\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003ename\u003c/th\u003e\n    \u003cth\u003etype\u003c/th\u003e\n    \u003cth\u003edefault\u003c/th\u003e\n    \u003cth\u003edescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003eclientId\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003e''\u003c/td\u003e\n    \u003ctd\u003e(required) Your Imgur's clientId, Docs: https://apidocs.imgur.com/\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003emashapeKey\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003e''\u003c/td\u003e\n    \u003ctd\u003e(optional) Your mashape's imgur key, Docs: https://market.mashape.com/imgur/imgur-9#image-upload \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### methods\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003ename\u003c/th\u003e\n    \u003cth\u003etype\u003c/th\u003e\n    \u003cth\u003edescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003egetServiceConfig\u003c/td\u003e\n    \u003cth\u003e\u003ccode\u003e() =\u003e {name: \"image\", accept: \"image/*\", action: string, headers: Object}\u003c/code\u003e\u003c/th\u003e\n    \u003ctd\u003ereturn the uploading configuration for imgur\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n```js\nimport {ImgurService} from '@canner/image-service-config';\n\nconst imageService = new ImgurService({\n  clientId, // https://apidocs.imgur.com/\n  mashapeKey // https://market.mashape.com/imgur/imgur-9#image-upload\n});\n\nconst serviceConfig = imageService.getServiceConfig();\nconsole.log(serviceConfig);\n// {\n//   name: \"image\",\n//   accept: \"image/*\",\n//   action: \"https://api.imgur.com/3/image\",\n//   headers: {\n//     Authorization: `Client-ID \u003cYOUR CLIENTID\u003e`,\n//     \"X-Requested-With\": null \n//    }\n// }\n```\n\n### FirebaseClientService (Firebase JS SDK)\n\nFirebase client SDK support.\n\n#### args\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003ename\u003c/th\u003e\n    \u003cth\u003etype\u003c/th\u003e\n    \u003cth\u003edefault\u003c/th\u003e\n    \u003cth\u003edescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003efirebase\u003c/td\u003e\n    \u003ctd\u003eFirebase\u003c/td\u003e\n    \u003ctd\u003e''\u003c/td\u003e\n    \u003ctd\u003e(required) A authenticated Firebase instance to upload image to firebase storage \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003efilename\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003e''\u003c/td\u003e\n    \u003ctd\u003e(optional) filename without extension\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003edir\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003e''\u003c/td\u003e\n    \u003ctd\u003e(optional) directory name,  eg: `path/to/you/want`  \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ehash\u003c/td\u003e\n    \u003ctd\u003eboolean\u003c/td\u003e\n    \u003ctd\u003efalse\u003c/td\u003e\n    \u003ctd\u003e(optional) if true, filename will add a postfix hash, e.g.: filename-\u0026lt;hash\u0026gt;.png\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### methods\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003ename\u003c/th\u003e\n    \u003cth\u003etype\u003c/th\u003e\n    \u003cth\u003edescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003egetServiceConfig\u003c/td\u003e\n    \u003cth\u003e\u003ccode\u003e() =\u003e {customRequest: Function}\u003c/code\u003e. See https://github.com/react-component/upload#customrequest\u003c/th\u003e\n    \u003ctd\u003ereturn the uploading configurations for firebase client sdk \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003esetHash\u003c/td\u003e\n    \u003cth\u003e\u003ccode\u003eboolean =\u003e ImageService\u003c/code\u003e\u003c/th\u003e\n    \u003ctd\u003eset the hash\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003esetDir\u003c/td\u003e\n    \u003cth\u003e\u003ccode\u003estring =\u003e ImageService\u003c/code\u003e\u003c/th\u003e\n    \u003ctd\u003eset the dir\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003esetFilename\u003c/td\u003e\n    \u003cth\u003e\u003ccode\u003estring =\u003e ImageService\u003c/code\u003e\u003c/th\u003e\n    \u003ctd\u003eset the filename\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n```js\nimport {FirebaseClientService} from '@canner/image-service-config';\nimport firebase from 'firebase';\n\nfirebase.initializeApp({\n  apiKey,\n  storageBucket\n});\n\n// remember to autauthencate firebase first, or uploading will be failed,\n// https://firebase.google.com/docs/auth/web/start\nfirebase.auth().signInAnonymously();\n\nconst imageService = new FirebaseClientService({\n  firebase: firebase,\n  dir: \"the/path/to\", // specify the path you want upload to \n  filename: \"filename\", // rename file without extension\n  hash: false, // if true, the filename will add a hash string, e.g.: `filename-${hash}.jpg`\n});\n\nconst serviceConfig = imageService.getServiceConfig();\n\nconsole.log(serviceConfig);\n// see https://github.com/react-component/upload#customrequest\n// {\n//   customRequest: Function\n// }\n```\n\n### FirebaseAdminService (Firebase admin SDK)\n\nFirebase admin SDK support.\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003ename\u003c/th\u003e\n    \u003cth\u003etype\u003c/th\u003e\n    \u003cth\u003edefault\u003c/th\u003e\n    \u003cth\u003edescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003egetSignedUrl\u003c/td\u003e\n    \u003ctd\u003e\u003ccode\u003e(file: File, filePath: string) =\u0026gt; Promise\u0026lt;{uploadUrl: string, publicUrl: sring}\u0026gt;\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003enull\u003c/td\u003e\n    \u003ctd\u003e(required) async method to get the signedUrl and publicUrl of firebase storage\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003efilename\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003e''\u003c/td\u003e\n    \u003ctd\u003e(optional) filename without extension\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003edir\u003c/td\u003e\n    \u003ctd\u003estring\u003c/td\u003e\n    \u003ctd\u003e''\u003c/td\u003e\n    \u003ctd\u003e(optional) directory name,  eg: `path/to/you/want`  \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003ehash\u003c/td\u003e\n    \u003ctd\u003eboolean\u003c/td\u003e\n    \u003ctd\u003efalse\u003c/td\u003e\n    \u003ctd\u003e(optional) if true, filename will add a postfix hash, e.g.: filename-\u0026lt;hash\u0026gt;.png\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n#### methods\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003ename\u003c/th\u003e\n    \u003cth\u003etype\u003c/th\u003e\n    \u003cth\u003edescription\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003egetServiceConfig\u003c/td\u003e\n    \u003cth\u003e\u003ccode\u003e() =\u003e {customRequest: Function}\u003c/code\u003e. See https://github.com/react-component/upload#customrequest\u003c/th\u003e\n    \u003ctd\u003ereturn the uploading configurations for firebase admin sdk \u003c/td\u003e\n  \u003c/tr\u003e\n    \u003ctr\u003e\n    \u003ctd\u003esetHash\u003c/td\u003e\n    \u003cth\u003e\u003ccode\u003eboolean =\u003e ImageService\u003c/code\u003e\u003c/th\u003e\n    \u003ctd\u003eset the hash\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003esetDir\u003c/td\u003e\n    \u003cth\u003e\u003ccode\u003estring =\u003e ImageService\u003c/code\u003e\u003c/th\u003e\n    \u003ctd\u003eset the dir\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003esetFilename\u003c/td\u003e\n    \u003cth\u003e\u003ccode\u003estring =\u003e ImageService\u003c/code\u003e\u003c/th\u003e\n    \u003ctd\u003eset the filename\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n``` js\nimport {FirebaseAdminService} from '@canner/image-service-config';\n\nfunction getSignedUrl(file, filePath) {\n  // GET your API server\n  return fetch('\u003cYOUR_API_ENDPOINT\u003e')\n    .then(res =\u003e res.json())\n    .then(data =\u003e {\n      console.log(data);\n      // {\n      //   uploadUrl: '\u003cFIREBASE_SIGNED_URL\u003e',\n      //   publicUrl: '\u003cFIREBASE_PUBLIC_URL\u003e',\n      // }\n      return data;\n    });\n  \n}\n\nconst imageService = new FirebaseAdminService({\n  getSignedUrl,\n  dir: \"the/path/to\", // specify the path you want upload to \n  filename: \"filename\", // rename file without extension\n  hash: false, // if true, the filename will add a hash string, e.g.: `filename-${hash}.jpg`\n});\n\nconst serviceConfig = imageService.getServiceConfig();\nconsole.log(serviceConfig);\n// see https://github.com/react-component/upload#customrequest\n// {\n//   customRequest: Function\n// }\n```\n\n**backend code in koa**\n``` js\n// use firebase admin sdk to generate signedUrl and publicUrl\n// https://firebase.google.com/docs/storage/admin/start\nlet firebaseApp;\ntry {\n  firebaseApp = firebaseAdmin.app(service.config.projectId);\n} catch (e) {\n  firebaseApp = firebaseAdmin.initializeApp({\n    credential: firebaseAdmin.credential.cert(service.config.serviceAccountJson),\n    databaseURL: service.config.databaseURL,\n    storageBucket: service.config.storageBucket\n  }, service.config.projectId);\n}\n\nconst bucket = firebaseApp.storage().bucket();\nconst token = UUID();\nconst urls = await bucket.file(filepath)\n.createResumableUpload({\n  origin: `https://\u003cYOUR WEBSITE HOST\u003e`,\n  metadata: {\n    contentType,\n    metadata: {\n      firebaseStorageDownloadTokens: token\n    }\n  }\n});\nctx.body = {\n  uploadUrl: urls[0],\n  publicUrl: `https://firebasestorage.googleapis.com/v0/b/${service.config.storageBucket}/o/${encodeURIComponent(filepath.startsWith(\"/\") ? filepath.slice(1) : filepath)}?alt=media\u0026token=${token}`\n};\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcannercms%2Fimage-service-config","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcannercms%2Fimage-service-config","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcannercms%2Fimage-service-config/lists"}