Strapi-provider-upload-ipfs-free NPM

Strapi Provider Upload IPFS Free

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

Installation

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

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

Image Compression

When a picture is detected, you can enable compression and use basharp to output the picture in webp format.

Providers Configuration

./config/plugins.js

module.exports = ({ env }) => ({
  // ...
  upload: {
    config: {
      provider: "strapi-provider-upload-ipfs-free",
      providerOptions: {
        providers: {
          filebase: [{
            // https://console.filebase.com/keys
            key: env("FILEBASE_KEY"),
            secret: env("FILEBASE_SECRET"),
            bucket: env("FILEBASE_BUCKET"),
          }],
          pinata: [{
            // https://app.pinata.cloud/keys
            key: env("PINATA_KEY"),
            secret: env("PINATA_KEY"),
          }],
          everland: [{
            // https://docs.4everland.org/storage/bucket/s3-compatible-api
            key: env("EVERLAND_KEY"),
            secret: env("EVERLAND_SECRET"),
            bucket: env("EVERLAND_BUCKET"),
          }],
          web3: [{
            // https://web3.storage/tokens/
            token: env("WEB3_TOKEN"),
          }],
          lighthouse: [{
            // https://files.lighthouse.storage/dashboard/apikey
            token: env("LIGHTHOUSE_TOKEN"),
          }],
        },
        options: {
          default: 'filebase',
          random: false,
          compression:  {
            enabeld: false,
            quality: 70,
          }
        }
      },
    },
  },
  // ...
});

.env

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

PINATA_KEY=""
PINATA_SECRET=""

EVERLAND_KEY=""
EVERLAND_SECRET=""
EVERLAND_BUCKET=""

WEB3_TOKEN=""

LIGHTHOUSE_TOKEN=""

options params

Variable	Type	Description	Required	Default
default	string	Specify to select one of config provider	no	web3
random	boolean	randomly choose one of config provider	no	false
compression.enbaled	boolean	Whether to enable image compression and convert it to webp	no	false
compression.quality	number	Image Compression Quality	no	70

Filebase Variable [ tutorial ]

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

Pinata Variable

Variable	Type	Description	Required
key	string	Pinata access key	yes
secret	string	Pinata access secret	yes

4Everland Variable

Variable	Type	Description	Required
key	string	4Everland access key	yes
secret	string	4Everland access secret	yes
bucket	string	4Everland bucket name	yes

Web3 Variable

Variable	Type	Description	Required
token	string	Web3 Storage API Token	yes

Lighthouse Variable

Variable	Type	Description	Required
token	string	Lighthouse Storage API Token	yes

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,
        },
      },
    },
  },
  // ...
];