Firebase Storage Media Library Provider for Strapi

The best Strapi Media Library provider for Firebase Storage 🔥 Supports custom Firebase Storage buckets for Spark plan users.

📝 Table of Contents

• Getting Started
• Configurations
• Status
• FAQ Section
• Contributions

Getting Started

To install the package, you can either use npm or yarn

npm i strapi-provider-upload-firebase-storage

# or

yarn add strapi-provider-upload-firebase-storage

Then, you need to add a plugin config in order to use strapi-provider-upload-firebase-storage.

Example

./config/plugins.js

module.exports = ({ env }) => ({
  // ...
  upload: {
    provider: "firebase-storage",
    providerOptions: {
      serviceAccount: require("./SERVICE_ACCOUNT_KEY_PATH.json"),
      bucketUrl: env("STORAGE_BUCKET_URL"),
      uploadOptions: {},
      deleteOptions: {},
    },
  },
  // ...
});

There are two environment variables you need to create in your .env.

Example

.env

STORAGE_BUCKET_URL=<PROJECT_NAME>.appspot.com

| Environment Variables | Description | | :-------------------- | :------------------------------------------------------------------------------------------------------------------------------------ | | STORAGE_BUCKET_URL | The name of your Firebase storage bucket. E.g. gs://<PROJECT_NAME>.appspot.com but omit the gs:// when entering it in your .env |

⚠ Important Note! You should add your service account key (.json file) in your .gitignore to prevent it from being pushed to your repository!

That is all it takes to upload your images to Firebase storage via Strapi! 🎊

If you need help finding your service account key or bucket name, refer to the FAQ section below.

Configurations

The initialization configuration is passed down to the provider via the options parameter. (e.g: admin.initializeApp()). You can see the complete list of options here.

There are a few additional configurations that you can pass into the provider. You can view all the optional upload options here and delete options here.

Example

./config/plugins.js

module.exports = ({ env }) => ({
  // ...
  upload: {
    provider: "firebase-storage",
    providerOptions: {
      serviceAccount: require("./SERVICE_ACCOUNT_KEY_PATH.json"),
      bucketUrl: env("STORAGE_BUCKET_URL"),
      options: {},
      customBucket: "my-custom-bucket",
      debug: true,
      uploadOptions: {
        resumable: false,
        private: true,
      },
      deleteOptions: {},
    },
  },
  // ...
});

By default, all uploads are set to public. You can however change those by passing in the options into the uploadOptions object. Below is an example of additional options you can pass in.

| Optional Parameters | Type | Default Value | Possible Values | | :------------------ | :-------- | :------------ | :------------------------------------------------------------------------------------------------------------------- | | debug | boolean | false | true / false | | options | object | {} | Refer to official documentation | | customBucket | string | undefined | <BUCKET_NAME> Only applicable if you use the Spark plan & created a custom bucket | | uploadOptions | object | {} | Refer to official documentation | | deleteOptions | object | {} | Refer to official documentation |

Status

FAQ Section

• The service account key can be created by going to your Firebase console → Project settings → Service account → Click "Generate new private key". Then save that file anywhere safe. If saving in your repo, remember to add it into .gitignore!

• Go to your Firebase console → Project settings → Storage → Click "Get Started" (if its your first time setting up Firebase Storage for the project) → Copy the URL that looks like gs://<PROJECT_NAME>.appspot.com omitting the prefixed gs://.

• The file path is relative to your ./config/plugins.js. So if your .env is in the root of your repo (it usually is), your path will be ../<SERVICE_ACCOUNT_KEY_NAME>.json

Contributions

Contributions & suggestions are welcome! Please do test it out and let me know what additional features are missing or needed. Also do let me know about any bugs you find! 😉