@edgestore/react 0.1.6 → 0.2.0

package/README.md

@@ -98,7 +98,7 @@ export default function RootLayout({
 
 ### Upload file
 
-You can use the `useEdgeStore` hook to access typesafe frontend client and use it to upload files.
+You can use the `useEdgeStore` hook to access a typesafe frontend client and use it to upload files.
 
 ```tsx {1, 6, 19-28}
 import * as React from 'react';
@@ -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 because of the CDN cache.
+You can also 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/createNextProxy.d.ts

@@ -10,12 +10,30 @@ export type Prettify<TType> = {
 } & {};
 export type BucketFunctions<TRouter extends AnyRouter> = {
     [K in keyof TRouter['buckets']]: {
+        /**
+         * Upload a file to the bucket
+         *
+         * @example
+         * await edgestore.myBucket.upload({
+         *  file: file,
+         *  signal: abortController.signal, // if you want to be able to cancel the ongoing upload
+         *  onProgressChange: (progress) => { console.log(progress) }, // if you want to show the progress of the upload
+         *  input: {...} // if the bucket has an input schema
+         *  options: {
+         *   manualFileName: file.name, // if you want to use a custom file name
+         *   replaceTargetUrl: url, // if you want to replace an existing file
+         *   temporary: true, // if you want to delete the file after 24 hours
+         *  }
+         * })
+         */
         upload: (params: z.infer<TRouter['buckets'][K]['_def']['input']> extends never ? {
             file: File;
+            signal?: AbortSignal;
             onProgressChange?: OnProgressChangeHandler;
             options?: UploadOptions;
         } : {
             file: File;
+            signal?: AbortSignal;
             input: z.infer<TRouter['buckets'][K]['_def']['input']>;
             onProgressChange?: OnProgressChangeHandler;
             options?: UploadOptions;

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,EAExB,KAAK,aAAa,EACnB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,CAAC;AAI7B;;;GAGG;AACH,MAAM,MAAM,QAAQ,CAAC,KAAK,IAAI;KAC3B,CAAC,IAAI,MAAM,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC;CAE7B,GAAG,EAAE,CAAC;AAEP,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;YACnD,SAAS,EAAE,QAAQ,CACjB,MAAM,qBAAqB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CACnD,EAAE,CAAC;SACL,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;YACnD,SAAS,EAAE,QAAQ,CACjB,MAAM,qBAAqB,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CACnD,EAAE,CAAC;SACL,CACN,CAAC;QACF,aAAa,EAAE,CAAC,MAAM,EAAE;YAAE,GAAG,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;QAC1D,MAAM,EAAE,CAAC,MAAM,EAAE;YAAE,GAAG,EAAE,MAAM,CAAA;SAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;KACpD;CACF,CAAC;AAEF,KAAK,uBAAuB,GAAG,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;AAE1D,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,4BA8CA"}
+{"version":3,"file":"createNextProxy.d.ts","sourceRoot":"","sources":["../src/createNextProxy.ts"],"names":[],"mappings":"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"}

package/dist/errors/index.d.ts

@@ -0,0 +1,3 @@
+export { EdgeStoreApiClientError } from '@edgestore/shared';
+export { UploadAbortedError } from '../libs/errors/uploadAbortedError';
+//# sourceMappingURL=index.d.ts.map

package/dist/errors/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/errors/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,mCAAmC,CAAC"}

package/dist/errors/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var shared = require('@edgestore/shared');
+var uploadAbortedError = require('../uploadAbortedError-fbfcc57b.js');
+
+
+
+Object.defineProperty(exports, 'EdgeStoreApiClientError', {
+	enumerable: true,
+	get: function () { return shared.EdgeStoreApiClientError; }
+});
+exports.UploadAbortedError = uploadAbortedError.UploadAbortedError;

package/dist/errors/index.mjs

@@ -0,0 +1,2 @@
+export { EdgeStoreApiClientError } from '@edgestore/shared';
+export { U as UploadAbortedError } from '../uploadAbortedError-e1379bb0.mjs';

package/dist/index.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var shared = require('@edgestore/shared');
+var uploadAbortedError = require('./uploadAbortedError-fbfcc57b.js');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -52,15 +53,29 @@ function createNextProxy({ apiPath, uploadingCountRef, maxConcurrentUploads = 5
                 upload: async (params)=>{
                     try {
                         params.onProgressChange?.(0);
+                        // This handles the case where the user cancels the upload while it's waiting in the queue
+                        const abortPromise = new Promise((resolve)=>{
+                            params.signal?.addEventListener('abort', ()=>{
+                                resolve();
+                            }, {
+                                once: true
+                            });
+                        });
                         while(uploadingCountRef.current >= maxConcurrentUploads && uploadingCountRef.current > 0){
-                            await new Promise((resolve)=>setTimeout(resolve, 300));
+                            await Promise.race([
+                                new Promise((resolve)=>setTimeout(resolve, 300)),
+                                abortPromise
+                            ]);
+                            if (params.signal?.aborted) {
+                                throw new uploadAbortedError.UploadAbortedError('File upload aborted');
+                            }
                         }
                         uploadingCountRef.current++;
-                        const test = await uploadFile(params, {
+                        const fileInfo = await uploadFile(params, {
                             bucketName: bucketName,
                             apiPath
                         });
-                        return test;
+                        return fileInfo;
                     } finally{
                         uploadingCountRef.current--;
                     }
@@ -88,12 +103,13 @@ function createNextProxy({ apiPath, uploadingCountRef, maxConcurrentUploads = 5
         }
     });
 }
-async function uploadFile({ file, input, onProgressChange, options }, { apiPath, bucketName }) {
+async function uploadFile({ file, signal, input, onProgressChange, options }, { apiPath, bucketName }) {
     try {
         onProgressChange?.(0);
         const res = await fetch(`${apiPath}/request-upload`, {
             method: 'POST',
             credentials: 'include',
+            signal: signal,
             body: JSON.stringify({
                 bucketName,
                 input,
@@ -119,13 +135,19 @@ async function uploadFile({ file, input, onProgressChange, options }, { apiPath,
                 bucketName,
                 multipartInfo: json.multipart,
                 onProgressChange,
+                signal,
                 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);
+            await uploadFileInner({
+                file,
+                uploadUrl: json.uploadUrl,
+                onProgressChange,
+                signal
+            });
         } else {
             throw new EdgeStoreClientError('An error occurred');
         }
@@ -139,13 +161,16 @@ async function uploadFile({ file, input, onProgressChange, options }, { apiPath,
             metadata: json.metadata
         };
     } catch (e) {
+        if (e instanceof Error && e.name === 'AbortError') {
+            throw new uploadAbortedError.UploadAbortedError('File upload aborted');
+        }
         onProgressChange?.(0);
         throw e;
     }
 }
 /**
  * Protected files need third-party cookies to work.
- * Since third party cookies doesn't work on localhost,
+ * Since third party cookies don't work on localhost,
  * we need to proxy the file through the server.
  */ function getUrl(url, apiPath) {
     const mode = typeof process !== 'undefined' ? process.env.NODE_ENV : undefined?.DEV ? 'development' : 'production';
@@ -159,8 +184,13 @@ async function uploadFile({ file, input, onProgressChange, options }, { apiPath,
     }
     return url;
 }
-const uploadFileInner = async (file, uploadUrl, onProgressChange)=>{
+async function uploadFileInner(props) {
+    const { file, uploadUrl, onProgressChange, signal } = props;
     const promise = new Promise((resolve, reject)=>{
+        if (signal?.aborted) {
+            reject(new uploadAbortedError.UploadAbortedError('File upload aborted'));
+            return;
+        }
         const request = new XMLHttpRequest();
         request.open('PUT', uploadUrl);
         // This is for Azure provider. Specifies the blob type
@@ -179,35 +209,45 @@ const uploadFileInner = async (file, uploadUrl, onProgressChange)=>{
             reject(new Error('Error uploading file'));
         });
         request.addEventListener('abort', ()=>{
-            reject(new Error('File upload aborted'));
+            reject(new uploadAbortedError.UploadAbortedError('File upload aborted'));
         });
         request.addEventListener('loadend', ()=>{
             // Return the ETag header (needed to complete multipart upload)
             resolve(request.getResponseHeader('ETag'));
         });
+        if (signal) {
+            signal.addEventListener('abort', ()=>{
+                request.abort();
+            });
+        }
         request.send(file);
     });
     return promise;
-};
+}
 async function multipartUpload(params) {
-    const { bucketName, multipartInfo, onProgressChange, file, apiPath } = params;
+    const { bucketName, multipartInfo, onProgressChange, file, signal, 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 eTag = await uploadFileInner({
+            file: chunk,
+            uploadUrl,
+            signal,
+            onProgressChange: (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);
             }
-            const totalProgress = Math.round(uploadingParts.reduce((acc, p)=>acc + p.progress * 100, 0) / totalParts) / 100;
-            onProgressChange?.(totalProgress);
         });
         if (!eTag) {
             throw new EdgeStoreClientError('Could not get ETag from multipart response');
@@ -285,6 +325,9 @@ async function queuedPromises({ items, fn, maxParallel, maxRetries = 0 }) {
         try {
             return await func();
         } catch (error) {
+            if (error instanceof uploadAbortedError.UploadAbortedError) {
+                throw error;
+            }
             if (retries > 0) {
                 await new Promise((resolve)=>setTimeout(resolve, 5000));
                 return executeWithRetry(func, retries - 1);
@@ -296,7 +339,7 @@ async function queuedPromises({ items, fn, maxParallel, maxRetries = 0 }) {
     const semaphore = {
         count: maxParallel,
         async wait () {
-            // If we've reached our maximum concurrency or it's the last item, 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--;
         },

package/dist/index.mjs

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { EdgeStoreApiClientError } from '@edgestore/shared';
+import { U as UploadAbortedError } from './uploadAbortedError-e1379bb0.mjs';
 
 class EdgeStoreClientError extends Error {
     constructor(message){
@@ -28,15 +29,29 @@ function createNextProxy({ apiPath, uploadingCountRef, maxConcurrentUploads = 5
                 upload: async (params)=>{
                     try {
                         params.onProgressChange?.(0);
+                        // This handles the case where the user cancels the upload while it's waiting in the queue
+                        const abortPromise = new Promise((resolve)=>{
+                            params.signal?.addEventListener('abort', ()=>{
+                                resolve();
+                            }, {
+                                once: true
+                            });
+                        });
                         while(uploadingCountRef.current >= maxConcurrentUploads && uploadingCountRef.current > 0){
-                            await new Promise((resolve)=>setTimeout(resolve, 300));
+                            await Promise.race([
+                                new Promise((resolve)=>setTimeout(resolve, 300)),
+                                abortPromise
+                            ]);
+                            if (params.signal?.aborted) {
+                                throw new UploadAbortedError('File upload aborted');
+                            }
                         }
                         uploadingCountRef.current++;
-                        const test = await uploadFile(params, {
+                        const fileInfo = await uploadFile(params, {
                             bucketName: bucketName,
                             apiPath
                         });
-                        return test;
+                        return fileInfo;
                     } finally{
                         uploadingCountRef.current--;
                     }
@@ -64,12 +79,13 @@ function createNextProxy({ apiPath, uploadingCountRef, maxConcurrentUploads = 5
         }
     });
 }
-async function uploadFile({ file, input, onProgressChange, options }, { apiPath, bucketName }) {
+async function uploadFile({ file, signal, input, onProgressChange, options }, { apiPath, bucketName }) {
     try {
         onProgressChange?.(0);
         const res = await fetch(`${apiPath}/request-upload`, {
             method: 'POST',
             credentials: 'include',
+            signal: signal,
             body: JSON.stringify({
                 bucketName,
                 input,
@@ -95,13 +111,19 @@ async function uploadFile({ file, input, onProgressChange, options }, { apiPath,
                 bucketName,
                 multipartInfo: json.multipart,
                 onProgressChange,
+                signal,
                 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);
+            await uploadFileInner({
+                file,
+                uploadUrl: json.uploadUrl,
+                onProgressChange,
+                signal
+            });
         } else {
             throw new EdgeStoreClientError('An error occurred');
         }
@@ -115,13 +137,16 @@ async function uploadFile({ file, input, onProgressChange, options }, { apiPath,
             metadata: json.metadata
         };
     } catch (e) {
+        if (e instanceof Error && e.name === 'AbortError') {
+            throw new UploadAbortedError('File upload aborted');
+        }
         onProgressChange?.(0);
         throw e;
     }
 }
 /**
  * Protected files need third-party cookies to work.
- * Since third party cookies doesn't work on localhost,
+ * Since third party cookies don't work on localhost,
  * we need to proxy the file through the server.
  */ function getUrl(url, apiPath) {
     const mode = typeof process !== 'undefined' ? process.env.NODE_ENV : import.meta.env?.DEV ? 'development' : 'production';
@@ -135,8 +160,13 @@ async function uploadFile({ file, input, onProgressChange, options }, { apiPath,
     }
     return url;
 }
-const uploadFileInner = async (file, uploadUrl, onProgressChange)=>{
+async function uploadFileInner(props) {
+    const { file, uploadUrl, onProgressChange, signal } = props;
     const promise = new Promise((resolve, reject)=>{
+        if (signal?.aborted) {
+            reject(new UploadAbortedError('File upload aborted'));
+            return;
+        }
         const request = new XMLHttpRequest();
         request.open('PUT', uploadUrl);
         // This is for Azure provider. Specifies the blob type
@@ -155,35 +185,45 @@ const uploadFileInner = async (file, uploadUrl, onProgressChange)=>{
             reject(new Error('Error uploading file'));
         });
         request.addEventListener('abort', ()=>{
-            reject(new Error('File upload aborted'));
+            reject(new UploadAbortedError('File upload aborted'));
         });
         request.addEventListener('loadend', ()=>{
             // Return the ETag header (needed to complete multipart upload)
             resolve(request.getResponseHeader('ETag'));
         });
+        if (signal) {
+            signal.addEventListener('abort', ()=>{
+                request.abort();
+            });
+        }
         request.send(file);
     });
     return promise;
-};
+}
 async function multipartUpload(params) {
-    const { bucketName, multipartInfo, onProgressChange, file, apiPath } = params;
+    const { bucketName, multipartInfo, onProgressChange, file, signal, 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 eTag = await uploadFileInner({
+            file: chunk,
+            uploadUrl,
+            signal,
+            onProgressChange: (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);
             }
-            const totalProgress = Math.round(uploadingParts.reduce((acc, p)=>acc + p.progress * 100, 0) / totalParts) / 100;
-            onProgressChange?.(totalProgress);
         });
         if (!eTag) {
             throw new EdgeStoreClientError('Could not get ETag from multipart response');
@@ -261,6 +301,9 @@ async function queuedPromises({ items, fn, maxParallel, maxRetries = 0 }) {
         try {
             return await func();
         } catch (error) {
+            if (error instanceof UploadAbortedError) {
+                throw error;
+            }
             if (retries > 0) {
                 await new Promise((resolve)=>setTimeout(resolve, 5000));
                 return executeWithRetry(func, retries - 1);
@@ -272,7 +315,7 @@ async function queuedPromises({ items, fn, maxParallel, maxRetries = 0 }) {
     const semaphore = {
         count: maxParallel,
         async wait () {
-            // If we've reached our maximum concurrency or it's the last item, 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--;
         },

package/dist/libs/errors/uploadAbortedError.d.ts

@@ -0,0 +1,4 @@
+export declare class UploadAbortedError extends Error {
+    constructor(message: string);
+}
+//# sourceMappingURL=uploadAbortedError.d.ts.map

package/dist/libs/errors/uploadAbortedError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uploadAbortedError.d.ts","sourceRoot":"","sources":["../../../src/libs/errors/uploadAbortedError.ts"],"names":[],"mappings":"AAAA,qBAAa,kBAAmB,SAAQ,KAAK;gBAC/B,OAAO,EAAE,MAAM;CAI5B"}

package/dist/shared/index.d.ts

@@ -1,2 +1,7 @@
-export { EdgeStoreApiClientError } from '@edgestore/shared';
+import { EdgeStoreApiClientError as DeprecatedEdgeStoreApiClientError } from '@edgestore/shared';
+/**
+ * @deprecated import from `@edgestore/react/errors` instead.
+ */
+export declare class EdgeStoreApiClientError extends DeprecatedEdgeStoreApiClientError {
+}
 //# sourceMappingURL=index.d.ts.map

package/dist/shared/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/shared/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/shared/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,uBAAuB,IAAI,iCAAiC,EAAE,MAAM,mBAAmB,CAAC;AAEjG;;GAEG;AACH,qBAAa,uBAAwB,SAAQ,iCAAiC;CAAG"}

package/dist/shared/index.js

@@ -4,9 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var shared = require('@edgestore/shared');
 
+// TODO: delete this file on next major release (moved to "errors")
+/**
+ * @deprecated import from `@edgestore/react/errors` instead.
+ */ class EdgeStoreApiClientError extends shared.EdgeStoreApiClientError {
+}
 
-
-Object.defineProperty(exports, 'EdgeStoreApiClientError', {
-	enumerable: true,
-	get: function () { return shared.EdgeStoreApiClientError; }
-});
+exports.EdgeStoreApiClientError = EdgeStoreApiClientError;

package/dist/shared/index.mjs

@@ -1 +1,9 @@
-export { EdgeStoreApiClientError } from '@edgestore/shared';
+import { EdgeStoreApiClientError as EdgeStoreApiClientError$1 } from '@edgestore/shared';
+
+// TODO: delete this file on next major release (moved to "errors")
+/**
+ * @deprecated import from `@edgestore/react/errors` instead.
+ */ class EdgeStoreApiClientError extends EdgeStoreApiClientError$1 {
+}
+
+export { EdgeStoreApiClientError };

package/dist/uploadAbortedError-a628b025.js

@@ -0,0 +1,8 @@
+class UploadAbortedError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'UploadAbortedError';
+    }
+}
+
+export { UploadAbortedError as U };

package/dist/uploadAbortedError-e1379bb0.mjs

@@ -0,0 +1,8 @@
+class UploadAbortedError extends Error {
+    constructor(message){
+        super(message);
+        this.name = 'UploadAbortedError';
+    }
+}
+
+export { UploadAbortedError as U };

package/dist/uploadAbortedError-fbfcc57b.js

@@ -0,0 +1,10 @@
+'use strict';
+
+class UploadAbortedError extends Error {
+    constructor(message){
+        super(message);
+        this.name = 'UploadAbortedError';
+    }
+}
+
+exports.UploadAbortedError = UploadAbortedError;

package/dist/utils/index.d.ts

@@ -6,7 +6,7 @@
  */
 export declare function getDownloadUrl(url: string, name?: string): string;
 /**
- * This will format the file size to a human readable format.
+ * This will format the file size to a human-readable format.
  *
  * @example 1024 => 1 KB
  */

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,UAIxD;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,UAa5C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,UAIxD;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,UAO5C"}

package/dist/utils/index.js

@@ -13,21 +13,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
     return urlObj.toString();
 }
 /**
- * This will format the file size to a human readable format.
+ * This will format the file size to a human-readable format.
  *
  * @example 1024 => 1 KB
  */ function formatFileSize(bytes) {
-    if (!bytes) {
-        return '0 Bytes';
-    }
-    bytes = Number(bytes);
-    if (bytes === 0) {
-        return '0 Bytes';
-    }
+    if (!bytes) return '0 B';
     const k = 1024;
     const dm = 2;
     const sizes = [
-        'Bytes',
+        'B',
         'KB',
         'MB',
         'GB',

package/dist/utils/index.mjs

@@ -9,21 +9,15 @@
     return urlObj.toString();
 }
 /**
- * This will format the file size to a human readable format.
+ * This will format the file size to a human-readable format.
  *
  * @example 1024 => 1 KB
  */ function formatFileSize(bytes) {
-    if (!bytes) {
-        return '0 Bytes';
-    }
-    bytes = Number(bytes);
-    if (bytes === 0) {
-        return '0 Bytes';
-    }
+    if (!bytes) return '0 B';
     const k = 1024;
     const dm = 2;
     const sizes = [
-        'Bytes',
+        'B',
         'KB',
         'MB',
         'GB',

package/errors/index.d.ts

@@ -0,0 +1 @@
+export * from '../dist/errors';

package/errors/index.js

@@ -0,0 +1 @@
+module.exports = require('../dist/errors');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edgestore/react",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "description": "Upload files with ease from React/Next.js",
   "homepage": "https://edgestore.dev",
   "repository": "https://github.com/edgestorejs/edgestore.git",
@@ -41,6 +41,11 @@
       "import": "./dist/shared/index.mjs",
       "require": "./dist/shared/index.js",
       "default": "./dist/shared/index.js"
+    },
+    "./errors": {
+      "import": "./dist/errors/index.mjs",
+      "require": "./dist/errors/index.js",
+      "default": "./dist/errors/index.js"
     }
   },
   "files": [
@@ -50,6 +55,7 @@
     "package.json",
     "utils",
     "shared",
+    "errors",
     "!**/*.test.*"
   ],
   "private": false,
@@ -60,7 +66,7 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.294.0",
     "@aws-sdk/s3-request-presigner": "^3.294.0",
-    "@edgestore/shared": "0.1.6",
+    "@edgestore/shared": "0.2.0",
     "@panva/hkdf": "^1.0.4",
     "cookie": "^0.5.0",
     "jose": "^4.13.1",
@@ -83,5 +89,5 @@
     "typescript": "^5.1.6",
     "zod": "3.21.4"
   },
-  "gitHead": "c9d1d53a21038b4c0c3b9df685d2cac9cabc88ae"
+  "gitHead": "a5ecda9ba69eaada4624556dd9422ce49e5dfb66"
 }

package/src/createNextProxy.ts

@@ -8,6 +8,7 @@ import {
 import { type z } from 'zod';
 import EdgeStoreClientError from './libs/errors/EdgeStoreClientError';
 import { handleError } from './libs/errors/handleError';
+import { UploadAbortedError } from './libs/errors/uploadAbortedError';
 
 /**
  * @internal
@@ -20,15 +21,33 @@ export type Prettify<TType> = {
 
 export type BucketFunctions<TRouter extends AnyRouter> = {
   [K in keyof TRouter['buckets']]: {
+    /**
+     * Upload a file to the bucket
+     *
+     * @example
+     * await edgestore.myBucket.upload({
+     *  file: file,
+     *  signal: abortController.signal, // if you want to be able to cancel the ongoing upload
+     *  onProgressChange: (progress) => { console.log(progress) }, // if you want to show the progress of the upload
+     *  input: {...} // if the bucket has an input schema
+     *  options: {
+     *   manualFileName: file.name, // if you want to use a custom file name
+     *   replaceTargetUrl: url, // if you want to replace an existing file
+     *   temporary: true, // if you want to delete the file after 24 hours
+     *  }
+     * })
+     */
     upload: (
       params: z.infer<TRouter['buckets'][K]['_def']['input']> extends never
         ? {
             file: File;
+            signal?: AbortSignal;
             onProgressChange?: OnProgressChangeHandler;
             options?: UploadOptions;
           }
         : {
             file: File;
+            signal?: AbortSignal;
             input: z.infer<TRouter['buckets'][K]['_def']['input']>;
             onProgressChange?: OnProgressChangeHandler;
             options?: UploadOptions;
@@ -80,18 +99,37 @@ export function createNextProxy<TRouter extends AnyRouter>({
         upload: async (params) => {
           try {
             params.onProgressChange?.(0);
+
+            // This handles the case where the user cancels the upload while it's waiting in the queue
+            const abortPromise = new Promise<void>((resolve) => {
+              params.signal?.addEventListener(
+                'abort',
+                () => {
+                  resolve();
+                },
+                { once: true },
+              );
+            });
+
             while (
               uploadingCountRef.current >= maxConcurrentUploads &&
               uploadingCountRef.current > 0
             ) {
-              await new Promise((resolve) => setTimeout(resolve, 300));
+              await Promise.race([
+                new Promise((resolve) => setTimeout(resolve, 300)),
+                abortPromise,
+              ]);
+              if (params.signal?.aborted) {
+                throw new UploadAbortedError('File upload aborted');
+              }
             }
+
             uploadingCountRef.current++;
-            const test = await uploadFile(params, {
+            const fileInfo = await uploadFile(params, {
               bucketName: bucketName as string,
               apiPath,
             });
-            return test;
+            return fileInfo;
           } finally {
             uploadingCountRef.current--;
           }
@@ -123,11 +161,13 @@ export function createNextProxy<TRouter extends AnyRouter>({
 async function uploadFile(
   {
     file,
+    signal,
     input,
     onProgressChange,
     options,
   }: {
     file: File;
+    signal?: AbortSignal;
     input?: object;
     onProgressChange?: OnProgressChangeHandler;
     options?: UploadOptions;
@@ -145,6 +185,7 @@ async function uploadFile(
     const res = await fetch(`${apiPath}/request-upload`, {
       method: 'POST',
       credentials: 'include',
+      signal: signal,
       body: JSON.stringify({
         bucketName,
         input,
@@ -170,13 +211,19 @@ async function uploadFile(
         bucketName,
         multipartInfo: json.multipart,
         onProgressChange,
+        signal,
         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);
+      await uploadFileInner({
+        file,
+        uploadUrl: json.uploadUrl,
+        onProgressChange,
+        signal,
+      });
     } else {
       throw new EdgeStoreClientError('An error occurred');
     }
@@ -192,6 +239,9 @@ async function uploadFile(
       metadata: json.metadata as any,
     };
   } catch (e) {
+    if (e instanceof Error && e.name === 'AbortError') {
+      throw new UploadAbortedError('File upload aborted');
+    }
     onProgressChange?.(0);
     throw e;
   }
@@ -199,7 +249,7 @@ async function uploadFile(
 
 /**
  * Protected files need third-party cookies to work.
- * Since third party cookies doesn't work on localhost,
+ * Since third party cookies don't work on localhost,
  * we need to proxy the file through the server.
  */
 function getUrl(url: string, apiPath: string) {
@@ -221,12 +271,19 @@ function getUrl(url: string, apiPath: string) {
   return url;
 }
 
-const uploadFileInner = async (
-  file: File | Blob,
-  uploadUrl: string,
-  onProgressChange?: OnProgressChangeHandler,
-) => {
+async function uploadFileInner(props: {
+  file: File | Blob;
+  uploadUrl: string;
+  onProgressChange?: OnProgressChangeHandler;
+  signal?: AbortSignal;
+}) {
+  const { file, uploadUrl, onProgressChange, signal } = props;
   const promise = new Promise<string | null>((resolve, reject) => {
+    if (signal?.aborted) {
+      reject(new UploadAbortedError('File upload aborted'));
+      return;
+    }
+
     const request = new XMLHttpRequest();
     request.open('PUT', uploadUrl);
     // This is for Azure provider. Specifies the blob type
@@ -245,17 +302,23 @@ const uploadFileInner = async (
       reject(new Error('Error uploading file'));
     });
     request.addEventListener('abort', () => {
-      reject(new Error('File upload aborted'));
+      reject(new UploadAbortedError('File upload aborted'));
     });
     request.addEventListener('loadend', () => {
       // Return the ETag header (needed to complete multipart upload)
       resolve(request.getResponseHeader('ETag'));
     });
 
+    if (signal) {
+      signal.addEventListener('abort', () => {
+        request.abort();
+      });
+    }
+
     request.send(file);
   });
   return promise;
-};
+}
 
 async function multipartUpload(params: {
   bucketName: string;
@@ -265,9 +328,11 @@ async function multipartUpload(params: {
   >['multipart'];
   onProgressChange: OnProgressChangeHandler | undefined;
   file: File;
+  signal: AbortSignal | undefined;
   apiPath: string;
 }) {
-  const { bucketName, multipartInfo, onProgressChange, file, apiPath } = params;
+  const { bucketName, multipartInfo, onProgressChange, file, signal, apiPath } =
+    params;
   const { partSize, parts, totalParts, uploadId, key } = multipartInfo;
   const uploadingParts: {
     partNumber: number;
@@ -279,24 +344,29 @@ async function multipartUpload(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);
+    const eTag = await uploadFileInner({
+      file: chunk,
+      uploadUrl,
+      signal,
+      onProgressChange: (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 EdgeStoreClientError(
@@ -424,6 +494,9 @@ async function queuedPromises<TType, TRes>({
     try {
       return await func();
     } catch (error) {
+      if (error instanceof UploadAbortedError) {
+        throw error;
+      }
       if (retries > 0) {
         await new Promise((resolve) => setTimeout(resolve, 5000));
         return executeWithRetry(func, retries - 1);
@@ -436,7 +509,7 @@ async function queuedPromises<TType, TRes>({
   const semaphore = {
     count: maxParallel,
     async wait() {
-      // If we've reached our maximum concurrency or it's the last item, 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--;

package/src/errors/index.ts

@@ -0,0 +1,2 @@
+export { EdgeStoreApiClientError } from '@edgestore/shared';
+export { UploadAbortedError } from '../libs/errors/uploadAbortedError';

package/src/libs/errors/uploadAbortedError.ts

@@ -0,0 +1,6 @@
+export class UploadAbortedError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'UploadAbortedError';
+  }
+}

package/src/shared/index.ts

@@ -1 +1,7 @@
-export { EdgeStoreApiClientError } from '@edgestore/shared';
+// TODO: delete this file on next major release (moved to "errors")
+import { EdgeStoreApiClientError as DeprecatedEdgeStoreApiClientError } from '@edgestore/shared';
+
+/**
+ * @deprecated import from `@edgestore/react/errors` instead.
+ */
+export class EdgeStoreApiClientError extends DeprecatedEdgeStoreApiClientError {}

package/src/utils/index.ts

@@ -11,21 +11,15 @@ export function getDownloadUrl(url: string, name?: string) {
 }
 
 /**
- * This will format the file size to a human readable format.
+ * This will format the file size to a human-readable format.
  *
  * @example 1024 => 1 KB
  */
 export function formatFileSize(bytes?: number) {
-  if (!bytes) {
-    return '0 Bytes';
-  }
-  bytes = Number(bytes);
-  if (bytes === 0) {
-    return '0 Bytes';
-  }
+  if (!bytes) return '0 B';
   const k = 1024;
   const dm = 2;
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }