[migrate] replace AWS S3 provider with CloudFlare R2 for uploading (fix #1)

Author: TechQuery

README.md

@@ -21,7 +21,7 @@ Strapi comes with a full featured [Command Line Interface][1] (CLI) which lets y
 ### Back-end
 
 1.  [Swagger document][11]
-2.  [AWS S3 uploader][12] (with CloudFlare R2 compatibility)
+2.  [CloudFlare R2 uploader][12]
 
 ### Front-end
 
@@ -147,7 +147,7 @@ Feel free to check out the [Strapi GitHub repository][34]. Your feedback and con
 [9]: https://www.docker.com/
 [10]: https://github.com/features/actions
 [11]: https://github.com/strapi/strapi/tree/develop/packages/plugins/documentation
-[12]: https://github.com/strapi/strapi/tree/main/packages/providers/upload-aws-s3
+[12]: https://github.com/trieb-work/strapi-provider-cloudflare-r2
 [13]: https://github.com/strapi/strapi/tree/develop/packages/plugins/color-picker
 [14]: https://github.com/Zaydme/strapi-plugin-multi-select
 [15]: https://github.com/Arshiash80/strapi-plugin-iconhub

config/middlewares.ts

@@ -1,48 +1,55 @@
-export default ({ env }) => [
-  'strapi::logger',
-  'strapi::errors',
-  {
-    name: 'strapi::security',
-    config: {
-      contentSecurityPolicy: {
-        useDefaults: true,
-        directives: {
-          'connect-src': ["'self'", 'https:'],
-          'script-src': [
-            "'self'",
-            'unsafe-inline',
-            'https://*.basemaps.cartocdn.com',
-            'https://cdn.ckeditor.com',
-          ],
-          'img-src': [
-            "'self'",
-            'data:',
-            'blob:',
-            'market-assets.strapi.io',
-            'your_id.r2.cloudflarestorage.com',
-            'https://tile.openstreetmap.org',
-            'https://*.tile.openstreetmap.org',
-            'https://*.basemaps.cartocdn.com',
-          ],
-          'media-src': [
-            "'self'",
-            'data:',
-            'blob:',
-            'market-assets.strapi.io',
-            'https://*.tile.openstreetmap.org',
-            'https://unpkg.com/leaflet@1.9.4/dist/images/',
-            'https://*.basemaps.cartocdn.com',
-            new URL(env('STORAGE_URL'), 'http://localhost:1337').origin,
-          ],
+export default ({ env }) => {
+  const OS_CDN_HOST = new URL(
+    env('CLOUDFLARE_PUBLIC_ACCESS_URL'),
+    'http://localhost:1337',
+  ).origin;
+
+  return [
+    'strapi::logger',
+    'strapi::errors',
+    {
+      name: 'strapi::security',
+      config: {
+        contentSecurityPolicy: {
+          useDefaults: true,
+          directives: {
+            'connect-src': ["'self'", 'https:'],
+            'script-src': [
+              "'self'",
+              'unsafe-inline',
+              'https://*.basemaps.cartocdn.com',
+              'https://cdn.ckeditor.com',
+            ],
+            'img-src': [
+              "'self'",
+              'data:',
+              'blob:',
+              'market-assets.strapi.io',
+              OS_CDN_HOST,
+              'https://tile.openstreetmap.org',
+              'https://*.tile.openstreetmap.org',
+              'https://*.basemaps.cartocdn.com',
+            ],
+            'media-src': [
+              "'self'",
+              'data:',
+              'blob:',
+              'market-assets.strapi.io',
+              'https://*.tile.openstreetmap.org',
+              'https://unpkg.com/leaflet@1.9.4/dist/images/',
+              'https://*.basemaps.cartocdn.com',
+              OS_CDN_HOST,
+            ],
+          },
         },
       },
     },
-  },
-  'strapi::cors',
-  'strapi::poweredBy',
-  'strapi::query',
-  'strapi::body',
-  'strapi::session',
-  'strapi::favicon',
-  'strapi::public',
-];
+    'strapi::cors',
+    'strapi::poweredBy',
+    'strapi::query',
+    'strapi::body',
+    'strapi::session',
+    'strapi::favicon',
+    'strapi::public',
+  ];
+};

config/plugins.ts

@@ -1,17 +1,15 @@
 export default ({ env }) => ({
   upload: {
     config: {
-      provider: 'aws-s3',
+      provider: 'strapi-provider-cloudflare-r2',
       providerOptions: {
-        credentials: {
-          accessKeyId: env('CLOUDFLARE_ACCESS_KEY_ID'),
-          secretAccessKey: env('CLOUDFLARE_ACCESS_SECRET'),
-        },
-        region: 'auto',
+        accessKeyId: env('CLOUDFLARE_ACCESS_KEY_ID'),
+        secretAccessKey: env('CLOUDFLARE_ACCESS_SECRET'),
         endpoint: env('CLOUDFLARE_ENDPOINT'),
         params: {
           Bucket: env('CLOUDFLARE_BUCKET'),
         },
+        cloudflarePublicAccessUrl: env('CLOUDFLARE_PUBLIC_ACCESS_URL'),
       },
     },
   },

package.json

@@ -13,7 +13,6 @@
     "@strapi/plugin-color-picker": "~5.15.0",
     "@strapi/plugin-documentation": "~5.15.0",
     "@strapi/plugin-users-permissions": "~5.15.0",
-    "@strapi/provider-upload-aws-s3": "^5.15.0",
     "@strapi/strapi": "~5.15.0",
     "better-sqlite3": "^11.10.0",
     "cross-env": "^7.0.3",
@@ -24,6 +23,7 @@
     "react-router-dom": "^6.30.0",
     "strapi-location-picker": "^0.0.1",
     "strapi-plugin-multi-select": "^2.1.1",
+    "strapi-provider-cloudflare-r2": "^0.3.0",
     "styled-components": "^6.1.18"
   },
   "devDependencies": {