Strapi Provider Upload IPFS Storage

IPFS (Filebase, Pinata, Fleek, Web3, Lighthouse) provider for Strapi uploads.

Installation

# using yarn
yarn add strapi-provider-upload-ipfs-storage

# using npm
npm install strapi-provider-upload-ipfs-storage --save

Providers Configuration

./config/plugins.js

module.exports = ({ env }) => ({
  // ...
  upload: {
    config: {
      provider: "strapi-provider-upload-ipfs-storage",
      providerOptions: {
        defaultStorage: "filebase",
        filebase: {
          // https://console.filebase.com/keys
          key: env("FILEBASE_KEY"),
          secret: env("FILEBASE_SECRET"),
          bucket: env("FILEBASE_BUCKET"),
        },
        pinata: {
          // https://app.pinata.cloud/keys
          jwt: env("PINATA_JWT"),
        },
        fleek: {
          // https://app.fleek.co/#/settings/general/profile
          key: env("FLEEK_KEY"),
          secret: env("FLEEK_SECRET"),
          bucket: env("FLEEK_BUCKET"),
        },
        web3: {
          // https://web3.storage/tokens/
          token: env("WEB3_TOKEN"),
        },
        lighthouse: {
          // https://files.lighthouse.storage/dashboard/apikey
          token: env("LIGHTHOUSE_TOKEN"),
        },
      },
    },
  },
  // ...
});

.env

FILEBASE_KEY=""
FILEBASE_SECRET=""
FILEBASE_BUCKET=""

PINATA_JWT=""

FLEEK_KEY=""
FLEEK_SECRET=""
FLEEK_BUCKET=""

WEB3_TOKEN=""

LIGHTHOUSE_TOKEN=""

Configuration Strapi + Filebase [ tutorial ]

Variable	Type	Description	Required
key	string	Filebase access key	yes
secret	string	Filebase access secret	yes
bucket	string	Filebase bucket name	yes

module.exports = ({ env }) => ({
  // ...
  upload: {
    config: {
      provider: "strapi-provider-upload-ipfs-storage",
      providerOptions: {
        defaultStorage: "filebase",
        filebase: {
          // https://console.filebase.com/keys
          key: env("FILEBASE_KEY"),
          secret: env("FILEBASE_SECRET"),
          bucket: env("FILEBASE_BUCKET"),
        },
      },
    },
  },
  // ...
});

Configuration Strapi + Pinata

Variable	Type	Description	Required
jwt	string	Pinata JWT (Secret access token)	yes

module.exports = ({ env }) => ({
  // ...
  upload: {
    config: {
      provider: "strapi-provider-upload-ipfs-storage",
      providerOptions: {
        defaultStorage: "pinata",
        pinata: {
          // https://app.pinata.cloud/keys
          jwt: env("PINATA_JWT"),
        },
      },
    },
  },
  // ...
});

Configuration Strapi + Fleek

Variable	Type	Description	Required
key	string	Fleek Storage API key	yes
secret	string	Fleek Storage API secret	yes
bucket	string	Fleek bucket name (e.g. 71a...-bucket)	yes

module.exports = ({ env }) => ({
  // ...
  upload: {
    config: {
      provider: "strapi-provider-upload-ipfs-storage",
      providerOptions: {
        defaultStorage: "fleek",
        fleek: {
          // https://app.fleek.co/#/settings/general/profile
          key: env("FLEEK_KEY"),
          secret: env("FLEEK_SECRET"),
          bucket: env("FLEEK_BUCKET"),
        },
      },
    },
  },
  // ...
});

Configuration Strapi + Web3

Variable	Type	Description	Required
token	string	Web3 Storage API Token	yes

module.exports = ({ env }) => ({
  // ...
  upload: {
    config: {
      provider: "strapi-provider-upload-ipfs-storage",
      providerOptions: {
        defaultStorage: "web3",
        web3: {
          // https://web3.storage/tokens/
          token: env("WEB3_TOKEN"),
        },
      },
    },
  },
  // ...
});

Configuration Strapi + Lighthouse

Variable	Type	Description	Required
token	string	Lighthouse Storage API Token	yes

module.exports = ({ env }) => ({
  // ...
  upload: {
    config: {
      provider: "strapi-provider-upload-ipfs-storage",
      providerOptions: {
        defaultStorage: "lighthouse",
        lighthouse: {
          // https://files.lighthouse.storage/dashboard/apikey
          token: env("LIGHTHOUSE_TOKEN"),
        },
      },
    },
  },
  // ...
});

Security Middleware Configuration

Due to the default settings in the Strapi Security Middleware you will need to modify the contentSecurityPolicy settings to properly see thumbnail previews in the Media Library. You should replace strapi::security string with the object bellow instead as explained in the middleware configuration documentation.

./config/middlewares.js

module.exports = [
  // ...
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "connect-src": ["'self'", "https:"],
          "img-src": [
            "'self'",
            "data:",
            "blob:",
            "dl.airtable.com",
            "*.ipfs.dweb.link", // ipfs.tech
            "*.ipfs.cf-ipfs.com", // cloudflare.com
            "*.ipfs.w3s.link", // web3.storage
          ],
          "media-src": [
            "'self'",
            "data:",
            "blob:",
            "dl.airtable.com",
            "*.ipfs.dweb.link", // ipfs.tech
            "*.ipfs.cf-ipfs.com", // cloudflare.com
            "*.ipfs.w3s.link", // web3.storage
          ],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  // ...
];

Links

• Strapi website
• IPFS website
• Filebase website
• Pinata website
• Fleek website
• Web3 website
• Lighthouse website

---

(c) Alex Baker