IPFS (Filebase, Pinata, 4Everland, Web3, Lighthouse) provider for Strapi uploads.
# using yarn
yarn add strapi-provider-upload-ipfs-free
# using npm
npm install strapi-provider-upload-ipfs-free --save
When a picture is detected, you can enable compression and use sharp
to output the picture in webp format.
./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=""
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 |
Variable | Type | Description | Required |
---|---|---|---|
key | string | Pinata access key | yes |
secret | string | Pinata access secret | yes |
Variable | Type | Description | Required |
---|---|---|---|
key | string | 4Everland access key | yes |
secret | string | 4Everland access secret | yes |
bucket | string | 4Everland bucket name | yes |
Variable | Type | Description | Required |
---|---|---|---|
token | string | Web3 Storage API Token | yes |
Variable | Type | Description | Required |
---|---|---|---|
token | string | Lighthouse Storage API Token | yes |
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,
},
},
},
},
// ...
];
- Strapi website
- IPFS website
- Filebase website
- Pinata website
- 4Everland website
- Web3 website
- Lighthouse website