@edgestore/react 0.0.0-alpha.12 → 0.0.0-alpha.14

package/dist/contextProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"contextProvider.d.ts","sourceRoot":"","sources":["../src/contextProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAmB,MAAM,mBAAmB,CAAC;AAKrE,KAAK,qBAAqB,CAAC,OAAO,SAAS,SAAS,IAAI;IACtD,SAAS,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACpC;;;OAGG;IACH,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CACjC,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,OAAO,SAAS,SAAS,EAAE,IAAI,CAAC,EAAE;IACxE;;;;;;OAMG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;;kBAUa,MAAM,SAAS;QACzB;;;;;;WAMG;;;;EAgCN"}
+{"version":3,"file":"contextProvider.d.ts","sourceRoot":"","sources":["../src/contextProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAmB,MAAM,mBAAmB,CAAC;AAKrE,KAAK,qBAAqB,CAAC,OAAO,SAAS,SAAS,IAAI;IACtD,SAAS,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACpC;;;OAGG;IACH,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC;CACjC,CAAC;AAEF,wBAAgB,uBAAuB,CAAC,OAAO,SAAS,SAAS,EAAE,IAAI,CAAC,EAAE;IACxE;;;;;;OAMG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;;kBASa,MAAM,SAAS;QACzB;;;;;;WAMG;;;;EAgCN"}

package/dist/createNextProxy.d.ts

@@ -1,26 +1,30 @@
 /// <reference types="react" />
-import { AnyRouter, InferBucketPathKeys, InferMetadataObject } from '@edgestore/server/core';
+import { AnyRouter, InferBucketPathObject, InferMetadataObject } from '@edgestore/server/core';
 import { z } from 'zod';
 export type BucketFunctions<TRouter extends AnyRouter> = {
     [K in keyof TRouter['buckets']]: {
-        upload: (params: z.infer<TRouter['buckets'][K]['_def']['input']> extends object ? {
+        upload: (params: z.infer<TRouter['buckets'][K]['_def']['input']> extends never ? {
             file: File;
-            input: z.infer<TRouter['buckets'][K]['_def']['input']>;
             onProgressChange?: OnProgressChangeHandler;
             options?: UploadOptions;
         } : {
             file: File;
+            input: z.infer<TRouter['buckets'][K]['_def']['input']>;
             onProgressChange?: OnProgressChangeHandler;
             options?: UploadOptions;
-        }) => Promise<{
+        }) => Promise<TRouter['buckets'][K]['_def']['type'] extends 'IMAGE' ? {
+            url: string;
+            thumbnailUrl: string | null;
+            size: number;
+            uploadedAt: Date;
+            metadata: InferMetadataObject<TRouter['buckets'][K]>;
+            path: InferBucketPathObject<TRouter['buckets'][K]>;
+        } : {
             url: string;
-            thumbnailUrl: TRouter['buckets'][K]['_def']['type'] extends 'IMAGE' ? string | null : never;
             size: number;
             uploadedAt: Date;
             metadata: InferMetadataObject<TRouter['buckets'][K]>;
-            path: {
-                [TKey in InferBucketPathKeys<TRouter['buckets'][K]>]: string;
-            };
+            path: InferBucketPathObject<TRouter['buckets'][K]>;
         }>;
         delete: (params: {
             url: string;
@@ -31,6 +35,22 @@ export type BucketFunctions<TRouter extends AnyRouter> = {
 };
 type OnProgressChangeHandler = (progress: number) => void;
 type UploadOptions = {
+    /**
+     * e.g. 'my-file-name.jpg'
+     *
+     * By default, a unique file name will be generated for each upload.
+     * If you want to use a custom file name, you can use this option.
+     * If you use the same file name for multiple uploads, the previous file will be overwritten.
+     * But it might take some time for the CDN cache to be cleared.
+     * So maybe you will keep seeing the old file for a while.
+     *
+     * If you want to replace an existing file immediately leave the `manualFileName` option empty and use the `replaceTargetUrl` option.
+     */
+    manualFileName?: string;
+    /**
+     * Use this to replace an existing file.
+     * It will automatically delete the existing file when the upload is complete.
+     */
     replaceTargetUrl?: string;
 };
 export declare function createNextProxy<TRouter extends AnyRouter>({ apiPath, uploadingCountRef, maxConcurrentUploads, }: {

package/dist/createNextProxy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createNextProxy.d.ts","sourceRoot":"","sources":["../src/createNextProxy.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,SAAS,EACT,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,MAAM,MAAM,eAAe,CAAC,OAAO,SAAS,SAAS,IAAI;KACtD,CAAC,IAAI,MAAM,OAAO,CAAC,SAAS,CAAC,GAAG;QAC/B,MAAM,EAAE,CACN,MAAM,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,MAAM,GAClE;YACE,IAAI,EAAE,IAAI,CAAC;YACX,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;YACvD,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;YAC3C,OAAO,CAAC,EAAE,aAAa,CAAC;SACzB,GACD;YACE,IAAI,EAAE,IAAI,CAAC;YACX,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;YAC3C,OAAO,CAAC,EAAE,aAAa,CAAC;SACzB,KACF,OAAO,CAAC;YACX,GAAG,EAAE,MAAM,CAAC;YACZ,YAAY,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,SAAS,OAAO,GAC/D,MAAM,GAAG,IAAI,GACb,KAAK,CAAC;YACV,IAAI,EAAE,MAAM,CAAC;YACb,UAAU,EAAE,IAAI,CAAC;YACjB,QAAQ,EAAE,mBAAmB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACrD,IAAI,EAAE;iBACH,IAAI,IAAI,mBAAmB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM;aAC7D,CAAC;SACH,CAAC,CAAC;QACH,MAAM,EAAE,CAAC,MAAM,EAAE;YAAE,GAAG,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO,CAAC;YAC3C,OAAO,EAAE,OAAO,CAAC;SAClB,CAAC,CAAC;KACJ;CACF,CAAC;AAEF,KAAK,uBAAuB,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;AAE1D,KAAK,aAAa,GAAG;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,wBAAgB,eAAe,CAAC,OAAO,SAAS,SAAS,EAAE,EACzD,OAAO,EACP,iBAAiB,EACjB,oBAAwB,GACzB,EAAE;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAClD,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,4BAiCA"}
+{"version":3,"file":"createNextProxy.d.ts","sourceRoot":"","sources":["../src/createNextProxy.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,SAAS,EACT,qBAAqB,EACrB,mBAAmB,EACpB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,MAAM,MAAM,eAAe,CAAC,OAAO,SAAS,SAAS,IAAI;KACtD,CAAC,IAAI,MAAM,OAAO,CAAC,SAAS,CAAC,GAAG;QAC/B,MAAM,EAAE,CACN,MAAM,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,SAAS,KAAK,GACjE;YACE,IAAI,EAAE,IAAI,CAAC;YACX,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;YAC3C,OAAO,CAAC,EAAE,aAAa,CAAC;SACzB,GACD;YACE,IAAI,EAAE,IAAI,CAAC;YACX,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;YACvD,gBAAgB,CAAC,EAAE,uBAAuB,CAAC;YAC3C,OAAO,CAAC,EAAE,aAAa,CAAC;SACzB,KACF,OAAO,CACV,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,SAAS,OAAO,GACjD;YACE,GAAG,EAAE,MAAM,CAAC;YACZ,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;YAC5B,IAAI,EAAE,MAAM,CAAC;YACb,UAAU,EAAE,IAAI,CAAC;YACjB,QAAQ,EAAE,mBAAmB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACrD,IAAI,EAAE,qBAAqB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SACpD,GACD;YACE,GAAG,EAAE,MAAM,CAAC;YACZ,IAAI,EAAE,MAAM,CAAC;YACb,UAAU,EAAE,IAAI,CAAC;YACjB,QAAQ,EAAE,mBAAmB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACrD,IAAI,EAAE,qBAAqB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SACpD,CACN,CAAC;QACF,MAAM,EAAE,CAAC,MAAM,EAAE;YAAE,GAAG,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO,CAAC;YAC3C,OAAO,EAAE,OAAO,CAAC;SAClB,CAAC,CAAC;KACJ;CACF,CAAC;AAEF,KAAK,uBAAuB,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;AAE1D,KAAK,aAAa,GAAG;IACnB;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B,CAAC;AAEF,wBAAgB,eAAe,CAAC,OAAO,SAAS,SAAS,EAAE,EACzD,OAAO,EACP,iBAAiB,EACjB,oBAAwB,GACzB,EAAE;IACD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,KAAK,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAClD,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B,4BAiCA"}

package/dist/index.js

@@ -74,6 +74,7 @@ async function uploadFile({ file, input, onProgressChange, options }, { apiPath,
                     extension: file.name.split('.').pop(),
                     type: file.type,
                     size: file.size,
+                    fileName: options?.manualFileName,
                     replaceTargetUrl: options?.replaceTargetUrl
                 }
             }),
@@ -88,8 +89,8 @@ async function uploadFile({ file, input, onProgressChange, options }, { apiPath,
         // Upload the file to the signed URL and get the progress
         await uploadFileInner(file, json.uploadUrl, onProgressChange);
         return {
-            url: json.accessUrl,
-            thumbnailUrl: json.thumbnailUrl,
+            url: getUrl(json.accessUrl, apiPath),
+            thumbnailUrl: json.thumbnailUrl ? getUrl(json.thumbnailUrl, apiPath) : null,
             size: json.size,
             uploadedAt: new Date(json.uploadedAt),
             path: json.path,
@@ -100,6 +101,21 @@ async function uploadFile({ file, input, onProgressChange, options }, { apiPath,
         throw e;
     }
 }
+/**
+ * Protected files need third-party cookies to work.
+ * Since third party cookies doesn't work on localhost,
+ * we need to proxy the file through the server.
+ */ function getUrl(url, apiPath) {
+    if (process.env.NODE_ENV === 'development' && !url.includes('/_public/')) {
+        const proxyUrl = new URL(window.location.origin);
+        proxyUrl.pathname = `${apiPath}/proxy-file`;
+        proxyUrl.search = new URLSearchParams({
+            url
+        }).toString();
+        return proxyUrl.toString();
+    }
+    return url;
+}
 const uploadFileInner = async (file, uploadUrl, onProgressChange)=>{
     const promise = new Promise((resolve, reject)=>{
         const request = new XMLHttpRequest();
@@ -146,11 +162,10 @@ async function deleteFile({ url }, { apiPath, bucketName }) {
     };
 }
 
-const DEFAULT_BASE_URL = process.env.NEXT_PUBLIC_EDGE_STORE_BASE_URL ?? 'https://files.edge-store.com';
+const DEFAULT_BASE_URL = process.env.NEXT_PUBLIC_EDGE_STORE_BASE_URL ?? 'https://files.edgestore.dev';
 function createEdgeStoreProvider(opts) {
     const EdgeStoreContext = /*#__PURE__*/ React__namespace.createContext(undefined);
-    const EdgeStoreProvider = ({ // TODO: Add basePath when custom domain is supported
-    children, basePath })=>{
+    const EdgeStoreProvider = ({ children, basePath })=>{
         return EdgeStoreProviderInner({
             children,
             context: EdgeStoreContext,
@@ -165,7 +180,7 @@ function createEdgeStoreProvider(opts) {
         // @ts-expect-error - We know that the context value should not be undefined
         const value = React__namespace.useContext(EdgeStoreContext);
         if (!value && process.env.NODE_ENV !== 'production') {
-            throw new Error('[edge-store]: `useEdgeStore` must be wrapped in a <EdgeStoreProvider />');
+            throw new Error('[edgestore]: `useEdgeStore` must be wrapped in a <EdgeStoreProvider />');
         }
         return value;
     }
@@ -193,11 +208,12 @@ function EdgeStoreProviderInner({ children, context, basePath, maxConcurrentUplo
                 });
             }
         });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     function getSrc(url) {
         if (// in production we use cookies, so we don't need a token
         process.env.NODE_ENV === 'production' || // public urls don't need a token
-        // e.g. https://files.edge-store.com/project/bucket/_public/...
+        // e.g. https://files.edgestore.dev/project/bucket/_public/...
         url.match(/^https?:\/\/[^\/]+\/[^\/]+\/[^\/]+\/_public\/.+/)) {
             return `${url}`;
         } else {

package/dist/index.mjs

@@ -50,6 +50,7 @@ async function uploadFile({ file, input, onProgressChange, options }, { apiPath,
                     extension: file.name.split('.').pop(),
                     type: file.type,
                     size: file.size,
+                    fileName: options?.manualFileName,
                     replaceTargetUrl: options?.replaceTargetUrl
                 }
             }),
@@ -64,8 +65,8 @@ async function uploadFile({ file, input, onProgressChange, options }, { apiPath,
         // Upload the file to the signed URL and get the progress
         await uploadFileInner(file, json.uploadUrl, onProgressChange);
         return {
-            url: json.accessUrl,
-            thumbnailUrl: json.thumbnailUrl,
+            url: getUrl(json.accessUrl, apiPath),
+            thumbnailUrl: json.thumbnailUrl ? getUrl(json.thumbnailUrl, apiPath) : null,
             size: json.size,
             uploadedAt: new Date(json.uploadedAt),
             path: json.path,
@@ -76,6 +77,21 @@ async function uploadFile({ file, input, onProgressChange, options }, { apiPath,
         throw e;
     }
 }
+/**
+ * Protected files need third-party cookies to work.
+ * Since third party cookies doesn't work on localhost,
+ * we need to proxy the file through the server.
+ */ function getUrl(url, apiPath) {
+    if (process.env.NODE_ENV === 'development' && !url.includes('/_public/')) {
+        const proxyUrl = new URL(window.location.origin);
+        proxyUrl.pathname = `${apiPath}/proxy-file`;
+        proxyUrl.search = new URLSearchParams({
+            url
+        }).toString();
+        return proxyUrl.toString();
+    }
+    return url;
+}
 const uploadFileInner = async (file, uploadUrl, onProgressChange)=>{
     const promise = new Promise((resolve, reject)=>{
         const request = new XMLHttpRequest();
@@ -122,11 +138,10 @@ async function deleteFile({ url }, { apiPath, bucketName }) {
     };
 }
 
-const DEFAULT_BASE_URL = process.env.NEXT_PUBLIC_EDGE_STORE_BASE_URL ?? 'https://files.edge-store.com';
+const DEFAULT_BASE_URL = process.env.NEXT_PUBLIC_EDGE_STORE_BASE_URL ?? 'https://files.edgestore.dev';
 function createEdgeStoreProvider(opts) {
     const EdgeStoreContext = /*#__PURE__*/ React.createContext(undefined);
-    const EdgeStoreProvider = ({ // TODO: Add basePath when custom domain is supported
-    children, basePath })=>{
+    const EdgeStoreProvider = ({ children, basePath })=>{
         return EdgeStoreProviderInner({
             children,
             context: EdgeStoreContext,
@@ -141,7 +156,7 @@ function createEdgeStoreProvider(opts) {
         // @ts-expect-error - We know that the context value should not be undefined
         const value = React.useContext(EdgeStoreContext);
         if (!value && process.env.NODE_ENV !== 'production') {
-            throw new Error('[edge-store]: `useEdgeStore` must be wrapped in a <EdgeStoreProvider />');
+            throw new Error('[edgestore]: `useEdgeStore` must be wrapped in a <EdgeStoreProvider />');
         }
         return value;
     }
@@ -169,11 +184,12 @@ function EdgeStoreProviderInner({ children, context, basePath, maxConcurrentUplo
                 });
             }
         });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     function getSrc(url) {
         if (// in production we use cookies, so we don't need a token
         process.env.NODE_ENV === 'production' || // public urls don't need a token
-        // e.g. https://files.edge-store.com/project/bucket/_public/...
+        // e.g. https://files.edgestore.dev/project/bucket/_public/...
         url.match(/^https?:\/\/[^\/]+\/[^\/]+\/[^\/]+\/_public\/.+/)) {
             return `${url}`;
         } else {

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@edgestore/react",
-  "version": "0.0.0-alpha.12",
-  "description": "Image Handling for React/Next.js",
-  "homepage": "https://edge-store.com",
-  "repository": "https://github.com/edgestorejs/edge-store.git",
+  "version": "0.0.0-alpha.14",
+  "description": "The best DX for uploading files from your Next.js app",
+  "homepage": "https://edgestore.dev",
+  "repository": "https://github.com/edgestorejs/edgestore.git",
   "author": "Ravi <me@ravi.com>",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -12,6 +12,8 @@
     "react",
     "nodejs",
     "nextjs",
+    "upload",
+    "file",
     "image",
     "cdn",
     "edgestore",
@@ -52,14 +54,14 @@
     "uuid": "^9.0.0"
   },
   "peerDependencies": {
-    "@edgestore/server": "0.0.0-alpha.12",
+    "@edgestore/server": "0.0.0-alpha.14",
     "next": "*",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "zod": ">=3.0.0"
   },
   "devDependencies": {
-    "@edgestore/server": "0.0.0-alpha.12",
+    "@edgestore/server": "0.0.0-alpha.14",
     "@types/cookie": "^0.5.1",
     "@types/node": "^18.11.18",
     "@types/uuid": "^9.0.1",
@@ -69,5 +71,5 @@
     "typescript": "^5.1.6",
     "zod": "^3.21.4"
   },
-  "gitHead": "bec47f77e223a231f5e04070aa8da6a609838e6b"
+  "gitHead": "6e0044e7fcb252014e5a4fc9257d54e897f42b84"
 }

package/src/contextProvider.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { BucketFunctions, createNextProxy } from './createNextProxy';
 
 const DEFAULT_BASE_URL =
-  process.env.NEXT_PUBLIC_EDGE_STORE_BASE_URL ?? 'https://files.edge-store.com';
+  process.env.NEXT_PUBLIC_EDGE_STORE_BASE_URL ?? 'https://files.edgestore.dev';
 
 type EdgeStoreContextValue<TRouter extends AnyRouter> = {
   edgestore: BucketFunctions<TRouter>;
@@ -29,7 +29,6 @@ export function createEdgeStoreProvider<TRouter extends AnyRouter>(opts?: {
   >(undefined);
 
   const EdgeStoreProvider = ({
-    // TODO: Add basePath when custom domain is supported
     children,
     basePath,
   }: {
@@ -61,7 +60,7 @@ export function createEdgeStoreProvider<TRouter extends AnyRouter>(opts?: {
       React.useContext(EdgeStoreContext);
     if (!value && process.env.NODE_ENV !== 'production') {
       throw new Error(
-        '[edge-store]: `useEdgeStore` must be wrapped in a <EdgeStoreProvider />',
+        '[edgestore]: `useEdgeStore` must be wrapped in a <EdgeStoreProvider />',
       );
     }
 
@@ -103,6 +102,7 @@ function EdgeStoreProviderInner<TRouter extends AnyRouter>({
         });
       }
     });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   function getSrc(url: string) {
@@ -110,7 +110,7 @@ function EdgeStoreProviderInner<TRouter extends AnyRouter>({
       // in production we use cookies, so we don't need a token
       process.env.NODE_ENV === 'production' ||
       // public urls don't need a token
-      // e.g. https://files.edge-store.com/project/bucket/_public/...
+      // e.g. https://files.edgestore.dev/project/bucket/_public/...
       url.match(/^https?:\/\/[^\/]+\/[^\/]+\/[^\/]+\/_public\/.+/)
     ) {
       return `${url}`;

package/src/createNextProxy.ts

@@ -1,6 +1,6 @@
 import {
   AnyRouter,
-  InferBucketPathKeys,
+  InferBucketPathObject,
   InferMetadataObject,
 } from '@edgestore/server/core';
 import { z } from 'zod';
@@ -9,30 +9,36 @@ import EdgeStoreError from './libs/errors/EdgeStoreError';
 export type BucketFunctions<TRouter extends AnyRouter> = {
   [K in keyof TRouter['buckets']]: {
     upload: (
-      params: z.infer<TRouter['buckets'][K]['_def']['input']> extends object
+      params: z.infer<TRouter['buckets'][K]['_def']['input']> extends never
         ? {
             file: File;
-            input: z.infer<TRouter['buckets'][K]['_def']['input']>;
             onProgressChange?: OnProgressChangeHandler;
             options?: UploadOptions;
           }
         : {
             file: File;
+            input: z.infer<TRouter['buckets'][K]['_def']['input']>;
             onProgressChange?: OnProgressChangeHandler;
             options?: UploadOptions;
           },
-    ) => Promise<{
-      url: string;
-      thumbnailUrl: TRouter['buckets'][K]['_def']['type'] extends 'IMAGE'
-        ? string | null
-        : never;
-      size: number;
-      uploadedAt: Date;
-      metadata: InferMetadataObject<TRouter['buckets'][K]>;
-      path: {
-        [TKey in InferBucketPathKeys<TRouter['buckets'][K]>]: string;
-      };
-    }>;
+    ) => Promise<
+      TRouter['buckets'][K]['_def']['type'] extends 'IMAGE'
+        ? {
+            url: string;
+            thumbnailUrl: string | null;
+            size: number;
+            uploadedAt: Date;
+            metadata: InferMetadataObject<TRouter['buckets'][K]>;
+            path: InferBucketPathObject<TRouter['buckets'][K]>;
+          }
+        : {
+            url: string;
+            size: number;
+            uploadedAt: Date;
+            metadata: InferMetadataObject<TRouter['buckets'][K]>;
+            path: InferBucketPathObject<TRouter['buckets'][K]>;
+          }
+    >;
     delete: (params: { url: string }) => Promise<{
       success: boolean;
     }>;
@@ -42,6 +48,22 @@ export type BucketFunctions<TRouter extends AnyRouter> = {
 type OnProgressChangeHandler = (progress: number) => void;
 
 type UploadOptions = {
+  /**
+   * e.g. 'my-file-name.jpg'
+   *
+   * By default, a unique file name will be generated for each upload.
+   * If you want to use a custom file name, you can use this option.
+   * If you use the same file name for multiple uploads, the previous file will be overwritten.
+   * But it might take some time for the CDN cache to be cleared.
+   * So maybe you will keep seeing the old file for a while.
+   *
+   * If you want to replace an existing file immediately leave the `manualFileName` option empty and use the `replaceTargetUrl` option.
+   */
+  manualFileName?: string;
+  /**
+   * Use this to replace an existing file.
+   * It will automatically delete the existing file when the upload is complete.
+   */
   replaceTargetUrl?: string;
 };
 
@@ -119,6 +141,7 @@ async function uploadFile(
           extension: file.name.split('.').pop(),
           type: file.type,
           size: file.size,
+          fileName: options?.manualFileName,
           replaceTargetUrl: options?.replaceTargetUrl,
         },
       }),
@@ -133,8 +156,10 @@ async function uploadFile(
     // Upload the file to the signed URL and get the progress
     await uploadFileInner(file, json.uploadUrl, onProgressChange);
     return {
-      url: json.accessUrl,
-      thumbnailUrl: json.thumbnailUrl,
+      url: getUrl(json.accessUrl, apiPath),
+      thumbnailUrl: json.thumbnailUrl
+        ? getUrl(json.thumbnailUrl, apiPath)
+        : null,
       size: json.size,
       uploadedAt: new Date(json.uploadedAt),
       path: json.path,
@@ -146,6 +171,23 @@ async function uploadFile(
   }
 }
 
+/**
+ * Protected files need third-party cookies to work.
+ * Since third party cookies doesn't work on localhost,
+ * we need to proxy the file through the server.
+ */
+function getUrl(url: string, apiPath: string) {
+  if (process.env.NODE_ENV === 'development' && !url.includes('/_public/')) {
+    const proxyUrl = new URL(window.location.origin);
+    proxyUrl.pathname = `${apiPath}/proxy-file`;
+    proxyUrl.search = new URLSearchParams({
+      url,
+    }).toString();
+    return proxyUrl.toString();
+  }
+  return url;
+}
+
 const uploadFileInner = async (
   file: File,
   uploadUrl: string,