Upload media to digitalocean spaces using strapi v4

I have tested this and it works fine for me.
Are you sure, your env vars are define correctly in your instance at digital ocean.

However, I am still facing issues with video previews.
which has been reported at Location URL misses https:// · Issue #4196 · aws/aws-sdk-js · GitHub

Hi Fabian, are you still having a problem? Make sure your config files are plugins.js and middlewares.js with the “s”.

Everything is named correctly and I have all the env vars set up. I don’t know what’s the problem, but we now use a droplet, so we don’t need spaces.

Thanks for your help. If I have more time in the future I’ll try it again and come back if I have a solution

To re-inforce @Fabian_Clemenz struggles here there is definitely an issue getting strapi 4.4.5 and digital ocean spaces to play nicely. I have followed the above with both strapi-provider-upload-dos and strapi/provider-upload-aws-s3 … no files show up in spaces. Any alternative apporaches please share, also followed this guide:

https://levelup.gitconnected.com/next-js-strapi-deploy-my-portfolio-website-to-vercel-and-digital-ocean-8011d5965038

Hi All, There was an update to the AWS-s3 provider in the latest version of Strapi (4.4.7). This was specifically to solve a problem with the https:// protocol being dropped on larger video files. I have also added a repository to my personal GitHub account that has a basic project setup for DO app platform and DO spaces. See the ./config/env/production directory for most everything you need. In the DO AppPlatform you need to set the env variables. I think I ended up with 10-12 but reply if you have any issues.

  • One change is in the security middleware there need to be two different allowed addresses because DO doesn’t serve them in a consistent format:
'*.fra1.digitaloceanspaces.com',
 'fra1.digitaloceanspaces.com',

(edit to add) You need to change fra1 to whatever your Spaces server is (e.g. nyc1, ams2, lon1)

Here is the GitHub repo

2 Likes

Yes! updating to 4.4.7 and following the config in your middlewares.js - its all working. Even tested with mp4 - thank you!

2 Likes

The solution for me ended up being ‘npm cache clear --force’

derp

Im having this exact issue. Follow the advice on the thread and nothing is working. Im using strapi version 4.5.3. Thanks

Hi @panrosk could you describe your problem a little more?

Just got it worked after long debugging.

With:
@strapi/provider-upload-aws-s3”: “^4.5.6”
@strapi/strapi”: “^4.5.6”

Make sure:
plugins.js > plugins.ts.

Make sure:
DO_SPACE_ENDPOINT is without your bucket name, like:
https://ams3.digitaloceanspaces.com

No need to use the digital ocean upload plugin, use the aws one.

1 Like

Hello! I am trying to get Strapi to work with Digital Ocean spaces. I tried following the official documentation as well as tips in this thread but nothing seems to work yet.
When initiating an upload I am getting the following in my strapi server logs:

2023-02-01T16:47:35.610425+00:00 app[web.1]: [2023-02-01 16:47:35.610] e[31merrore[39m: SignatureDoesNotMatch: null

2023-02-01T16:47:35.612535+00:00 heroku[router]: at=info method=POST path="/upload" host=xxx.herokuapp.com request_id=ebdb6c22-9beb-4dc2-ace0-d2da19a0a699 fwd="95.90.238.66" dyno=web.1 connect=0ms service=2342ms status=403 bytes=1033 protocol=https

Also in my client I am getting this at the same time:

code: "ERR_BAD_REQUEST"
config: Object { timeout: 0, xsrfCookieName: "XSRF-TOKEN", xsrfHeaderName: "X-XSRF-TOKEN", … }
message: "Request failed with status code 403"
name: "AxiosError"

I omitted the bucket name from DO_SPACE_ENDPOINT as @Cheston_Go suggests. Any help would be highly appreciated!

Did you create a spaces API key?

Add these:

middlewares.ts
{
name: ‘strapi::security’,
config: {
contentSecurityPolicy: {
useDefaults: true,
directives: {
‘connect-src’: ["‘self’", ‘https:’],
‘img-src’: ["‘self’", ‘data:’, ‘blob:’, ‘.digitaloceanspaces.com’],
‘media-src’: ["‘self’", ‘data:’, ‘blob:’, '
.digitaloceanspaces.com’],
upgradeInsecureRequests: null
}
}
}
},

plugins.ts
export default ({ env }) => ({
upload: {
config: {
provider: ‘aws-s3’,
providerOptions: {
accessKeyId: env(‘DO_SPACE_ACCESS_KEY’),
secretAccessKey: env(‘DO_SPACE_SECRET_KEY’),
endpoint: env(‘DO_SPACE_ENDPOINT’),
params: {
Bucket: env(‘DO_SPACE_BUCKET’)
}
}
}
}
});

Maybe, not sure if its required.
But go to spaces settings > advanced cors options.
Add an origin: *, with all allowed methods and max age 3000.

Thank you. I was able to make it work by resetting the access key in digital ocean and reassigning it.

Hello
I am trying to get Strapi to work with Digital Ocean Spaces.
I tried every solution I found in this thread and others. I am using Strapi version 4.5.6
This is my setup

middleware.ts

module.exports = [
‘strapi::errors’,
{
name: ‘strapi::security’,
config: {
contentSecurityPolicy: {
useDefaults: true,
directives: {
‘connect-src’: ["‘self’", ‘https:’],
‘img-src’: [
“‘self’”,
‘data:’,
‘blob:’,
dl.airtable.com’,
.digitaloceanspaces.com’,
],
‘media-src’: [
“‘self’”,
‘data:’,
‘blob:’,
dl.airtable.com’,
'
.digitaloceanspaces.com’,
],
upgradeInsecureRequests: null,
},
},
},
},
‘strapi::cors’,
‘strapi::poweredBy’,
‘strapi::logger’,
‘strapi::query’,
‘strapi::body’,
‘strapi::session’,
‘strapi::favicon’,
‘strapi::public’,
];

plugins.ts

module.exports = ({ env }) => ({
upload: {
config: {
provider: “strapi-provider-upload-do”,
providerOptions: {
key: env(‘DO_SPACE_ACCESS_KEY’),
secret: env(‘DO_SPACE_SECRET_KEY’),
endpoint: env(‘DO_SPACE_ENDPOINT’),
space: env(‘DO_SPACE_BUCKET’),
folders: [{folderName: ‘courses’, acl: ‘private’}, {folderName: ‘members’, acl: ‘private’}],
acl: ‘public-read’, // default ACL
},
actionOptions: {
upload: {},
uploadStream: {},
delete: {},
},
},
},
});

and this is the error message I got

Error: getaddrinfo ENOTFOUND strapi-fe-bucket

Thanks in advance!
Any help will be highly appreciated

Does anyone know how I can enforce the upload into a particular folder on DO using aws s3 plugin? I wanna upload from strapi media library always into a particular folder in the digital ocean spaces. Setting directory: “folder_name” does not seem to work.

I don’t know if this will fix your problem, but you list the config files as .ts but the code is for a javascript project. You should use this code for the config files:

export default ({ env }) => ({
  upload: {
config: {
provider: “strapi-provider-upload-do”,
providerOptions: {
key: env(‘DO_SPACE_ACCESS_KEY’),
secret: env(‘DO_SPACE_SECRET_KEY’),
endpoint: env(‘DO_SPACE_ENDPOINT’),
space: env(‘DO_SPACE_BUCKET’),
folders: [{folderName: ‘courses’, acl: ‘private’}, {folderName: ‘members’, acl: ‘private’}], 
acl: ‘public-read’, // default ACL
},
actionOptions: {
upload: {},
uploadStream: {},
delete: {},
},
},
}
});

Also I have no idea if the folders property is actually supported by DO or the upload provider.

To upload media to Digital Ocean Spaces, there are several options available. One option is to use the web interface provided by Digital Ocean Spaces. Simply log in, navigate to the desired Space, and click the “Upload” button to select and upload your media files.

Another option is to use a third-party tool like Gs Richcopy 360 or Goodsync. These tools offer more advanced features like automatic file synchronization and transfer acceleration. To use these tools, you’ll need to first set up a connection between your local computer and Digital Ocean Spaces using the appropriate credentials. Once the connection is established, you can use the software to select and upload your media files to the desired Space.