@edgestore/react 0.1.0 → 0.1.2

package/README.md

@@ -64,8 +64,8 @@ Now let's initiate our context provider.
 ```tsx title="src/lib/edgestore.ts"
 'use client';
 
-import { EdgeStoreRouter } from '../app/api/edgestore/[...edgestore]/route';
 import { createEdgeStoreProvider } from '@edgestore/react';
+import { type EdgeStoreRouter } from '../app/api/edgestore/[...edgestore]/route';
 
 const { EdgeStoreProvider, useEdgeStore } =
   createEdgeStoreProvider<EdgeStoreRouter>();
@@ -101,11 +101,11 @@ export default function RootLayout({
 You can use the `useEdgeStore` hook to access typesafe frontend client and use it to upload files.
 
 ```tsx {1, 6, 19-28}
-import { useEdgeStore } from '../lib/edgestore';
 import * as React from 'react';
+import { useEdgeStore } from '../lib/edgestore';
 
 export default function Page() {
-  const [file, setFile] = React.useState<File | null>(null);
+  const [file, setFile] = React.useState<File>();
   const { edgestore } = useEdgeStore();
 
   return (
@@ -113,7 +113,7 @@ export default function Page() {
       <input
         type="file"
         onChange={(e) => {
-          setFile(e.target.files?.[0] ?? null);
+          setFile(e.target.files?.[0]);
         }}
       />
       <button
@@ -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({
@@ -161,5 +161,5 @@ const res = await edgestore.publicFiles.upload({
 ```tsx
 await edgestore.publicFiles.delete({
   url: urlToDelete,
-})
+});
 ```

package/dist/contextProvider.d.ts

@@ -1,6 +1,6 @@
-import { AnyRouter } from '@edgestore/server/core';
+import { type AnyRouter } from '@edgestore/server/core';
 import * as React from 'react';
-import { BucketFunctions } from './createNextProxy';
+import { type BucketFunctions } from './createNextProxy';
 type EdgeStoreContextValue<TRouter extends AnyRouter> = {
     edgestore: BucketFunctions<TRouter>;
     /**

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;;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;;;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,6 +1,6 @@
 /// <reference types="react" />
-import { AnyRouter, InferBucketPathObject, InferMetadataObject } from '@edgestore/server/core';
-import { z } from 'zod';
+import { type AnyRouter, type InferBucketPathObject, type InferMetadataObject } from '@edgestore/server/core';
+import { type z } from 'zod';
 export type BucketFunctions<TRouter extends AnyRouter> = {
     [K in keyof TRouter['buckets']]: {
         upload: (params: z.infer<TRouter['buckets'][K]['_def']['input']> extends never ? {
@@ -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,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"}
+{"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,17 +90,29 @@ 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,
             size: json.size,
             uploadedAt: new Date(json.uploadedAt),
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
             path: json.path,
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
             metadata: json.metadata
         };
     } catch (e) {
@@ -137,12 +156,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 +254,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) {

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,17 +66,29 @@ 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,
             size: json.size,
             uploadedAt: new Date(json.uploadedAt),
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
             path: json.path,
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
             metadata: json.metadata
         };
     } catch (e) {
@@ -113,12 +132,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 +230,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) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@edgestore/react",
-  "version": "0.1.0",
-  "description": "The best DX for uploading files from your Next.js app",
+  "version": "0.1.2",
+  "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.0",
+    "@edgestore/server": "0.1.2",
     "next": "*",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
     "zod": ">=3.0.0"
   },
   "devDependencies": {
-    "@edgestore/server": "0.1.0",
+    "@edgestore/server": "0.1.2",
     "@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": "02d8fe7865f94c75d0b09f6725f3ff3471abb549"
+  "gitHead": "99519b57aa7a5cbbe5cab16b85a70d437cb87435"
 }

package/src/contextProvider.tsx

@@ -1,6 +1,6 @@
-import { AnyRouter } from '@edgestore/server/core';
+import { type AnyRouter } from '@edgestore/server/core';
 import * as React from 'react';
-import { BucketFunctions, createNextProxy } from './createNextProxy';
+import { createNextProxy, type BucketFunctions } from './createNextProxy';
 
 const DEFAULT_BASE_URL =
   process.env.NEXT_PUBLIC_EDGE_STORE_BASE_URL ?? 'https://files.edgestore.dev';

package/src/createNextProxy.ts

@@ -1,9 +1,10 @@
+import { type RequestUploadRes } from '@edgestore/server/adapters';
 import {
-  AnyRouter,
-  InferBucketPathObject,
-  InferMetadataObject,
+  type AnyRouter,
+  type InferBucketPathObject,
+  type InferMetadataObject,
 } from '@edgestore/server/core';
-import { z } from 'zod';
+import { type z } from 'zod';
 import EdgeStoreError from './libs/errors/EdgeStoreError';
 
 export type BucketFunctions<TRouter extends AnyRouter> = {
@@ -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,10 @@ async function uploadFile(
         : null,
       size: json.size,
       uploadedAt: new Date(json.uploadedAt),
-      path: json.path,
-      metadata: json.metadata,
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+      path: json.path as any,
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+      metadata: json.metadata as any,
     };
   } catch (e) {
     onProgressChange?.(0);
@@ -189,11 +222,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 +246,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 +255,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 +393,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;
+}