Merge pull request #995 from evershopcommerce/feat/file-storage-system-setting

Feat/file storage system setting

Author: treoden

packages/evershop/src/components/common/page-builder/fields/ImagePickerField.tsx

@@ -6,6 +6,7 @@ import { Image as EvershopImage } from '@components/common/Image.js';
 import { Button } from '@components/common/ui/Button.js';
 import { ImagePlus, X } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
+import { normalizeImageSrc } from '../normalizeImageSrc.js';
 
 /**
  * Form field wrapper around the admin FileBrowser modal. Exposes a plain
@@ -34,11 +35,6 @@ export interface ImagePickerFieldProps {
   compact?: boolean;
 }
 
-const normalize = (raw: string): string =>
-  // Defensive — older FileBrowser builds emitted `/assets//file.jpg`. Strip
-  // any consecutive slashes (but keep the leading one).
-  (raw || '').replace(/\/{2,}/g, '/');
-
 export function ImagePickerField({
   value,
   onChange,
@@ -80,7 +76,7 @@ export function ImagePickerField({
   }, [value]);
 
   const handleInsert = (file: string) => {
-    const next = normalize(file);
+    const next = normalizeImageSrc(file);
     onChange(next);
     setOpen(false);
     if (onLoadDimensions && next) {

packages/evershop/src/components/common/page-builder/index.ts

@@ -44,6 +44,7 @@ export type { ContentAnchor } from './drawer/AnchorPicker.js';
 
 // Form fields.
 export { ImagePickerField } from './fields/ImagePickerField.js';
+export { normalizeImageSrc } from './normalizeImageSrc.js';
 export {
   ColorSwatchField,
   DEFAULT_SWATCHES

packages/evershop/src/components/common/page-builder/normalizeImageSrc.ts

@@ -0,0 +1,17 @@
+/**
+ * Normalize an image path picked from the file manager.
+ *
+ * Collapses accidental duplicate slashes in plain paths (`/assets//file.jpg`,
+ * emitted by older FileBrowser builds for media-root files) WITHOUT touching
+ * absolute (`https://bucket.s3….com/key`) or protocol-relative (`//cdn…/key`)
+ * URLs: cloud file storage returns full URLs whose scheme slashes must
+ * survive — collapsing them (`https:/…`) makes the storefront image proxy
+ * treat the URL as a local path and 404.
+ */
+export const normalizeImageSrc = (raw: string | null | undefined): string => {
+  const value = raw || '';
+  if (/^(?:[a-z][a-z0-9+.-]*:)?\/\//i.test(value)) {
+    return value;
+  }
+  return value.replace(/\/{2,}/g, '/');
+};

packages/evershop/src/components/common/page-builder/tests/unit/normalizeImageSrc.test.ts

@@ -0,0 +1,45 @@
+import { describe, it, expect } from '@jest/globals';
+import { normalizeImageSrc } from '../../normalizeImageSrc.js';
+
+describe('normalizeImageSrc (file-manager pick normalization)', () => {
+  it('collapses duplicate slashes in local media paths', () => {
+    expect(normalizeImageSrc('/assets//file.jpg')).toBe('/assets/file.jpg');
+    expect(normalizeImageSrc('/assets///a//b.png')).toBe('/assets/a/b.png');
+  });
+
+  it('keeps a normal local path untouched', () => {
+    expect(normalizeImageSrc('/assets/catalog/1/img.jpg')).toBe(
+      '/assets/catalog/1/img.jpg'
+    );
+  });
+
+  it('never touches absolute URLs (cloud storage returns these)', () => {
+    const s3 =
+      'https://my-bucket.s3.ap-southeast-2.amazonaws.com/catalog/img.jpg';
+    expect(normalizeImageSrc(s3)).toBe(s3);
+    const gcs = 'https://storage.googleapis.com/my-bucket/img.jpg';
+    expect(normalizeImageSrc(gcs)).toBe(gcs);
+    const azure = 'https://acct.blob.core.windows.net/media/img.jpg';
+    expect(normalizeImageSrc(azure)).toBe(azure);
+    expect(normalizeImageSrc('http://localhost:9000/bucket/img.jpg')).toBe(
+      'http://localhost:9000/bucket/img.jpg'
+    );
+  });
+
+  it('never touches protocol-relative URLs', () => {
+    expect(normalizeImageSrc('//cdn.example.com/img.jpg')).toBe(
+      '//cdn.example.com/img.jpg'
+    );
+  });
+
+  it('preserves consecutive slashes inside an absolute URL path (valid S3 keys)', () => {
+    const doubled = 'https://bucket.s3.amazonaws.com/folder//img.jpg';
+    expect(normalizeImageSrc(doubled)).toBe(doubled);
+  });
+
+  it('returns an empty string for null/undefined/empty input', () => {
+    expect(normalizeImageSrc('')).toBe('');
+    expect(normalizeImageSrc(null)).toBe('');
+    expect(normalizeImageSrc(undefined)).toBe('');
+  });
+});

packages/evershop/src/lib/util/secureFetch.ts

@@ -5,7 +5,8 @@ const REQUEST_TIMEOUT_MS = 15000;
 /**
  * Modules can contribute additional allowed hosts beyond the env variable — the
  * cms module registers one that derives the active cloud file-storage host
- * (S3 bucket / Azure account / CDN base URL) from configuration, so operators
+ * (S3 bucket / Azure account / GCS / CDN base URL) from configuration, so
+ * operators
  * don't have to duplicate it in `IMAGE_ALLOWED_HOSTS`. Providers run on every
  * check; one that throws is skipped so a misconfigured provider can never take
  * image serving down.

packages/evershop/src/modules/checkout/pages/frontStore/checkoutSuccess/Summary.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import './Summary.scss';
+import { useAppState } from '@components/common/context/app.js';
 import { OrderSummaryItems } from '@components/frontStore/checkout/OrderSummaryItems.js';
 import { OrderTotalSummary } from '@components/frontStore/checkout/OrderTotalSummary.js';
 import { Order } from '@components/frontStore/customer/CustomerContext.jsx';
-import { useAppState } from '@components/common/context/app.js';
 import { _ } from '@evershop/evershop/lib/locale/translate/_';
 
 interface SummaryProps {

packages/evershop/src/modules/cms/bootstrap.ts

@@ -33,8 +33,9 @@ import { getFileStorageImageHosts } from './services/storage/storageConfig.js';
 
 export default (context: { command?: string } = {}) => {
   // The /images proxy automatically allows the host of the active cloud file
-  // storage (S3 bucket / Azure account / CDN base URL) — without this, every
-  // storefront image stored on S3/Azure would be refused by the allowlist.
+  // storage (S3 bucket / Azure account / GCS / CDN base URL) — without this,
+  // every storefront image stored in the cloud would be refused by the
+  // allowlist.
   // The callback runs per check, so it sees settings saved after boot.
   registerAllowedImageHostsProvider(getFileStorageImageHosts);
 
@@ -49,7 +50,7 @@ export default (context: { command?: string } = {}) => {
     getFileStorageImageHosts().length === 0
   ) {
     warning(
-      'IMAGE_ALLOWED_HOSTS is not set. The /images endpoint will not optimize external images — only local media/public/theme images are processed. Set IMAGE_ALLOWED_HOSTS to a comma-separated list of trusted hosts (e.g. "cdn.example.com,images.internal") to allow fetching external images. (When S3/Azure file storage is configured, its host is allowed automatically.)'
+      'IMAGE_ALLOWED_HOSTS is not set. The /images endpoint will not optimize external images — only local media/public/theme images are processed. Set IMAGE_ALLOWED_HOSTS to a comma-separated list of trusted hosts (e.g. "cdn.example.com,images.internal") to allow fetching external images. (When S3/Azure/GCS file storage is configured, its host is allowed automatically.)'
     );
   }
 

packages/evershop/src/modules/cms/components/BannerSetting.tsx

@@ -8,6 +8,7 @@ import { CtaField } from '@components/common/page-builder/fields/CtaField.js';
 import type { CtaValue } from '@components/common/page-builder/fields/CtaField.js';
 import { ImagePickerField } from '@components/common/page-builder/fields/ImagePickerField.js';
 import { MarkdownBodyField } from '@components/common/page-builder/fields/MarkdownBodyField.js';
+import { normalizeImageSrc } from '@components/common/page-builder/normalizeImageSrc.js';
 import { LinkPicker } from '@components/common/page-builder/pickers/LinkPicker.js';
 import { useScopedFormContext } from '@components/common/page-builder/WidgetSettingsScope.js';
 import { Button } from '@components/common/ui/Button.js';
@@ -270,9 +271,7 @@ export default function BannerSetting({ bannerWidget }: BannerSettingProps) {
           <FileBrowser
             isMultiple={false}
             onInsert={(file) => {
-              // Defensive normalization — older FileBrowser builds emitted
-              // `/assets//file.jpg` for media-root images.
-              const normalized = (file || '').replace(/\/{2,}/g, '/');
+              const normalized = normalizeImageSrc(file);
               setValue('settings.src', normalized);
               setOpenFileBrowser(false);
             }}

packages/evershop/src/modules/cms/components/SlideshowSetting.tsx

@@ -1,5 +1,6 @@
 
 import { FileBrowser } from '@components/admin/FileBrowser.js';
+import { normalizeImageSrc } from '@components/common/page-builder/normalizeImageSrc.js';
 import { LinkPicker } from '@components/common/page-builder/pickers/LinkPicker.js';
 import {
   useScopedFieldName,
@@ -550,12 +551,7 @@ export default function SlideshowSetting({
   const handleImagePick = (filePath: string) => {
     if (!imagePickerTarget) return;
     const { kind, slideIndex } = imagePickerTarget;
-    // Defensively collapse duplicate slashes — older FileBrowser builds
-    // emitted `/assets//file.jpg` for files at the media root, which broke
-    // the storefront image lookup. Source bug is fixed in `browFiles.ts`,
-    // but normalize here too so any client still on the old admin doesn't
-    // re-poison the saved path.
-    const normalized = (filePath || '').replace(/\/{2,}/g, '/');
+    const normalized = normalizeImageSrc(filePath);
     if (kind === 'desktop') {
       updateSlide(slideIndex, { image: normalized, width: 0, height: 0 });
       loadImageDimensions(normalized, slideIndex);

packages/evershop/src/modules/cms/pages/admin/systemSetting/FileStorageSetting.tsx

@@ -378,7 +378,7 @@ export default function FileStorageSetting({
                 />
                 <FieldHint>
                   {_(
-                    'Optional CDN (e.g. CloudFront) serving the bucket — lets the bucket stay private. Without it, objects must be publicly readable via a bucket policy.'
+                    'Optional CDN (e.g. CloudFront) serving the bucket — lets the bucket stay private. Without it, objects must be publicly readable via a bucket policy. Example: https://cdn.mystore.com or https://d111abcdef8.cloudfront.net, a CloudFront distribution with this bucket as its origin. Files are served as <this URL>/<file path>, so the domain must point at the bucket root.'
                   )}
                 </FieldHint>
               </>
@@ -453,7 +453,7 @@ export default function FileStorageSetting({
                 />
                 <FieldHint>
                   {_(
-                    'Optional CDN (e.g. Azure CDN / Front Door) serving the container — lets the container stay private.'
+                    'Optional CDN (e.g. Azure CDN / Front Door) serving the container — lets the container stay private. Files are served as <this URL>/<file path> with no container segment added, so either set the CDN origin path to /<container> (example: https://mystore.azureedge.net) or include the container here (example: https://mystore.azureedge.net/media).'
                   )}
                 </FieldHint>
               </>
@@ -524,7 +524,7 @@ export default function FileStorageSetting({
                 />
                 <FieldHint>
                   {_(
-                    'Optional CDN (e.g. Cloud CDN) serving the bucket — lets the bucket stay private. Without it, objects must be publicly readable: grant "allUsers" the Storage Object Viewer role on the bucket (blocked when Public Access Prevention is enforced on your organization).'
+                    'Optional CDN (e.g. Cloud CDN) serving the bucket — lets the bucket stay private. Without it, objects must be publicly readable: grant "allUsers" the Storage Object Viewer role on the bucket (blocked when Public Access Prevention is enforced on your organization). Example: https://cdn.mystore.com, a load balancer domain with this bucket as its backend bucket.'
                   )}
                 </FieldHint>
               </>