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

1module.exports = ({ env }) => ({
2  // ...
3  upload: {
4    config: {
5      provider: "strapi-provider-upload-ipfs-storage",
6      providerOptions: {
7        defaultStorage: "filebase",
8        filebase: {
9          // https://console.filebase.com/keys
10          key: env("FILEBASE_KEY"),
11          secret: env("FILEBASE_SECRET"),
12          bucket: env("FILEBASE_BUCKET"),
13        },
14        pinata: {
15          // https://app.pinata.cloud/keys
16          jwt: env("PINATA_JWT"),
17        },
18        fleek: {
19          // https://app.fleek.co/#/settings/general/profile
20          key: env("FLEEK_KEY"),
21          secret: env("FLEEK_SECRET"),
22          bucket: env("FLEEK_BUCKET"),
23        },
24        web3: {
25          // https://web3.storage/tokens/
26          token: env("WEB3_TOKEN"),
27        },
28        lighthouse: {
29          // https://files.lighthouse.storage/dashboard/apikey
30          token: env("LIGHTHOUSE_TOKEN"),
31        },
32      },
33    },
34  },
35  // ...
36});

.env

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

PINATA_JWT=""

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

WEB3_TOKEN=""

LIGHTHOUSE_TOKEN=""

Configuration Strapi + Filebase [ tutorial ]

1module.exports = ({ env }) => ({
2  // ...
3  upload: {
4    config: {
5      provider: "strapi-provider-upload-ipfs-storage",
6      providerOptions: {
7        defaultStorage: "filebase",
8        filebase: {
9          // https://console.filebase.com/keys
10          key: env("FILEBASE_KEY"),
11          secret: env("FILEBASE_SECRET"),
12          bucket: env("FILEBASE_BUCKET"),
13        },
14      },
15    },
16  },
17  // ...
18});

Configuration Strapi + Pinata

1module.exports = ({ env }) => ({
2  // ...
3  upload: {
4    config: {
5      provider: "strapi-provider-upload-ipfs-storage",
6      providerOptions: {
7        defaultStorage: "pinata",
8        pinata: {
9          // https://app.pinata.cloud/keys
10          jwt: env("PINATA_JWT"),
11        },
12      },
13    },
14  },
15  // ...
16});

Configuration Strapi + Fleek

1module.exports = ({ env }) => ({
2  // ...
3  upload: {
4    config: {
5      provider: "strapi-provider-upload-ipfs-storage",
6      providerOptions: {
7        defaultStorage: "fleek",
8        fleek: {
9          // https://app.fleek.co/#/settings/general/profile
10          key: env("FLEEK_KEY"),
11          secret: env("FLEEK_SECRET"),
12          bucket: env("FLEEK_BUCKET"),
13        },
14      },
15    },
16  },
17  // ...
18});

Configuration Strapi + Web3

1module.exports = ({ env }) => ({
2  // ...
3  upload: {
4    config: {
5      provider: "strapi-provider-upload-ipfs-storage",
6      providerOptions: {
7        defaultStorage: "web3",
8        web3: {
9          // https://web3.storage/tokens/
10          token: env("WEB3_TOKEN"),
11        },
12      },
13    },
14  },
15  // ...
16});

Configuration Strapi + Lighthouse

1module.exports = ({ env }) => ({
2  // ...
3  upload: {
4    config: {
5      provider: "strapi-provider-upload-ipfs-storage",
6      providerOptions: {
7        defaultStorage: "lighthouse",
8        lighthouse: {
9          // https://files.lighthouse.storage/dashboard/apikey
10          token: env("LIGHTHOUSE_TOKEN"),
11        },
12      },
13    },
14  },
15  // ...
16});

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

1module.exports = [
2  // ...
3  {
4    name: "strapi::security",
5    config: {
6      contentSecurityPolicy: {
7        useDefaults: true,
8        directives: {
9          "connect-src": ["'self'", "https:"],
10          "img-src": [
11            "'self'",
12            "data:",
13            "blob:",
14            "dl.airtable.com",
15            "*.ipfs.dweb.link", // ipfs.tech
16            "*.ipfs.cf-ipfs.com", // cloudflare.com
17            "*.ipfs.w3s.link", // web3.storage
18          ],
19          "media-src": [
20            "'self'",
21            "data:",
22            "blob:",
23            "dl.airtable.com",
24            "*.ipfs.dweb.link", // ipfs.tech
25            "*.ipfs.cf-ipfs.com", // cloudflare.com
26            "*.ipfs.w3s.link", // web3.storage
27          ],
28          upgradeInsecureRequests: null,
29        },
30      },
31    },
32  },
33  // ...
34];

Links

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

(c) Alex Baker