@edgestore/react 0.1.1 → 0.1.3-alpha.0

package/README.md

@@ -144,7 +144,7 @@ export default function Page() {
 By passing the `replaceTargetUrl` option, you can replace an existing file with a new one.
 It will automatically delete the old file after the upload is complete.
 
-You can also just upload the file using the same file name, but in that case, you might still see the old file for a while becasue of the CDN cache.
+You can also just upload the file using the same file name, but in that case, you might still see the old file for a while because of the CDN cache.
 
 ```tsx
 const res = await edgestore.publicFiles.upload({

package/dist/contextProvider.d.ts

@@ -4,10 +4,12 @@ import { type BucketFunctions } from './createNextProxy';
 type EdgeStoreContextValue<TRouter extends AnyRouter> = {
     edgestore: BucketFunctions<TRouter>;
     /**
-     * In development, if this is a protected file, this function will add the token as a query param to the url.
-     * This is needed because third party cookies don't work with http urls.
+     * This will re-run the Edge Store initialization process,
+     * which will run the `createContext` function again.
+     *
+     * Can be used after a sign-in or sign-out, for example.
      */
-    getSrc: (url: string) => string;
+    reset: () => Promise<void>;
 };
 export declare function createEdgeStoreProvider<TRouter extends AnyRouter>(opts?: {
     /**

package/dist/contextProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"contextProvider.d.ts","sourceRoot":"","sources":["../src/contextProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAK1E,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"}
+{"version":3,"file":"contextProvider.d.ts","sourceRoot":"","sources":["../src/contextProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,KAAK,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAK1E,KAAK,qBAAqB,CAAC,OAAO,SAAS,SAAS,IAAI;IACtD,SAAS,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACpC;;;;;OAKG;IACH,KAAK,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5B,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

@@ -26,6 +26,11 @@ export type BucketFunctions<TRouter extends AnyRouter> = {
             metadata: InferMetadataObject<TRouter['buckets'][K]>;
             path: InferBucketPathObject<TRouter['buckets'][K]>;
         }>;
+        confirmUpload: (params: {
+            url: string;
+        }) => Promise<{
+            success: boolean;
+        }>;
         delete: (params: {
             url: string;
         }) => Promise<{
@@ -52,6 +57,16 @@ type UploadOptions = {
      * It will automatically delete the existing file when the upload is complete.
      */
     replaceTargetUrl?: string;
+    /**
+     * If true, the file needs to be confirmed by using the `confirmUpload` function.
+     * If the file is not confirmed within 24 hours, it will be deleted.
+     *
+     * This is useful for pages where the file is uploaded as soon as it is selected,
+     * but the user can leave the page without submitting the form.
+     *
+     * This avoids unnecessary zombie files in the bucket.
+     */
+    temporary?: boolean;
 };
 export declare function createNextProxy<TRouter extends AnyRouter>({ apiPath, uploadingCountRef, maxConcurrentUploads, }: {
     apiPath: string;

package/dist/createNextProxy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createNextProxy.d.ts","sourceRoot":"","sources":["../src/createNextProxy.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACzB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,CAAC;AAG7B,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"}
+{"version":3,"file":"createNextProxy.d.ts","sourceRoot":"","sources":["../src/createNextProxy.ts"],"names":[],"mappings":";AACA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACzB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,CAAC;AAG7B,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,aAAa,EAAE,CAAC,MAAM,EAAE;YAAE,GAAG,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO,CAAC;YAClD,OAAO,EAAE,OAAO,CAAC;SAClB,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;;;;;;;;;;OAUG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,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,4BAuCA"}

package/dist/index.js

@@ -51,6 +51,12 @@ function createNextProxy({ apiPath, uploadingCountRef, maxConcurrentUploads = 5
                         uploadingCountRef.current--;
                     }
                 },
+                confirmUpload: async (params)=>{
+                    return await confirmUpload(params, {
+                        bucketName: bucketName,
+                        apiPath
+                    });
+                },
                 delete: async (params)=>{
                     return await deleteFile(params, {
                         bucketName: bucketName,
@@ -75,7 +81,8 @@ async function uploadFile({ file, input, onProgressChange, options }, { apiPath,
                     type: file.type,
                     size: file.size,
                     fileName: options?.manualFileName,
-                    replaceTargetUrl: options?.replaceTargetUrl
+                    replaceTargetUrl: options?.replaceTargetUrl,
+                    temporary: options?.temporary
                 }
             }),
             headers: {
@@ -83,11 +90,21 @@ async function uploadFile({ file, input, onProgressChange, options }, { apiPath,
             }
         });
         const json = await res.json();
-        if (!json.uploadUrl) {
+        if ('multipart' in json) {
+            await multipartUpload({
+                bucketName,
+                multipartInfo: json.multipart,
+                onProgressChange,
+                file,
+                apiPath
+            });
+        } else if ('uploadUrl' in json) {
+            // Single part upload
+            // Upload the file to the signed URL and get the progress
+            await uploadFileInner(file, json.uploadUrl, onProgressChange);
+        } else {
             throw new EdgeStoreError('An error occurred');
         }
-        // Upload the file to the signed URL and get the progress
-        await uploadFileInner(file, json.uploadUrl, onProgressChange);
         return {
             url: getUrl(json.accessUrl, apiPath),
             thumbnailUrl: json.thumbnailUrl ? getUrl(json.thumbnailUrl, apiPath) : null,
@@ -137,12 +154,86 @@ const uploadFileInner = async (file, uploadUrl, onProgressChange)=>{
             reject(new Error('File upload aborted'));
         });
         request.addEventListener('loadend', ()=>{
-            resolve();
+            // Return the ETag header (needed to complete multipart upload)
+            resolve(request.getResponseHeader('ETag'));
         });
         request.send(file);
     });
     return promise;
 };
+async function multipartUpload(params) {
+    const { bucketName, multipartInfo, onProgressChange, file, apiPath } = params;
+    const { partSize, parts, totalParts, uploadId, key } = multipartInfo;
+    const uploadingParts = [];
+    const uploadPart = async (params)=>{
+        const { part, chunk } = params;
+        const { uploadUrl } = part;
+        const eTag = await uploadFileInner(chunk, uploadUrl, (progress)=>{
+            const uploadingPart = uploadingParts.find((p)=>p.partNumber === part.partNumber);
+            if (uploadingPart) {
+                uploadingPart.progress = progress;
+            } else {
+                uploadingParts.push({
+                    partNumber: part.partNumber,
+                    progress
+                });
+            }
+            const totalProgress = Math.round(uploadingParts.reduce((acc, p)=>acc + p.progress * 100, 0) / totalParts) / 100;
+            onProgressChange?.(totalProgress);
+        });
+        if (!eTag) {
+            throw new EdgeStoreError('Could not get ETag from multipart response');
+        }
+        return {
+            partNumber: part.partNumber,
+            eTag
+        };
+    };
+    // Upload the parts in parallel
+    const completedParts = await queuedPromises({
+        items: parts.map((part)=>({
+                part,
+                chunk: file.slice((part.partNumber - 1) * partSize, part.partNumber * partSize)
+            })),
+        fn: uploadPart,
+        maxParallel: 5,
+        maxRetries: 10
+    });
+    // Complete multipart upload
+    const res = await fetch(`${apiPath}/complete-multipart-upload`, {
+        method: 'POST',
+        body: JSON.stringify({
+            bucketName,
+            uploadId,
+            key,
+            parts: completedParts
+        }),
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    });
+    if (!res.ok) {
+        throw new EdgeStoreError('Multi-part upload failed');
+    }
+}
+async function confirmUpload({ url }, { apiPath, bucketName }) {
+    const res = await fetch(`${apiPath}/confirm-upload`, {
+        method: 'POST',
+        body: JSON.stringify({
+            url,
+            bucketName
+        }),
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    });
+    if (!res.ok) {
+        throw new EdgeStoreError('An error occurred');
+    }
+    return {
+        success: true
+    };
+}
 async function deleteFile({ url }, { apiPath, bucketName }) {
     const res = await fetch(`${apiPath}/delete-file`, {
         method: 'POST',
@@ -161,6 +252,43 @@ async function deleteFile({ url }, { apiPath, bucketName }) {
         success: true
     };
 }
+async function queuedPromises({ items, fn, maxParallel, maxRetries = 0 }) {
+    const results = new Array(items.length);
+    const executeWithRetry = async (func, retries)=>{
+        try {
+            return await func();
+        } catch (error) {
+            if (retries > 0) {
+                await new Promise((resolve)=>setTimeout(resolve, 5000));
+                return executeWithRetry(func, retries - 1);
+            } else {
+                throw error;
+            }
+        }
+    };
+    const semaphore = {
+        count: maxParallel,
+        async wait () {
+            // If we've reached our maximum concurrency or it's the last item, wait
+            while(this.count <= 0)await new Promise((resolve)=>setTimeout(resolve, 500));
+            this.count--;
+        },
+        signal () {
+            this.count++;
+        }
+    };
+    const tasks = items.map((item, i)=>(async ()=>{
+            await semaphore.wait();
+            try {
+                const result = await executeWithRetry(()=>fn(item), maxRetries);
+                results[i] = result;
+            } finally{
+                semaphore.signal();
+            }
+        })());
+    await Promise.all(tasks);
+    return results;
+}
 
 const DEFAULT_BASE_URL = process.env.NEXT_PUBLIC_EDGE_STORE_BASE_URL ?? 'https://files.edgestore.dev';
 function createEdgeStoreProvider(opts) {
@@ -191,38 +319,28 @@ function createEdgeStoreProvider(opts) {
 }
 function EdgeStoreProviderInner({ children, context, basePath, maxConcurrentUploads }) {
     const apiPath = basePath ? `${basePath}` : '/api/edgestore';
-    const [token, setToken] = React__namespace.useState(null);
     const uploadingCountRef = React__namespace.useRef(0);
     React__namespace.useEffect(()=>{
-        void fetch(`${apiPath}/init`, {
-            method: 'POST'
-        }).then(async (res)=>{
-            if (res.ok) {
-                const json = await res.json();
-                setToken(json.token);
-                await fetch(`${DEFAULT_BASE_URL}/_init`, {
-                    method: 'GET',
-                    headers: {
-                        'x-edgestore-token': json.token
-                    }
-                });
-            }
-        });
+        void init();
     // 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.edgestore.dev/project/bucket/_public/...
-        url.match(/^https?:\/\/[^\/]+\/[^\/]+\/[^\/]+\/_public\/.+/)) {
-            return `${url}`;
-        } else {
-            // in development, third party cookies don't work, so we need to pass the token as a query param
-            const uri = new URL(url);
-            uri.searchParams.set('token', token ?? '');
-            return `${uri}`;
+    async function init() {
+        const res = await fetch(`${apiPath}/init`, {
+            method: 'POST'
+        });
+        if (res.ok) {
+            const json = await res.json();
+            await fetch(`${DEFAULT_BASE_URL}/_init`, {
+                method: 'GET',
+                headers: {
+                    'x-edgestore-token': json.token
+                }
+            });
         }
     }
+    async function reset() {
+        await init();
+    }
     return /*#__PURE__*/ React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/ React__namespace.createElement(context.Provider, {
         value: {
             edgestore: createNextProxy({
@@ -230,7 +348,7 @@ function EdgeStoreProviderInner({ children, context, basePath, maxConcurrentUplo
                 uploadingCountRef,
                 maxConcurrentUploads
             }),
-            getSrc
+            reset
         }
     }, children));
 }

package/dist/index.mjs

@@ -27,6 +27,12 @@ function createNextProxy({ apiPath, uploadingCountRef, maxConcurrentUploads = 5
                         uploadingCountRef.current--;
                     }
                 },
+                confirmUpload: async (params)=>{
+                    return await confirmUpload(params, {
+                        bucketName: bucketName,
+                        apiPath
+                    });
+                },
                 delete: async (params)=>{
                     return await deleteFile(params, {
                         bucketName: bucketName,
@@ -51,7 +57,8 @@ async function uploadFile({ file, input, onProgressChange, options }, { apiPath,
                     type: file.type,
                     size: file.size,
                     fileName: options?.manualFileName,
-                    replaceTargetUrl: options?.replaceTargetUrl
+                    replaceTargetUrl: options?.replaceTargetUrl,
+                    temporary: options?.temporary
                 }
             }),
             headers: {
@@ -59,11 +66,21 @@ async function uploadFile({ file, input, onProgressChange, options }, { apiPath,
             }
         });
         const json = await res.json();
-        if (!json.uploadUrl) {
+        if ('multipart' in json) {
+            await multipartUpload({
+                bucketName,
+                multipartInfo: json.multipart,
+                onProgressChange,
+                file,
+                apiPath
+            });
+        } else if ('uploadUrl' in json) {
+            // Single part upload
+            // Upload the file to the signed URL and get the progress
+            await uploadFileInner(file, json.uploadUrl, onProgressChange);
+        } else {
             throw new EdgeStoreError('An error occurred');
         }
-        // Upload the file to the signed URL and get the progress
-        await uploadFileInner(file, json.uploadUrl, onProgressChange);
         return {
             url: getUrl(json.accessUrl, apiPath),
             thumbnailUrl: json.thumbnailUrl ? getUrl(json.thumbnailUrl, apiPath) : null,
@@ -113,12 +130,86 @@ const uploadFileInner = async (file, uploadUrl, onProgressChange)=>{
             reject(new Error('File upload aborted'));
         });
         request.addEventListener('loadend', ()=>{
-            resolve();
+            // Return the ETag header (needed to complete multipart upload)
+            resolve(request.getResponseHeader('ETag'));
         });
         request.send(file);
     });
     return promise;
 };
+async function multipartUpload(params) {
+    const { bucketName, multipartInfo, onProgressChange, file, apiPath } = params;
+    const { partSize, parts, totalParts, uploadId, key } = multipartInfo;
+    const uploadingParts = [];
+    const uploadPart = async (params)=>{
+        const { part, chunk } = params;
+        const { uploadUrl } = part;
+        const eTag = await uploadFileInner(chunk, uploadUrl, (progress)=>{
+            const uploadingPart = uploadingParts.find((p)=>p.partNumber === part.partNumber);
+            if (uploadingPart) {
+                uploadingPart.progress = progress;
+            } else {
+                uploadingParts.push({
+                    partNumber: part.partNumber,
+                    progress
+                });
+            }
+            const totalProgress = Math.round(uploadingParts.reduce((acc, p)=>acc + p.progress * 100, 0) / totalParts) / 100;
+            onProgressChange?.(totalProgress);
+        });
+        if (!eTag) {
+            throw new EdgeStoreError('Could not get ETag from multipart response');
+        }
+        return {
+            partNumber: part.partNumber,
+            eTag
+        };
+    };
+    // Upload the parts in parallel
+    const completedParts = await queuedPromises({
+        items: parts.map((part)=>({
+                part,
+                chunk: file.slice((part.partNumber - 1) * partSize, part.partNumber * partSize)
+            })),
+        fn: uploadPart,
+        maxParallel: 5,
+        maxRetries: 10
+    });
+    // Complete multipart upload
+    const res = await fetch(`${apiPath}/complete-multipart-upload`, {
+        method: 'POST',
+        body: JSON.stringify({
+            bucketName,
+            uploadId,
+            key,
+            parts: completedParts
+        }),
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    });
+    if (!res.ok) {
+        throw new EdgeStoreError('Multi-part upload failed');
+    }
+}
+async function confirmUpload({ url }, { apiPath, bucketName }) {
+    const res = await fetch(`${apiPath}/confirm-upload`, {
+        method: 'POST',
+        body: JSON.stringify({
+            url,
+            bucketName
+        }),
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    });
+    if (!res.ok) {
+        throw new EdgeStoreError('An error occurred');
+    }
+    return {
+        success: true
+    };
+}
 async function deleteFile({ url }, { apiPath, bucketName }) {
     const res = await fetch(`${apiPath}/delete-file`, {
         method: 'POST',
@@ -137,6 +228,43 @@ async function deleteFile({ url }, { apiPath, bucketName }) {
         success: true
     };
 }
+async function queuedPromises({ items, fn, maxParallel, maxRetries = 0 }) {
+    const results = new Array(items.length);
+    const executeWithRetry = async (func, retries)=>{
+        try {
+            return await func();
+        } catch (error) {
+            if (retries > 0) {
+                await new Promise((resolve)=>setTimeout(resolve, 5000));
+                return executeWithRetry(func, retries - 1);
+            } else {
+                throw error;
+            }
+        }
+    };
+    const semaphore = {
+        count: maxParallel,
+        async wait () {
+            // If we've reached our maximum concurrency or it's the last item, wait
+            while(this.count <= 0)await new Promise((resolve)=>setTimeout(resolve, 500));
+            this.count--;
+        },
+        signal () {
+            this.count++;
+        }
+    };
+    const tasks = items.map((item, i)=>(async ()=>{
+            await semaphore.wait();
+            try {
+                const result = await executeWithRetry(()=>fn(item), maxRetries);
+                results[i] = result;
+            } finally{
+                semaphore.signal();
+            }
+        })());
+    await Promise.all(tasks);
+    return results;
+}
 
 const DEFAULT_BASE_URL = process.env.NEXT_PUBLIC_EDGE_STORE_BASE_URL ?? 'https://files.edgestore.dev';
 function createEdgeStoreProvider(opts) {
@@ -167,38 +295,28 @@ function createEdgeStoreProvider(opts) {
 }
 function EdgeStoreProviderInner({ children, context, basePath, maxConcurrentUploads }) {
     const apiPath = basePath ? `${basePath}` : '/api/edgestore';
-    const [token, setToken] = React.useState(null);
     const uploadingCountRef = React.useRef(0);
     React.useEffect(()=>{
-        void fetch(`${apiPath}/init`, {
-            method: 'POST'
-        }).then(async (res)=>{
-            if (res.ok) {
-                const json = await res.json();
-                setToken(json.token);
-                await fetch(`${DEFAULT_BASE_URL}/_init`, {
-                    method: 'GET',
-                    headers: {
-                        'x-edgestore-token': json.token
-                    }
-                });
-            }
-        });
+        void init();
     // 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.edgestore.dev/project/bucket/_public/...
-        url.match(/^https?:\/\/[^\/]+\/[^\/]+\/[^\/]+\/_public\/.+/)) {
-            return `${url}`;
-        } else {
-            // in development, third party cookies don't work, so we need to pass the token as a query param
-            const uri = new URL(url);
-            uri.searchParams.set('token', token ?? '');
-            return `${uri}`;
+    async function init() {
+        const res = await fetch(`${apiPath}/init`, {
+            method: 'POST'
+        });
+        if (res.ok) {
+            const json = await res.json();
+            await fetch(`${DEFAULT_BASE_URL}/_init`, {
+                method: 'GET',
+                headers: {
+                    'x-edgestore-token': json.token
+                }
+            });
         }
     }
+    async function reset() {
+        await init();
+    }
     return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(context.Provider, {
         value: {
             edgestore: createNextProxy({
@@ -206,7 +324,7 @@ function EdgeStoreProviderInner({ children, context, basePath, maxConcurrentUplo
                 uploadingCountRef,
                 maxConcurrentUploads
             }),
-            getSrc
+            reset
         }
     }, children));
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@edgestore/react",
-  "version": "0.1.1",
-  "description": "The best DX for uploading files from your Next.js app",
+  "version": "0.1.3-alpha.0",
+  "description": "Upload files with ease from React/Next.js",
   "homepage": "https://edgestore.dev",
   "repository": "https://github.com/edgestorejs/edgestore.git",
   "author": "Ravi <me@ravi.com>",
@@ -54,14 +54,14 @@
     "uuid": "^9.0.0"
   },
   "peerDependencies": {
-    "@edgestore/server": "0.1.1",
+    "@edgestore/server": "0.1.3-alpha.0",
     "next": "*",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "zod": ">=3.0.0"
   },
   "devDependencies": {
-    "@edgestore/server": "0.1.1",
+    "@edgestore/server": "0.1.3-alpha.0",
     "@types/cookie": "^0.5.1",
     "@types/node": "^18.11.18",
     "@types/uuid": "^9.0.1",
@@ -71,5 +71,5 @@
     "typescript": "^5.1.6",
     "zod": "^3.21.4"
   },
-  "gitHead": "aef56ef04e24a3de539d949831b2bf876a15d4e3"
+  "gitHead": "3ed23e543ee1ed151685884bb0983c2471e03880"
 }

package/src/contextProvider.tsx

@@ -8,10 +8,12 @@ const DEFAULT_BASE_URL =
 type EdgeStoreContextValue<TRouter extends AnyRouter> = {
   edgestore: BucketFunctions<TRouter>;
   /**
-   * In development, if this is a protected file, this function will add the token as a query param to the url.
-   * This is needed because third party cookies don't work with http urls.
+   * This will re-run the Edge Store initialization process,
+   * which will run the `createContext` function again.
+   *
+   * Can be used after a sign-in or sign-out, for example.
    */
-  getSrc: (url: string) => string;
+  reset: () => Promise<void>;
 };
 
 export function createEdgeStoreProvider<TRouter extends AnyRouter>(opts?: {
@@ -85,43 +87,31 @@ function EdgeStoreProviderInner<TRouter extends AnyRouter>({
   maxConcurrentUploads?: number;
 }) {
   const apiPath = basePath ? `${basePath}` : '/api/edgestore';
-  const [token, setToken] = React.useState<string | null>(null);
   const uploadingCountRef = React.useRef(0);
   React.useEffect(() => {
-    void fetch(`${apiPath}/init`, {
-      method: 'POST',
-    }).then(async (res) => {
-      if (res.ok) {
-        const json = await res.json();
-        setToken(json.token);
-        await fetch(`${DEFAULT_BASE_URL}/_init`, {
-          method: 'GET',
-          headers: {
-            'x-edgestore-token': json.token,
-          },
-        });
-      }
-    });
+    void init();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  function getSrc(url: string) {
-    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.edgestore.dev/project/bucket/_public/...
-      url.match(/^https?:\/\/[^\/]+\/[^\/]+\/[^\/]+\/_public\/.+/)
-    ) {
-      return `${url}`;
-    } else {
-      // in development, third party cookies don't work, so we need to pass the token as a query param
-      const uri = new URL(url);
-      uri.searchParams.set('token', token ?? '');
-      return `${uri}`;
+  async function init() {
+    const res = await fetch(`${apiPath}/init`, {
+      method: 'POST',
+    });
+    if (res.ok) {
+      const json = await res.json();
+      await fetch(`${DEFAULT_BASE_URL}/_init`, {
+        method: 'GET',
+        headers: {
+          'x-edgestore-token': json.token,
+        },
+      });
     }
   }
 
+  async function reset() {
+    await init();
+  }
+
   return (
     <>
       <context.Provider
@@ -131,7 +121,7 @@ function EdgeStoreProviderInner<TRouter extends AnyRouter>({
             uploadingCountRef,
             maxConcurrentUploads,
           }),
-          getSrc,
+          reset,
         }}
       >
         {children}

package/src/createNextProxy.ts

@@ -1,3 +1,4 @@
+import { type RequestUploadRes } from '@edgestore/server/adapters';
 import {
   type AnyRouter,
   type InferBucketPathObject,
@@ -39,6 +40,9 @@ export type BucketFunctions<TRouter extends AnyRouter> = {
             path: InferBucketPathObject<TRouter['buckets'][K]>;
           }
     >;
+    confirmUpload: (params: { url: string }) => Promise<{
+      success: boolean;
+    }>;
     delete: (params: { url: string }) => Promise<{
       success: boolean;
     }>;
@@ -65,6 +69,16 @@ type UploadOptions = {
    * It will automatically delete the existing file when the upload is complete.
    */
   replaceTargetUrl?: string;
+  /**
+   * If true, the file needs to be confirmed by using the `confirmUpload` function.
+   * If the file is not confirmed within 24 hours, it will be deleted.
+   *
+   * This is useful for pages where the file is uploaded as soon as it is selected,
+   * but the user can leave the page without submitting the form.
+   *
+   * This avoids unnecessary zombie files in the bucket.
+   */
+  temporary?: boolean;
 };
 
 export function createNextProxy<TRouter extends AnyRouter>({
@@ -98,6 +112,12 @@ export function createNextProxy<TRouter extends AnyRouter>({
             uploadingCountRef.current--;
           }
         },
+        confirmUpload: async (params: { url: string }) => {
+          return await confirmUpload(params, {
+            bucketName: bucketName as string,
+            apiPath,
+          });
+        },
         delete: async (params: { url: string }) => {
           return await deleteFile(params, {
             bucketName: bucketName as string,
@@ -143,18 +163,29 @@ async function uploadFile(
           size: file.size,
           fileName: options?.manualFileName,
           replaceTargetUrl: options?.replaceTargetUrl,
+          temporary: options?.temporary,
         },
       }),
       headers: {
         'Content-Type': 'application/json',
       },
     });
-    const json = await res.json();
-    if (!json.uploadUrl) {
+    const json = (await res.json()) as RequestUploadRes;
+    if ('multipart' in json) {
+      await multipartUpload({
+        bucketName,
+        multipartInfo: json.multipart,
+        onProgressChange,
+        file,
+        apiPath,
+      });
+    } else if ('uploadUrl' in json) {
+      // Single part upload
+      // Upload the file to the signed URL and get the progress
+      await uploadFileInner(file, json.uploadUrl, onProgressChange);
+    } else {
       throw new EdgeStoreError('An error occurred');
     }
-    // Upload the file to the signed URL and get the progress
-    await uploadFileInner(file, json.uploadUrl, onProgressChange);
     return {
       url: getUrl(json.accessUrl, apiPath),
       thumbnailUrl: json.thumbnailUrl
@@ -162,8 +193,8 @@ async function uploadFile(
         : null,
       size: json.size,
       uploadedAt: new Date(json.uploadedAt),
-      path: json.path,
-      metadata: json.metadata,
+      path: json.path as any,
+      metadata: json.metadata as any,
     };
   } catch (e) {
     onProgressChange?.(0);
@@ -189,11 +220,11 @@ function getUrl(url: string, apiPath: string) {
 }
 
 const uploadFileInner = async (
-  file: File,
+  file: File | Blob,
   uploadUrl: string,
   onProgressChange?: OnProgressChangeHandler,
 ) => {
-  const promise = new Promise<void>((resolve, reject) => {
+  const promise = new Promise<string | null>((resolve, reject) => {
     const request = new XMLHttpRequest();
     request.open('PUT', uploadUrl);
     request.addEventListener('loadstart', () => {
@@ -213,7 +244,8 @@ const uploadFileInner = async (
       reject(new Error('File upload aborted'));
     });
     request.addEventListener('loadend', () => {
-      resolve();
+      // Return the ETag header (needed to complete multipart upload)
+      resolve(request.getResponseHeader('ETag'));
     });
 
     request.send(file);
@@ -221,6 +253,115 @@ const uploadFileInner = async (
   return promise;
 };
 
+async function multipartUpload(params: {
+  bucketName: string;
+  multipartInfo: Extract<RequestUploadRes, { multipart: any }>['multipart'];
+  onProgressChange: OnProgressChangeHandler | undefined;
+  file: File;
+  apiPath: string;
+}) {
+  const { bucketName, multipartInfo, onProgressChange, file, apiPath } = params;
+  const { partSize, parts, totalParts, uploadId, key } = multipartInfo;
+  const uploadingParts: {
+    partNumber: number;
+    progress: number;
+  }[] = [];
+  const uploadPart = async (params: {
+    part: typeof parts[number];
+    chunk: Blob;
+  }) => {
+    const { part, chunk } = params;
+    const { uploadUrl } = part;
+    const eTag = await uploadFileInner(chunk, uploadUrl, (progress) => {
+      const uploadingPart = uploadingParts.find(
+        (p) => p.partNumber === part.partNumber,
+      );
+      if (uploadingPart) {
+        uploadingPart.progress = progress;
+      } else {
+        uploadingParts.push({
+          partNumber: part.partNumber,
+          progress,
+        });
+      }
+      const totalProgress =
+        Math.round(
+          uploadingParts.reduce((acc, p) => acc + p.progress * 100, 0) /
+            totalParts,
+        ) / 100;
+      onProgressChange?.(totalProgress);
+    });
+    if (!eTag) {
+      throw new EdgeStoreError('Could not get ETag from multipart response');
+    }
+    return {
+      partNumber: part.partNumber,
+      eTag,
+    };
+  };
+
+  // Upload the parts in parallel
+  const completedParts = await queuedPromises({
+    items: parts.map((part) => ({
+      part,
+      chunk: file.slice(
+        (part.partNumber - 1) * partSize,
+        part.partNumber * partSize,
+      ),
+    })),
+    fn: uploadPart,
+    maxParallel: 5,
+    maxRetries: 10, // retry 10 times per part
+  });
+
+  // Complete multipart upload
+  const res = await fetch(`${apiPath}/complete-multipart-upload`, {
+    method: 'POST',
+    body: JSON.stringify({
+      bucketName,
+      uploadId,
+      key,
+      parts: completedParts,
+    }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  if (!res.ok) {
+    throw new EdgeStoreError('Multi-part upload failed');
+  }
+}
+
+async function confirmUpload(
+  {
+    url,
+  }: {
+    url: string;
+  },
+  {
+    apiPath,
+    bucketName,
+  }: {
+    apiPath: string;
+    bucketName: string;
+  },
+) {
+  const res = await fetch(`${apiPath}/confirm-upload`, {
+    method: 'POST',
+    body: JSON.stringify({
+      url,
+      bucketName,
+    }),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+  if (!res.ok) {
+    throw new EdgeStoreError('An error occurred');
+  }
+  return { success: true };
+}
+
 async function deleteFile(
   {
     url,
@@ -250,3 +391,62 @@ async function deleteFile(
   }
   return { success: true };
 }
+
+async function queuedPromises<TType, TRes>({
+  items,
+  fn,
+  maxParallel,
+  maxRetries = 0,
+}: {
+  items: TType[];
+  fn: (item: TType) => Promise<TRes>;
+  maxParallel: number;
+  maxRetries?: number;
+}): Promise<TRes[]> {
+  const results: TRes[] = new Array(items.length);
+
+  const executeWithRetry = async (
+    func: () => Promise<TRes>,
+    retries: number,
+  ): Promise<TRes> => {
+    try {
+      return await func();
+    } catch (error) {
+      if (retries > 0) {
+        await new Promise((resolve) => setTimeout(resolve, 5000));
+        return executeWithRetry(func, retries - 1);
+      } else {
+        throw error;
+      }
+    }
+  };
+
+  const semaphore = {
+    count: maxParallel,
+    async wait() {
+      // If we've reached our maximum concurrency or it's the last item, wait
+      while (this.count <= 0)
+        await new Promise((resolve) => setTimeout(resolve, 500));
+      this.count--;
+    },
+    signal() {
+      this.count++;
+    },
+  };
+
+  const tasks: Promise<void>[] = items.map((item, i) =>
+    (async () => {
+      await semaphore.wait();
+
+      try {
+        const result = await executeWithRetry(() => fn(item), maxRetries);
+        results[i] = result;
+      } finally {
+        semaphore.signal();
+      }
+    })(),
+  );
+
+  await Promise.all(tasks);
+  return results;
+}