Merge pull request #765 from nhost/changeset-release/main

chore: update versions

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/01-sign-up.mdx

@@ -4,7 +4,7 @@ title: signUp()
 sidebar_label: signUp()
 slug: /reference/javascript/auth/sign-up
 description: Use `nhost.auth.signUp` to sign up a user using email and password. If you want to sign up a user using passwordless email (Magic Link), SMS, or an OAuth provider, use the `signIn` function instead.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L102
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L103
 ---
 
 # `signUp()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/02-sign-in.mdx

@@ -4,7 +4,7 @@ title: signIn()
 sidebar_label: signIn()
 slug: /reference/javascript/auth/sign-in
 description: Use `nhost.auth.signIn` to sign in a user using email and password, passwordless (email or sms) or an external provider. `signIn` can be used to sign in a user in various ways depending on the parameters.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L145
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L146
 ---
 
 # `signIn()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/03-sign-out.mdx

@@ -4,7 +4,7 @@ title: signOut()
 sidebar_label: signOut()
 slug: /reference/javascript/auth/sign-out
 description: Use `nhost.auth.signOut` to sign out the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L230
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L231
 ---
 
 # `signOut()`
@@ -31,7 +31,7 @@ nhost.auth.signOut()
 nhost.auth.signOut()
 ```
 
-### Sign out the user from all devices
+### Sign out the user from all decvices
 
 ```ts
 nhost.auth.signOut({ all: true })

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/04-reset-password.mdx

@@ -4,7 +4,7 @@ title: resetPassword()
 sidebar_label: resetPassword()
 slug: /reference/javascript/auth/reset-password
 description: Use `nhost.auth.resetPassword` to reset the password for a user. This will send a reset-password link in an email to the user. When the user clicks the reset-password link the user is automatically signed-in. Once signed-in, the user can change their password using `nhost.auth.changePassword()`.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L246
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L247
 ---
 
 # `resetPassword()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/05-change-password.mdx

@@ -4,7 +4,7 @@ title: changePassword()
 sidebar_label: changePassword()
 slug: /reference/javascript/auth/change-password
 description: Use `nhost.auth.changePassword` to change the password for the user. The old password is not needed.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L262
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L263
 ---
 
 # `changePassword()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/06-send-verification-email.mdx

@@ -4,7 +4,7 @@ title: sendVerificationEmail()
 sidebar_label: sendVerificationEmail()
 slug: /reference/javascript/auth/send-verification-email
 description: Use `nhost.auth.sendVerificationEmail` to send a verification email to the specified email. The email contains a verification-email link. When the user clicks the verification-email link their email is verified.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L278
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L279
 ---
 
 # `sendVerificationEmail()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/07-change-email.mdx

@@ -4,7 +4,7 @@ title: changeEmail()
 sidebar_label: changeEmail()
 slug: /reference/javascript/auth/change-email
 description: Use `nhost.auth.changeEmail` to change a user's email. This will send a confirm-email-change link in an email to the new email. Once the user clicks on the confirm-email-change link the email will be change to the new email.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L297
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L298
 ---
 
 # `changeEmail()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/08-deanonymize.mdx

@@ -4,7 +4,7 @@ title: deanonymize()
 sidebar_label: deanonymize()
 slug: /reference/javascript/auth/deanonymize
 description: Use `nhost.auth.deanonymize` to deanonymize a user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L313
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L314
 ---
 
 # `deanonymize()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/09-on-token-changed.mdx

@@ -4,7 +4,7 @@ title: onTokenChanged()
 sidebar_label: onTokenChanged()
 slug: /reference/javascript/auth/on-token-changed
 description: Use `nhost.auth.onTokenChanged` to add a custom function that runs every time the access or refresh token is changed.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L356
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L357
 ---
 
 # `onTokenChanged()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/10-on-auth-state-changed.mdx

@@ -4,7 +4,7 @@ title: onAuthStateChanged()
 sidebar_label: onAuthStateChanged()
 slug: /reference/javascript/auth/on-auth-state-changed
 description: Use `nhost.auth.onAuthStateChanged` to add a custom function that runs every time the authentication status of the user changes. E.g. add a custom function that runs every time the authentication status changes from signed-in to signed-out.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L391
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L392
 ---
 
 # `onAuthStateChanged()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/11-is-authenticated.mdx

@@ -4,7 +4,7 @@ title: isAuthenticated()
 sidebar_label: isAuthenticated()
 slug: /reference/javascript/auth/is-authenticated
 description: Use `nhost.auth.isAuthenticated` to check if the user is authenticated or not.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L433
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L434
 ---
 
 # `isAuthenticated()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/12-is-authenticated-async.mdx

@@ -4,7 +4,7 @@ title: isAuthenticatedAsync()
 sidebar_label: isAuthenticatedAsync()
 slug: /reference/javascript/auth/is-authenticated-async
 description: Use `nhost.auth.isAuthenticatedAsync` to wait (await) for any internal authentication network requests to finish and then return the authentication status.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L451
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L452
 ---
 
 # `isAuthenticatedAsync()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/13-get-authentication-status.mdx

@@ -4,7 +4,7 @@ title: getAuthenticationStatus()
 sidebar_label: getAuthenticationStatus()
 slug: /reference/javascript/auth/get-authentication-status
 description: Use `nhost.auth.getAuthenticationStatus` to get the authentication status of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L477
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L478
 ---
 
 # `getAuthenticationStatus()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/14-get-access-token.mdx

@@ -4,7 +4,7 @@ title: getAccessToken()
 sidebar_label: getAccessToken()
 slug: /reference/javascript/auth/get-access-token
 description: Use `nhost.auth.getAccessToken` to get the access token of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L507
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L508
 ---
 
 # `getAccessToken()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/15-get-decoded-access-token.mdx

@@ -4,7 +4,7 @@ title: getDecodedAccessToken()
 sidebar_label: getDecodedAccessToken()
 slug: /reference/javascript/auth/get-decoded-access-token
 description: Use `nhost.auth.getDecodedAccessToken` to get the decoded access token of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L522
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L523
 ---
 
 # `getDecodedAccessToken()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/16-get-hasura-claims.mdx

@@ -4,7 +4,7 @@ title: getHasuraClaims()
 sidebar_label: getHasuraClaims()
 slug: /reference/javascript/auth/get-hasura-claims
 description: Use `nhost.auth.getHasuraClaims` to get the Hasura claims of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L539
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L540
 ---
 
 # `getHasuraClaims()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/17-get-hasura-claim.mdx

@@ -4,7 +4,7 @@ title: getHasuraClaim()
 sidebar_label: getHasuraClaim()
 slug: /reference/javascript/auth/get-hasura-claim
 description: Use `nhost.auth.getHasuraClaim` to get the value of a specific Hasura claim of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L557
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L558
 ---
 
 # `getHasuraClaim()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/18-refresh-session.mdx

@@ -4,7 +4,7 @@ title: refreshSession()
 sidebar_label: refreshSession()
 slug: /reference/javascript/auth/refresh-session
 description: Use `nhost.auth.refreshSession` to refresh the session with either the current internal refresh token or an external refresh token.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L580
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L581
 ---
 
 # `refreshSession()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/19-get-session.mdx

@@ -4,7 +4,7 @@ title: getSession()
 sidebar_label: getSession()
 slug: /reference/javascript/auth/get-session
 description: Use `nhost.auth.getSession()` to get the session of the user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L624
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L625
 ---
 
 # `getSession()`

docs/docs/reference/docgen/javascript/auth/content/hasura-auth-client/content/20-get-user.mdx

@@ -4,7 +4,7 @@ title: getUser()
 sidebar_label: getUser()
 slug: /reference/javascript/auth/get-user
 description: Use `nhost.auth.getUser()` to get the signed-in user.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L639
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-auth-js/src/hasura-auth-client.ts#L640
 ---
 
 # `getUser()`

docs/docs/reference/docgen/javascript/nhost-js/content/nhost-client/index.mdx

@@ -4,7 +4,7 @@ title: NhostClient
 sidebar_label: NhostClient
 description: No description provided.
 slug: /reference/javascript/nhost-js/nhost-client
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/core/nhost-client.ts#L9
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/nhost-js/src/core/nhost-client.ts#L8
 ---
 
 # `NhostClient`

docs/docs/reference/docgen/javascript/storage/content/create-file-upload-machine.mdx

@@ -0,0 +1,10 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: createFileUploadMachine()
+sidebar_label: createFileUploadMachine()
+slug: /reference/javascript/storage/create-file-upload-machine
+description: No description provided.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/machines/file-upload.ts#L36
+---
+
+# `createFileUploadMachine()`

docs/docs/reference/docgen/javascript/storage/content/create-multiple-files-upload-machine.mdx

@@ -0,0 +1,10 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: createMultipleFilesUploadMachine()
+sidebar_label: createMultipleFilesUploadMachine()
+slug: /reference/javascript/storage/create-multiple-files-upload-machine
+description: No description provided.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/machines/multiple-files-upload.ts#L28
+---
+
+# `createMultipleFilesUploadMachine()`

docs/docs/reference/docgen/javascript/storage/content/hasura-storage-client/content/01-upload.mdx

@@ -4,7 +4,7 @@ title: upload()
 sidebar_label: upload()
 slug: /reference/javascript/storage/upload
 description: Use `nhost.storage.upload` to upload a file. The `file` must be of type [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File).
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L52
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/hasura-storage-client.ts#L52
 ---
 
 # `upload()`

docs/docs/reference/docgen/javascript/storage/content/hasura-storage-client/content/02-get-url.mdx

@@ -5,7 +5,7 @@ sidebar_label: getUrl()
 slug: /reference/javascript/storage/get-url
 sidebar_class_name: deprecated
 description: No description provided.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L74
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/hasura-storage-client.ts#L74
 ---
 
 # `getUrl()`

docs/docs/reference/docgen/javascript/storage/content/hasura-storage-client/content/03-get-public-url.mdx

@@ -4,7 +4,7 @@ title: getPublicUrl()
 sidebar_label: getPublicUrl()
 slug: /reference/javascript/storage/get-public-url
 description: Use `nhost.storage.getPublicUrl` to get the public URL of a file. The public URL can be used for un-authenticated users to access files. To access public files the `public` role must have permissions to select the file in the `storage.files` table.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L88
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/hasura-storage-client.ts#L88
 ---
 
 # `getPublicUrl()`

docs/docs/reference/docgen/javascript/storage/content/hasura-storage-client/content/04-get-presigned-url.mdx

@@ -4,7 +4,7 @@ title: getPresignedUrl()
 sidebar_label: getPresignedUrl()
 slug: /reference/javascript/storage/get-presigned-url
 description: Use `nhost.storage.getPresignedUrl` to get a presigned URL of a file. To get a presigned URL the user must have permission to select the file in the `storage.files` table.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L110
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/hasura-storage-client.ts#L110
 ---
 
 # `getPresignedUrl()`

docs/docs/reference/docgen/javascript/storage/content/hasura-storage-client/content/05-delete.mdx

@@ -4,7 +4,7 @@ title: delete()
 sidebar_label: delete()
 slug: /reference/javascript/storage/delete
 description: Use `nhost.storage.delete` to delete a file. To delete a file the user must have permissions to delete the file in the `storage.files` table. Deleting the file using `nhost.storage.delete()` will delete both the file and its metadata.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L135
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/hasura-storage-client.ts#L135
 ---
 
 # `delete()`

docs/docs/reference/docgen/javascript/storage/content/hasura-storage-client/content/06-set-access-token.mdx

@@ -4,7 +4,7 @@ title: setAccessToken()
 sidebar_label: setAccessToken()
 slug: /reference/javascript/storage/set-access-token
 description: Use `nhost.storage.setAccessToken` to a set an access token to be used in subsequent storage requests. Note that if you're signin in users with `nhost.auth.signIn()` the access token will be set automatically.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L156
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/hasura-storage-client.ts#L156
 ---
 
 # `setAccessToken()`

docs/docs/reference/docgen/javascript/storage/content/hasura-storage-client/content/07-set-admin-secret.mdx

@@ -4,7 +4,7 @@ title: setAdminSecret()
 sidebar_label: setAdminSecret()
 slug: /reference/javascript/storage/set-admin-secret
 description: Use `nhost.storage.adminSecret` to set the admin secret to be used for subsequent storage requests. This is useful if you want to run storage in "admin mode".
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L174
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/hasura-storage-client.ts#L174
 ---
 
 # `setAdminSecret()`

docs/docs/reference/docgen/javascript/storage/content/hasura-storage-client/index.mdx

@@ -4,7 +4,7 @@ title: HasuraStorageClient
 sidebar_label: Storage
 description: No description provided.
 slug: /reference/javascript/storage
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/hasura-storage-client.ts#L25
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/hasura-storage-client.ts#L25
 ---
 
 # `HasuraStorageClient`

docs/docs/reference/docgen/javascript/storage/content/upload-file-promise.mdx

@@ -0,0 +1,32 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: uploadFilePromise()
+sidebar_label: uploadFilePromise()
+slug: /reference/javascript/storage/upload-file-promise
+description: No description provided.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/promises/file-upload.ts#L40
+---
+
+# `uploadFilePromise()`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">nhost</span>** <span className="optional-status">required</span> [`NhostClientReturnType`](/reference/docgen/javascript/storage/types/nhost-client-return-type)
+
+| Property                                                                                      | Type               | Required | Notes |
+| :-------------------------------------------------------------------------------------------- | :----------------- | :------: | :---- |
+| <span className="parameter-name"><span className="light-grey">nhost.</span>storage</span>     | `{ url: string }`  |    ✔️    |       |
+| <span className="parameter-name"><span className="light-grey">nhost.</span>auth</span>        | `HasuraAuthClient` |    ✔️    |       |
+| <span className="parameter-name"><span className="light-grey">nhost.</span>adminSecret</span> | `string`           |          |       |
+
+---
+
+**<span className="parameter-name">interpreter</span>** <span className="optional-status">required</span> `ActorRefWithDeprecatedState<FileUploadContext, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, { value: any, context: FileUploadContext }, ResolveTypegenMeta<Typegen0, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, BaseActionObject, ServiceMap>>` | `Interpreter<FileUploadContext, any, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, { value: any, context: FileUploadContext }, ResolveTypegenMeta<Typegen0, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, BaseActionObject, ServiceMap>>`
+
+---
+
+**<span className="parameter-name">\_\_namedParameters</span>** <span className="optional-status">required</span> `Partial<StorageUploadParams>`
+
+---

docs/docs/reference/docgen/javascript/storage/content/upload-multiple-files-promise.mdx

@@ -0,0 +1,36 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: uploadMultipleFilesPromise()
+sidebar_label: uploadMultipleFilesPromise()
+slug: /reference/javascript/storage/upload-multiple-files-promise
+description: No description provided.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/promises/multiple-files-upload.ts#L45
+---
+
+# `uploadMultipleFilesPromise()`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">nhost</span>** <span className="optional-status">required</span> [`NhostClientReturnType`](/reference/docgen/javascript/storage/types/nhost-client-return-type)
+
+| Property                                                                                      | Type               | Required | Notes |
+| :-------------------------------------------------------------------------------------------- | :----------------- | :------: | :---- |
+| <span className="parameter-name"><span className="light-grey">nhost.</span>auth</span>        | `HasuraAuthClient` |    ✔️    |       |
+| <span className="parameter-name"><span className="light-grey">nhost.</span>storage</span>     | `{ url: string }`  |    ✔️    |       |
+| <span className="parameter-name"><span className="light-grey">nhost.</span>adminSecret</span> | `string`           |          |       |
+
+---
+
+**<span className="parameter-name">service</span>** <span className="optional-status">required</span> `Interpreter<MultipleFilesUploadContext, any, { type: "ADD", files: File | Array<File> } | { type: "UPLOAD", url: string, bucketId: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", additions: number } | { type: "UPLOAD_DONE" } | { type: "UPLOAD_ERROR" } | { type: "CANCEL" } | { type: "REMOVE" } | { type: "CLEAR" }, { value: any, context: MultipleFilesUploadContext }, ResolveTypegenMeta<Typegen0, { type: "ADD", files: File | Array<File> } | { type: "UPLOAD", url: string, bucketId: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", additions: number } | { type: "UPLOAD_DONE" } | { type: "UPLOAD_ERROR" } | { type: "CANCEL" } | { type: "REMOVE" } | { type: "CLEAR" }, BaseActionObject, ServiceMap>>`
+
+---
+
+**<span className="parameter-name">options</span>** <span className="optional-status">required</span> [`UploadMultipleFilesActionParams`](/reference/docgen/javascript/storage/types/upload-multiple-files-action-params)
+
+| Property                                                                                     | Type     | Required | Notes |
+| :------------------------------------------------------------------------------------------- | :------- | :------: | :---- |
+| <span className="parameter-name"><span className="light-grey">options.</span>bucketId</span> | `string` |          |       |
+
+---

docs/docs/reference/docgen/javascript/storage/types/api-delete-params.mdx

@@ -4,7 +4,7 @@ title: ApiDeleteParams
 sidebar_label: ApiDeleteParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/utils/types.ts#L61
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/utils/types.ts#L69
 ---
 
 # `ApiDeleteParams`

docs/docs/reference/docgen/javascript/storage/types/api-delete-response.mdx

@@ -4,7 +4,7 @@ title: ApiDeleteResponse
 sidebar_label: ApiDeleteResponse
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/utils/types.ts#L65
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/utils/types.ts#L73
 ---
 
 # `ApiDeleteResponse`

docs/docs/reference/docgen/javascript/storage/types/api-get-presigned-url-params.mdx

@@ -4,7 +4,7 @@ title: ApiGetPresignedUrlParams
 sidebar_label: ApiGetPresignedUrlParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/utils/types.ts#L53
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/utils/types.ts#L61
 ---
 
 # `ApiGetPresignedUrlParams`

docs/docs/reference/docgen/javascript/storage/types/api-get-presigned-url-response.mdx

@@ -4,7 +4,7 @@ title: ApiGetPresignedUrlResponse
 sidebar_label: ApiGetPresignedUrlResponse
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/utils/types.ts#L57
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/utils/types.ts#L65
 ---
 
 # `ApiGetPresignedUrlResponse`

docs/docs/reference/docgen/javascript/storage/types/api-upload-params.mdx

@@ -4,7 +4,7 @@ title: ApiUploadParams
 sidebar_label: ApiUploadParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/utils/types.ts#L42
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/utils/types.ts#L50
 ---
 
 # `ApiUploadParams`

docs/docs/reference/docgen/javascript/storage/types/api-upload-response.mdx

@@ -4,7 +4,7 @@ title: ApiUploadResponse
 sidebar_label: ApiUploadResponse
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/utils/types.ts#L49
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/utils/types.ts#L57
 ---
 
 # `ApiUploadResponse`

docs/docs/reference/docgen/javascript/storage/types/file-item-ref.mdx

@@ -0,0 +1,10 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: FileItemRef
+sidebar_label: FileItemRef
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/machines/multiple-files-upload.ts#L7
+---
+
+# `FileItemRef`

docs/docs/reference/docgen/javascript/storage/types/file-upload-context.mdx

@@ -0,0 +1,21 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: FileUploadContext
+sidebar_label: FileUploadContext
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/machines/file-upload.ts#L6
+---
+
+# `FileUploadContext`
+
+```ts
+type FileUploadContext = () => {
+  progress: number | null
+  loaded: number
+  error: ErrorPayload | null
+  id: string
+  bucketId: string
+  file: File
+}
+```

docs/docs/reference/docgen/javascript/storage/types/file-upload-events.mdx

@@ -0,0 +1,35 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: FileUploadEvents
+sidebar_label: FileUploadEvents
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/machines/file-upload.ts#L15
+---
+
+# `FileUploadEvents`
+
+```ts
+type FileUploadEvents =
+  | { type: 'ADD'; file: File; id: string; bucketId: string; name: string }
+  | {
+      type: 'UPLOAD'
+      url: string
+      file: File
+      id: string
+      bucketId: string
+      name: string
+      accessToken: string
+      adminSecret: string
+    }
+  | {
+      type: 'UPLOAD_PROGRESS'
+      progress: number
+      loaded: number
+      additions: number
+    }
+  | { type: 'UPLOAD_DONE'; id: string; bucketId: string }
+  | { type: 'UPLOAD_ERROR'; error: ErrorPayload }
+  | { type: 'CANCEL' }
+  | { type: 'DESTROY' }
+```

docs/docs/reference/docgen/javascript/storage/types/file-upload-machine.mdx

@@ -0,0 +1,10 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: FileUploadMachine
+sidebar_label: FileUploadMachine
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/machines/file-upload.ts#L35
+---
+
+# `FileUploadMachine`

docs/docs/reference/docgen/javascript/storage/types/file-upload-state.mdx

@@ -0,0 +1,68 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: FileUploadState
+sidebar_label: FileUploadState
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/promises/file-upload.ts#L38
+---
+
+# `FileUploadState`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">isError</span>** <span className="optional-status">required</span> `boolean`
+
+**`@returns`**
+
+`true` if an error occurred
+
+**`@depreacted`**
+
+use `!isSuccess` or `!!error` instead
+
+---
+
+**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | `ErrorPayload`
+
+Provides details about the error
+
+---
+
+**<span className="parameter-name">isUploading</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when the file is being uploaded.
+
+---
+
+**<span className="parameter-name">progress</span>** <span className="optional-status">required</span> `null` | `number`
+
+Returns the progress of the upload, from 0 to 100. Returns null if the upload has not started yet.
+
+---
+
+**<span className="parameter-name">isUploaded</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when the file has been successfully uploaded.
+
+---
+
+**<span className="parameter-name">id</span>** <span className="optional-status">optional</span> `string`
+
+Returns the id of the file.
+
+---
+
+**<span className="parameter-name">bucketId</span>** <span className="optional-status">optional</span> `string`
+
+Returns the bucket id.
+
+---
+
+**<span className="parameter-name">name</span>** <span className="optional-status">optional</span> `string`
+
+Returns the name of the file.
+
+---

docs/docs/reference/docgen/javascript/storage/types/multiple-files-handler-result.mdx

@@ -0,0 +1,32 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: MultipleFilesHandlerResult
+sidebar_label: MultipleFilesHandlerResult
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/promises/multiple-files-upload.ts#L17
+---
+
+# `MultipleFilesHandlerResult`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">files</span>** <span className="optional-status">required</span> `Array<ActorRefWithDeprecatedState<FileUploadContext, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, { value: any, context: FileUploadContext }, ResolveTypegenMeta<Typegen0, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, BaseActionObject, ServiceMap>>>`
+
+The list of file uploads. The properties can be accessed through `item.getSnapshot()` of with the `useFileUploadItem` hook.
+
+---
+
+**<span className="parameter-name">isError</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when all upload request are processed, but at least one of them has failed.
+
+---
+
+**<span className="parameter-name">errors</span>** <span className="optional-status">required</span> `Array<ActorRefWithDeprecatedState<FileUploadContext, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, { value: any, context: FileUploadContext }, ResolveTypegenMeta<Typegen0, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, BaseActionObject, ServiceMap>>>`
+
+Returns the list of file uploads that have failed
+
+---

docs/docs/reference/docgen/javascript/storage/types/multiple-files-upload-context.mdx

@@ -0,0 +1,14 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: MultipleFilesUploadContext
+sidebar_label: MultipleFilesUploadContext
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/machines/multiple-files-upload.ts#L9
+---
+
+# `MultipleFilesUploadContext`
+
+```ts
+type MultipleFilesUploadContext = () => { progress: number | null, files: Array<[FileItemRef](/reference/docgen/javascript/storage/types/file-item-ref)>, loaded: number, total: number }
+```

docs/docs/reference/docgen/javascript/storage/types/multiple-files-upload-events.mdx

@@ -0,0 +1,28 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: MultipleFilesUploadEvents
+sidebar_label: MultipleFilesUploadEvents
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/machines/multiple-files-upload.ts#L16
+---
+
+# `MultipleFilesUploadEvents`
+
+```ts
+type MultipleFilesUploadEvents =
+  | { type: 'ADD'; files: File | Array<File> }
+  | {
+      type: 'UPLOAD'
+      url: string
+      bucketId: string
+      accessToken: string
+      adminSecret: string
+    }
+  | { type: 'UPLOAD_PROGRESS'; additions: number }
+  | { type: 'UPLOAD_DONE' }
+  | { type: 'UPLOAD_ERROR' }
+  | { type: 'CANCEL' }
+  | { type: 'REMOVE' }
+  | { type: 'CLEAR' }
+```

docs/docs/reference/docgen/javascript/storage/types/multiple-files-upload-machine.mdx

@@ -0,0 +1,10 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: MultipleFilesUploadMachine
+sidebar_label: MultipleFilesUploadMachine
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/machines/multiple-files-upload.ts#L26
+---
+
+# `MultipleFilesUploadMachine`

docs/docs/reference/docgen/javascript/storage/types/multiple-files-upload-state.mdx

@@ -0,0 +1,50 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: MultipleFilesUploadState
+sidebar_label: MultipleFilesUploadState
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/promises/multiple-files-upload.ts#L32
+---
+
+# `MultipleFilesUploadState`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">isUploading</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when the files are being uploaded.
+
+---
+
+**<span className="parameter-name">progress</span>** <span className="optional-status">required</span> `null` | `number`
+
+Returns the overall progress of the upload, from 0 to 100. Returns null if the upload has not started yet.
+
+---
+
+**<span className="parameter-name">files</span>** <span className="optional-status">required</span> `Array<ActorRefWithDeprecatedState<FileUploadContext, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, { value: any, context: FileUploadContext }, ResolveTypegenMeta<Typegen0, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, BaseActionObject, ServiceMap>>>`
+
+The list of file uploads. The properties can be accessed through `item.getSnapshot()` of with the `useFileUploadItem` hook.
+
+---
+
+**<span className="parameter-name">isError</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when all upload request are processed, but at least one of them has failed.
+
+---
+
+**<span className="parameter-name">errors</span>** <span className="optional-status">required</span> `Array<ActorRefWithDeprecatedState<FileUploadContext, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, { value: any, context: FileUploadContext }, ResolveTypegenMeta<Typegen0, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, BaseActionObject, ServiceMap>>>`
+
+Returns the list of file uploads that have failed
+
+---
+
+**<span className="parameter-name">isUploaded</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when all the files have been successfully uploaded.
+
+---

docs/docs/reference/docgen/javascript/storage/types/multiple-upload-progress-state.mdx

@@ -0,0 +1,26 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: MultipleUploadProgressState
+sidebar_label: MultipleUploadProgressState
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/promises/multiple-files-upload.ts#L6
+---
+
+# `MultipleUploadProgressState`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">isUploading</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when the files are being uploaded.
+
+---
+
+**<span className="parameter-name">progress</span>** <span className="optional-status">required</span> `null` | `number`
+
+Returns the overall progress of the upload, from 0 to 100. Returns null if the upload has not started yet.
+
+---

docs/docs/reference/docgen/javascript/storage/types/nhost-client-return-type.mdx

@@ -0,0 +1,26 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: NhostClientReturnType
+sidebar_label: NhostClientReturnType
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/utils/types.ts#L4
+---
+
+# `NhostClientReturnType`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">auth</span>** <span className="optional-status">required</span> `HasuraAuthClient`
+
+---
+
+**<span className="parameter-name">storage</span>** <span className="optional-status">required</span> `{ url: string }`
+
+---
+
+**<span className="parameter-name">adminSecret</span>** <span className="optional-status">optional</span> `string`
+
+---

docs/docs/reference/docgen/javascript/storage/types/storage-delete-params.mdx

@@ -4,7 +4,7 @@ title: StorageDeleteParams
 sidebar_label: StorageDeleteParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/utils/types.ts#L24
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/utils/types.ts#L32
 ---
 
 # `StorageDeleteParams`

docs/docs/reference/docgen/javascript/storage/types/storage-delete-response.mdx

@@ -4,7 +4,7 @@ title: StorageDeleteResponse
 sidebar_label: StorageDeleteResponse
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/utils/types.ts#L28
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/utils/types.ts#L36
 ---
 
 # `StorageDeleteResponse`

docs/docs/reference/docgen/javascript/storage/types/storage-get-presigned-url-params.mdx

@@ -4,7 +4,7 @@ title: StorageGetPresignedUrlParams
 sidebar_label: StorageGetPresignedUrlParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/utils/types.ts#L16
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/utils/types.ts#L24
 ---
 
 # `StorageGetPresignedUrlParams`

docs/docs/reference/docgen/javascript/storage/types/storage-get-presigned-url-response.mdx

@@ -4,7 +4,7 @@ title: StorageGetPresignedUrlResponse
 sidebar_label: StorageGetPresignedUrlResponse
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/utils/types.ts#L20
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/utils/types.ts#L28
 ---
 
 # `StorageGetPresignedUrlResponse`

docs/docs/reference/docgen/javascript/storage/types/storage-get-url-params.mdx

@@ -4,7 +4,7 @@ title: StorageGetUrlParams
 sidebar_label: StorageGetUrlParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/utils/types.ts#L12
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/utils/types.ts#L20
 ---
 
 # `StorageGetUrlParams`

docs/docs/reference/docgen/javascript/storage/types/storage-upload-params.mdx

@@ -4,7 +4,7 @@ title: StorageUploadParams
 sidebar_label: StorageUploadParams
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/utils/types.ts#L1
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/utils/types.ts#L9
 ---
 
 # `StorageUploadParams`

docs/docs/reference/docgen/javascript/storage/types/storage-upload-response.mdx

@@ -4,7 +4,7 @@ title: StorageUploadResponse
 sidebar_label: StorageUploadResponse
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/utils/types.ts#L8
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/utils/types.ts#L16
 ---
 
 # `StorageUploadResponse`

docs/docs/reference/docgen/javascript/storage/types/upload-file-handler-result.mdx

@@ -0,0 +1,56 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: UploadFileHandlerResult
+sidebar_label: UploadFileHandlerResult
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/promises/file-upload.ts#L19
+---
+
+# `UploadFileHandlerResult`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">isError</span>** <span className="optional-status">required</span> `boolean`
+
+**`@returns`**
+
+`true` if an error occurred
+
+**`@depreacted`**
+
+use `!isSuccess` or `!!error` instead
+
+---
+
+**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | `ErrorPayload`
+
+Provides details about the error
+
+---
+
+**<span className="parameter-name">isUploaded</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when the file has been successfully uploaded.
+
+---
+
+**<span className="parameter-name">id</span>** <span className="optional-status">optional</span> `string`
+
+Returns the id of the file.
+
+---
+
+**<span className="parameter-name">bucketId</span>** <span className="optional-status">optional</span> `string`
+
+Returns the bucket id.
+
+---
+
+**<span className="parameter-name">name</span>** <span className="optional-status">optional</span> `string`
+
+Returns the name of the file.
+
+---

docs/docs/reference/docgen/javascript/storage/types/upload-headers.mdx

@@ -4,7 +4,7 @@ title: UploadHeaders
 sidebar_label: UploadHeaders
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/utils/types.ts#L69
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/utils/types.ts#L77
 ---
 
 # `UploadHeaders`

docs/docs/reference/docgen/javascript/storage/types/upload-multiple-files-action-params.mdx

@@ -0,0 +1,14 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: UploadMultipleFilesActionParams
+sidebar_label: UploadMultipleFilesActionParams
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/promises/multiple-files-upload.ts#L41
+---
+
+# `UploadMultipleFilesActionParams`
+
+```ts
+type UploadMultipleFilesActionParams = () => { bucketId: string }
+```

docs/docs/reference/docgen/javascript/storage/types/upload-progress-state.mdx

@@ -0,0 +1,26 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: UploadProgressState
+sidebar_label: UploadProgressState
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/promises/file-upload.ts#L8
+---
+
+# `UploadProgressState`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">isUploading</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when the file is being uploaded.
+
+---
+
+**<span className="parameter-name">progress</span>** <span className="optional-status">required</span> `null` | `number`
+
+Returns the progress of the upload, from 0 to 100. Returns null if the upload has not started yet.
+
+---

docs/docs/reference/docgen/nextjs/content/use-file-upload-item.mdx

@@ -0,0 +1,44 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: useFileUploadItem()
+sidebar_label: useFileUploadItem()
+slug: /reference/nextjs/use-file-upload-item
+description: Use the hook `useFileUploadItem` to control the file upload of a file in a multiple file upload.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useFileUpload.ts#L59
+---
+
+# `useFileUploadItem()`
+
+Use the hook `useFileUploadItem` to control the file upload of a file in a multiple file upload.
+
+It has the same signature as `useFileUpload`.
+
+```tsx
+const Item = ({ itemRef }) => {
+  const { name, progress } = useFileUploadItem(itemRef)
+  return (
+    <li>
+      {name} {progress}
+    </li>
+  )
+}
+
+const List = () => {
+  const { list } = useMultipleFilesUpload()
+  return (
+    <ul>
+      {list.map((itemRef) => (
+        <Item key={item.id} itemRef={item} />
+      ))}
+    </ul>
+  )
+}
+```
+
+## Parameters
+
+---
+
+**<span className="parameter-name">ref</span>** <span className="optional-status">required</span> `ActorRefWithDeprecatedState<FileUploadContext, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, { value: any, context: FileUploadContext }, ResolveTypegenMeta<Typegen0, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, BaseActionObject, ServiceMap>>` | `Interpreter<FileUploadContext, any, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, { value: any, context: FileUploadContext }, ResolveTypegenMeta<Typegen0, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, BaseActionObject, ServiceMap>>`
+
+---

docs/docs/reference/docgen/nextjs/content/use-file-upload.mdx

@@ -0,0 +1,33 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: useFileUpload()
+sidebar_label: useFileUpload()
+slug: /reference/nextjs/use-file-upload
+description: Use the hook `useFileUpload` to upload a file.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useFileUpload.ts#L129
+---
+
+# `useFileUpload()`
+
+Use the hook `useFileUpload` to upload a file.
+
+```tsx
+const {
+  add,
+  upload,
+  cancel,
+  isUploaded,
+  isUploading,
+  isError,
+  progress,
+  id,
+  bucketId,
+  name
+} = useFileUpload()
+
+const handleFormSubmit = async (e) => {
+  e.preventDefault()
+
+  await upload({ file })
+}
+```

docs/docs/reference/docgen/nextjs/content/use-multiple-files-upload.mdx

@@ -0,0 +1,12 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: useMultipleFilesUpload()
+sidebar_label: useMultipleFilesUpload()
+slug: /reference/nextjs/use-multiple-files-upload
+description: Use the hook `useFileUpload` to upload multiple files.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useMultipleFilesUpload.ts#L52
+---
+
+# `useMultipleFilesUpload()`
+
+Use the hook `useFileUpload` to upload multiple files.

docs/docs/reference/docgen/nextjs/content/use-nhost-backend-url.mdx

@@ -3,13 +3,17 @@
 title: useNhostBackendUrl()
 sidebar_label: useNhostBackendUrl()
 slug: /reference/nextjs/use-nhost-backend-url
-description: Use the hook `useNhostBackendUrl` to get the Nhost backend URL.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useNhostBackendUrl.ts#L15
+sidebar_class_name: deprecated
+description: No description provided.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useNhostBackendUrl.ts#L16
 ---
 
 # `useNhostBackendUrl()`
 
+:::caution Deprecated
+Nhost services can now be split to subdomains to improve performance with CDN. Use `nhost.auth.url` or `nhost.storage.url` instead.
 Use the hook `useNhostBackendUrl` to get the Nhost backend URL.
+:::
 
 ```tsx
 const nhostBackendUrl = useNhostBackendUrl()

docs/docs/reference/docgen/nextjs/types/file-item-ref.mdx

@@ -0,0 +1,10 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: FileItemRef
+sidebar_label: FileItemRef
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/machines/multiple-files-upload.ts#L7
+---
+
+# `FileItemRef`

docs/docs/reference/docgen/nextjs/types/file-upload-hook-result.mdx

@@ -0,0 +1,80 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: FileUploadHookResult
+sidebar_label: FileUploadHookResult
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useFileUpload.ts#L14
+---
+
+# `FileUploadHookResult`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">isError</span>** <span className="optional-status">required</span> `boolean`
+
+**`@returns`**
+
+`true` if an error occurred
+
+**`@depreacted`**
+
+use `!isSuccess` or `!!error` instead
+
+---
+
+**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | `ErrorPayload`
+
+Provides details about the error
+
+---
+
+**<span className="parameter-name">isUploading</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when the file is being uploaded.
+
+---
+
+**<span className="parameter-name">progress</span>** <span className="optional-status">required</span> `null` | `number`
+
+Returns the progress of the upload, from 0 to 100. Returns null if the upload has not started yet.
+
+---
+
+**<span className="parameter-name">isUploaded</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when the file has been successfully uploaded.
+
+---
+
+**<span className="parameter-name">id</span>** <span className="optional-status">optional</span> `string`
+
+Returns the id of the file.
+
+---
+
+**<span className="parameter-name">bucketId</span>** <span className="optional-status">optional</span> `string`
+
+Returns the bucket id.
+
+---
+
+**<span className="parameter-name">name</span>** <span className="optional-status">optional</span> `string`
+
+Returns the name of the file.
+
+---
+
+**<span className="parameter-name">add</span>** <span className="optional-status">required</span> `(file: File) => void`
+
+---
+
+**<span className="parameter-name">upload</span>** <span className="optional-status">required</span> `(file: File) => Promise<UploadFileHandlerResult>`
+
+---
+
+**<span className="parameter-name">cancel</span>** <span className="optional-status">required</span> `() => void`
+
+---

docs/docs/reference/docgen/nextjs/types/multiple-files-hook-result.mdx

@@ -0,0 +1,66 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: MultipleFilesHookResult
+sidebar_label: MultipleFilesHookResult
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useMultipleFilesUpload.ts#L15
+---
+
+# `MultipleFilesHookResult`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">isUploading</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when the files are being uploaded.
+
+---
+
+**<span className="parameter-name">progress</span>** <span className="optional-status">required</span> `null` | `number`
+
+Returns the overall progress of the upload, from 0 to 100. Returns null if the upload has not started yet.
+
+---
+
+**<span className="parameter-name">files</span>** <span className="optional-status">required</span> `Array<ActorRefWithDeprecatedState<FileUploadContext, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, { value: any, context: FileUploadContext }, ResolveTypegenMeta<Typegen0, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, BaseActionObject, ServiceMap>>>`
+
+The list of file uploads. The properties can be accessed through `item.getSnapshot()` of with the `useFileUploadItem` hook.
+
+---
+
+**<span className="parameter-name">isError</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when all upload request are processed, but at least one of them has failed.
+
+---
+
+**<span className="parameter-name">errors</span>** <span className="optional-status">required</span> `Array<ActorRefWithDeprecatedState<FileUploadContext, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, { value: any, context: FileUploadContext }, ResolveTypegenMeta<Typegen0, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, BaseActionObject, ServiceMap>>>`
+
+Returns the list of file uploads that have failed
+
+---
+
+**<span className="parameter-name">isUploaded</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when all the files have been successfully uploaded.
+
+---
+
+**<span className="parameter-name">add</span>** <span className="optional-status">required</span> `(files: Array<File>) => void`
+
+---
+
+**<span className="parameter-name">upload</span>** <span className="optional-status">required</span> `(options: UploadMultipleFilesActionParams) => Promise<MultipleFilesHandlerResult>`
+
+---
+
+**<span className="parameter-name">cancel</span>** <span className="optional-status">required</span> `() => void`
+
+---
+
+**<span className="parameter-name">clear</span>** <span className="optional-status">required</span> `() => void`
+
+---

docs/docs/reference/docgen/react/content/use-file-upload-item.mdx

@@ -0,0 +1,44 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: useFileUploadItem()
+sidebar_label: useFileUploadItem()
+slug: /reference/react/use-file-upload-item
+description: Use the hook `useFileUploadItem` to control the file upload of a file in a multiple file upload.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useFileUpload.ts#L59
+---
+
+# `useFileUploadItem()`
+
+Use the hook `useFileUploadItem` to control the file upload of a file in a multiple file upload.
+
+It has the same signature as `useFileUpload`.
+
+```tsx
+const Item = ({ itemRef }) => {
+  const { name, progress } = useFileUploadItem(itemRef)
+  return (
+    <li>
+      {name} {progress}
+    </li>
+  )
+}
+
+const List = () => {
+  const { list } = useMultipleFilesUpload()
+  return (
+    <ul>
+      {list.map((itemRef) => (
+        <Item key={item.id} itemRef={item} />
+      ))}
+    </ul>
+  )
+}
+```
+
+## Parameters
+
+---
+
+**<span className="parameter-name">ref</span>** <span className="optional-status">required</span> `ActorRefWithDeprecatedState<FileUploadContext, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, { value: any, context: FileUploadContext }, ResolveTypegenMeta<Typegen0, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, BaseActionObject, ServiceMap>>` | `Interpreter<FileUploadContext, any, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, { value: any, context: FileUploadContext }, ResolveTypegenMeta<Typegen0, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, BaseActionObject, ServiceMap>>`
+
+---

docs/docs/reference/docgen/react/content/use-file-upload.mdx

@@ -0,0 +1,33 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: useFileUpload()
+sidebar_label: useFileUpload()
+slug: /reference/react/use-file-upload
+description: Use the hook `useFileUpload` to upload a file.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useFileUpload.ts#L129
+---
+
+# `useFileUpload()`
+
+Use the hook `useFileUpload` to upload a file.
+
+```tsx
+const {
+  add,
+  upload,
+  cancel,
+  isUploaded,
+  isUploading,
+  isError,
+  progress,
+  id,
+  bucketId,
+  name
+} = useFileUpload()
+
+const handleFormSubmit = async (e) => {
+  e.preventDefault()
+
+  await upload({ file })
+}
+```

docs/docs/reference/docgen/react/content/use-multiple-files-upload.mdx

@@ -0,0 +1,12 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: useMultipleFilesUpload()
+sidebar_label: useMultipleFilesUpload()
+slug: /reference/react/use-multiple-files-upload
+description: Use the hook `useFileUpload` to upload multiple files.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useMultipleFilesUpload.ts#L52
+---
+
+# `useMultipleFilesUpload()`
+
+Use the hook `useFileUpload` to upload multiple files.

docs/docs/reference/docgen/react/content/use-nhost-backend-url.mdx

@@ -3,13 +3,17 @@
 title: useNhostBackendUrl()
 sidebar_label: useNhostBackendUrl()
 slug: /reference/react/use-nhost-backend-url
-description: Use the hook `useNhostBackendUrl` to get the Nhost backend URL.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useNhostBackendUrl.ts#L15
+sidebar_class_name: deprecated
+description: No description provided.
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useNhostBackendUrl.ts#L16
 ---
 
 # `useNhostBackendUrl()`
 
+:::caution Deprecated
+Nhost services can now be split to subdomains to improve performance with CDN. Use `nhost.auth.url` or `nhost.storage.url` instead.
 Use the hook `useNhostBackendUrl` to get the Nhost backend URL.
+:::
 
 ```tsx
 const nhostBackendUrl = useNhostBackendUrl()

docs/docs/reference/docgen/react/types/file-item-ref.mdx

@@ -0,0 +1,10 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: FileItemRef
+sidebar_label: FileItemRef
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/machines/multiple-files-upload.ts#L7
+---
+
+# `FileItemRef`

docs/docs/reference/docgen/react/types/file-upload-hook-result.mdx

@@ -0,0 +1,80 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: FileUploadHookResult
+sidebar_label: FileUploadHookResult
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useFileUpload.ts#L14
+---
+
+# `FileUploadHookResult`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">isError</span>** <span className="optional-status">required</span> `boolean`
+
+**`@returns`**
+
+`true` if an error occurred
+
+**`@depreacted`**
+
+use `!isSuccess` or `!!error` instead
+
+---
+
+**<span className="parameter-name">error</span>** <span className="optional-status">required</span> `null` | `ErrorPayload`
+
+Provides details about the error
+
+---
+
+**<span className="parameter-name">isUploading</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when the file is being uploaded.
+
+---
+
+**<span className="parameter-name">progress</span>** <span className="optional-status">required</span> `null` | `number`
+
+Returns the progress of the upload, from 0 to 100. Returns null if the upload has not started yet.
+
+---
+
+**<span className="parameter-name">isUploaded</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when the file has been successfully uploaded.
+
+---
+
+**<span className="parameter-name">id</span>** <span className="optional-status">optional</span> `string`
+
+Returns the id of the file.
+
+---
+
+**<span className="parameter-name">bucketId</span>** <span className="optional-status">optional</span> `string`
+
+Returns the bucket id.
+
+---
+
+**<span className="parameter-name">name</span>** <span className="optional-status">optional</span> `string`
+
+Returns the name of the file.
+
+---
+
+**<span className="parameter-name">add</span>** <span className="optional-status">required</span> `(file: File) => void`
+
+---
+
+**<span className="parameter-name">upload</span>** <span className="optional-status">required</span> `(file: File) => Promise<UploadFileHandlerResult>`
+
+---
+
+**<span className="parameter-name">cancel</span>** <span className="optional-status">required</span> `() => void`
+
+---

docs/docs/reference/docgen/react/types/multiple-files-hook-result.mdx

@@ -0,0 +1,66 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: MultipleFilesHookResult
+sidebar_label: MultipleFilesHookResult
+description: No description provided.
+displayed_sidebar: referenceSidebar
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useMultipleFilesUpload.ts#L15
+---
+
+# `MultipleFilesHookResult`
+
+## Parameters
+
+---
+
+**<span className="parameter-name">isUploading</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when the files are being uploaded.
+
+---
+
+**<span className="parameter-name">progress</span>** <span className="optional-status">required</span> `null` | `number`
+
+Returns the overall progress of the upload, from 0 to 100. Returns null if the upload has not started yet.
+
+---
+
+**<span className="parameter-name">files</span>** <span className="optional-status">required</span> `Array<ActorRefWithDeprecatedState<FileUploadContext, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, { value: any, context: FileUploadContext }, ResolveTypegenMeta<Typegen0, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, BaseActionObject, ServiceMap>>>`
+
+The list of file uploads. The properties can be accessed through `item.getSnapshot()` of with the `useFileUploadItem` hook.
+
+---
+
+**<span className="parameter-name">isError</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when all upload request are processed, but at least one of them has failed.
+
+---
+
+**<span className="parameter-name">errors</span>** <span className="optional-status">required</span> `Array<ActorRefWithDeprecatedState<FileUploadContext, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, { value: any, context: FileUploadContext }, ResolveTypegenMeta<Typegen0, { type: "ADD", file: File, id: string, bucketId: string, name: string } | { type: "UPLOAD", url: string, file: File, id: string, bucketId: string, name: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", progress: number, loaded: number, additions: number } | { type: "UPLOAD_DONE", id: string, bucketId: string } | { type: "UPLOAD_ERROR", error: ErrorPayload } | { type: "CANCEL" } | { type: "DESTROY" }, BaseActionObject, ServiceMap>>>`
+
+Returns the list of file uploads that have failed
+
+---
+
+**<span className="parameter-name">isUploaded</span>** <span className="optional-status">required</span> `boolean`
+
+Returns `true` when all the files have been successfully uploaded.
+
+---
+
+**<span className="parameter-name">add</span>** <span className="optional-status">required</span> `(files: Array<File>) => void`
+
+---
+
+**<span className="parameter-name">upload</span>** <span className="optional-status">required</span> `(options: UploadMultipleFilesActionParams) => Promise<MultipleFilesHandlerResult>`
+
+---
+
+**<span className="parameter-name">cancel</span>** <span className="optional-status">required</span> `() => void`
+
+---
+
+**<span className="parameter-name">clear</span>** <span className="optional-status">required</span> `() => void`
+
+---

examples/docker-compose/README.md

@@ -17,6 +17,7 @@ The following endpoints are now exposed:
 - `http://localhost:1337/v1/graphql`: Hasura GraphQL endpoint
 - `http://localhost:1337/v1/auth`: Hasura Auth
 - `http://localhost:1337/v1/storage`: Hasura Storage
+- `http://localhost:1337/v1/functions`: Functions
 
 - `http://localhost:9090`: Traefik dashboad
 - `http://localhost:8025`: Mailhog SMTP testing dashboard

examples/docker-compose/docker-compose.yaml

@@ -100,6 +100,24 @@ services:
       - "traefik.http.middlewares.strip-suffix.replacepathregex.replacement=/v1/$$1"
       - "traefik.http.routers.storage.middlewares=strip-suffix@docker"
     command: serve
+  functions:
+    build: docker-functions
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.middlewares.strip-functions.stripprefix.prefixes=/v1/functions"
+      - "traefik.http.routers.functions.rule=Host(`localhost`) && PathPrefix(`/v1/functions`)"
+      - "traefik.http.routers.functions.middlewares=strip-functions@docker"
+      - "traefik.http.routers.functions.entrypoints=web"
+    restart: always
+    expose: 
+      - 3000
+    healthcheck:
+      disable: true
+    volumes:
+      - .:/opt/project
+      - functions_node_modules:/opt/project/node_modules
+      - /opt/project/data/
+      - /opt/project/initdb.d/
   minio:
     image: minio/minio:RELEASE.2021-09-24T00-24-24Z
     entrypoint: sh
@@ -125,3 +143,5 @@ services:
       - 8025:8025
     volumes:
       - ./data/mailhog:/maildir
+volumes:
+  functions_node_modules:

examples/docker-compose/docker-functions/Dockerfile

@@ -0,0 +1,37 @@
+FROM node:14-alpine
+
+# * Same version as in Watchtower
+ARG EXPRESS_VERSION 4.17.1
+ENV EXPRESS_VERSION $EXPRESS_VERSION
+
+# * path to the server files 
+ARG SERVER_PATH /opt/server
+ENV SERVER_PATH=$SERVER_PATH
+
+# * Required to access to the globally installed modules
+ENV NODE_PATH=/usr/local/lib/node_modules
+
+# * Add path to the stored pnpm packages
+ENV PNPM_HOME=/root/.local/share/pnpm
+ENV PATH=$PATH:$PNPM_HOME
+
+# * Directory where the Nhost project is located
+ENV NHOST_PROJECT_PATH=/opt/project
+
+# * Default package manager
+ENV PACKAGE_MANAGER=pnpm
+
+# * Install packages that are required for this docker image to run
+RUN npm install -g pnpm nodemon express@$EXPRESS_VERSION glob @swc-node/register typescript @antfu/ni
+
+# * The pnpm store should be mounted in the same volume as node_modules (requires hard links)
+# * See https://pnpm.io/6.x/npmrc#store-dir
+RUN pnpm config set store-dir $NHOST_PROJECT_PATH/node_modules/.pnpm-store
+
+# * Copy server files
+COPY nodemon.json start.sh server.ts $SERVER_PATH/
+
+# * Change working directory to the Nhost project directory
+WORKDIR $NHOST_PROJECT_PATH
+
+CMD $SERVER_PATH/start.sh

examples/docker-compose/docker-functions/nodemon.json

@@ -0,0 +1,7 @@
+{
+  "ignore": ["!(package*.json|pnpm-*.yaml|yarn.lock)"],
+  "execMap": {
+    "json": "ni && nodemon -w functions -x 'node -r @swc-node/register' $SERVER_PATH/server.ts"
+  },
+  "ext": "json,yaml,lock"
+}

examples/docker-compose/docker-functions/server.ts

@@ -0,0 +1,37 @@
+import path from 'path'
+
+import express from 'express'
+import glob from 'glob'
+
+const PORT = 3000
+
+const main = async () => {
+  const app = express()
+
+  // * Same settings as in Watchtower
+  app.use(express.json())
+  app.use(express.urlencoded({ extended: true }))
+  app.disable('x-powered-by')
+
+  const functionsPath = path.join(process.cwd(), 'functions')
+  const files = glob.sync('**/*.@(js|ts)', { cwd: functionsPath })
+
+  for (const file of files) {
+    const { default: handler } = await import(path.join(functionsPath, file))
+    if (handler) {
+      const route = `/${file}`
+        .replace(/(\.ts|\.js)$/, '')
+        .replace(/\/index$/, '/')
+      app.all(route, handler)
+      console.log(`Loaded route ${route} from ./functions/${file}`)
+    } else {
+      console.warn(`No default export in ./functions/${file}`)
+    }
+  }
+
+  app.listen(PORT, () => {
+    console.log(`Listening on port ${PORT}`)
+  })
+}
+
+main()

examples/docker-compose/docker-functions/start.sh

@@ -0,0 +1,9 @@
+# * Set the default package manager to use if cannot be guessed from lock files
+echo "defaultAgent=$PACKAGE_MANAGER" > ~/.nirc
+
+# * Create a default package.json file if it doesn't exist yet
+npm init -y 1> /dev/null
+
+# * Start nodemon that listens to package.json and lock files and run npm/pnpm/yarn install,
+# * Then run another nodemon that listens to the functions directory and run the server
+nodemon --config $SERVER_PATH/nodemon.json package.json

examples/docker-compose/functions/hello.ts

@@ -0,0 +1,3 @@
+export default (req, res) => {
+  res.status(200).send(`Hullo, ${req.query.name}!`)
+}

examples/docker-compose/functions/index.js

@@ -0,0 +1,3 @@
+export default (req, res) => {
+  res.status(200).send(`This is the index function`)
+}

examples/docker-compose/functions/sub/hello.ts

@@ -0,0 +1,3 @@
+export default (req, res) => {
+  res.status(200).send(`Hello from a subdirectory, ${req.query.name}!`)
+}

examples/docker-compose/functions/sub/index.ts

@@ -0,0 +1,3 @@
+export default (req, res) => {
+  res.status(200).send(`Index function in a sub-directory`)
+}

examples/nextjs/layouts/SignInLayout.tsx

@@ -9,7 +9,7 @@ export const SignInLayout: React.FC<{ title?: string; children: React.ReactNode
   const { signInAnonymous } = useSignInAnonymous()
   const signIn = async () => {
     await signInAnonymous()
-    // TODO capture error
+    // TODO capture errors
   }
   return (
     <AuthLayout

examples/nextjs/package.json

@@ -37,6 +37,6 @@
     "eslint-config-next": "12.0.10",
     "typescript": "4.5.5",
     "ws": "^8.5.0",
-    "xstate": "^4.31.0"
+    "xstate": "^4.32.1"
   }
 }

examples/react-apollo/cypress/e2e/4-authenticated/file-uploads.cy.ts

@@ -0,0 +1,48 @@
+context('File uploads', () => {
+  it('should upload a single file', () => {
+    cy.signUpAndConfirmEmail()
+    cy.findByRole('button', { name: /Storage/i }).click()
+    cy.findByRole('button', { name: /Drag a file here or click to select/i })
+      .children('input[type=file]')
+      .selectFile(
+        {
+          contents: Cypress.Buffer.from('file contents'),
+          fileName: 'file.txt',
+          mimeType: 'text/plain',
+          lastModified: Date.now()
+        },
+        { force: true }
+      )
+      .parent()
+      .contains('Successfully uploaded')
+  })
+
+  it('should upload multiple files', () => {
+    const files: Required<Cypress.FileReferenceObject>[] = [
+      {
+        contents: Cypress.Buffer.from('file contents'),
+        fileName: 'file1.txt',
+        mimeType: 'text/plain',
+        lastModified: Date.now()
+      },
+      {
+        contents: Cypress.Buffer.from('file contents'),
+        fileName: 'file2.txt',
+        mimeType: 'text/plain',
+        lastModified: Date.now()
+      }
+    ]
+    cy.signUpAndConfirmEmail()
+    cy.findByRole('button', { name: /Storage/i }).click()
+    cy.findByRole('button', { name: /Drag files here or click to select/i })
+      .children('input[type=file]')
+      .selectFile(files, { force: true })
+    cy.findByRole('button', { name: /Upload/i }).click()
+    cy.findByRole('button', { name: /Successfully uploaded/i }).should('be.visible')
+    cy.findByRole('table').within(() => {
+      files.forEach((file) => {
+        cy.contains(file.fileName).parent().findByTitle('success').should('exist')
+      })
+    })
+  })
+})

examples/react-apollo/nhost/metadata/actions.graphql

@@ -1,2 +0,0 @@
-
-

examples/react-apollo/nhost/metadata/databases/default/tables/storage_files.yaml

@@ -49,3 +49,49 @@ object_relationships:
 - name: bucket
   using:
     foreign_key_constraint_on: bucket_id
+insert_permissions:
+- permission:
+    check: {}
+    columns:
+    - is_uploaded
+    - size
+    - bucket_id
+    - etag
+    - mime_type
+    - name
+    - created_at
+    - updated_at
+    - id
+    - uploaded_by_user_id
+  role: user
+select_permissions:
+- permission:
+    columns:
+    - is_uploaded
+    - size
+    - bucket_id
+    - etag
+    - mime_type
+    - name
+    - created_at
+    - updated_at
+    - id
+    - uploaded_by_user_id
+    filter: {}
+  role: user
+update_permissions:
+- permission:
+    check: {}
+    columns:
+    - is_uploaded
+    - size
+    - bucket_id
+    - etag
+    - mime_type
+    - name
+    - created_at
+    - updated_at
+    - id
+    - uploaded_by_user_id
+    filter: {}
+  role: user

examples/react-apollo/package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@apollo/client": "^3.6.2",
     "@mantine/core": "^4.2.2",
+    "@mantine/dropzone": "^4.2.6",
     "@mantine/hooks": "^4.2.2",
     "@mantine/notifications": "^4.2.2",
     "@mantine/prism": "^4.2.2",
@@ -63,6 +64,6 @@
     "typescript": "^4.6.3",
     "vite": "^2.9.7",
     "ws": "^8.7.0",
-    "xstate": "^4.31.0"
+    "xstate": "^4.32.1"
   }
 }

examples/react-apollo/src/App.tsx

@@ -11,6 +11,7 @@ import Home from './Home'
 import { ProfilePage } from './profile'
 import { SignInPage } from './sign-in'
 import { SignUpPage } from './sign-up'
+import { StoragePage } from './Storage'
 
 import './App.css'
 const title = 'Nhost with React and Apollo'
@@ -75,6 +76,14 @@ function App() {
                 </AuthGate>
               }
             />
+            <Route
+              path="/storage"
+              element={
+                <AuthGate>
+                  <StoragePage />
+                </AuthGate>
+              }
+            />
             <Route
               path="/apollo"
               element={

examples/react-apollo/src/Storage.tsx

@@ -0,0 +1,222 @@
+import React from 'react'
+import {
+  FaCheck,
+  FaCheckCircle,
+  FaCloudUploadAlt,
+  FaExclamationTriangle,
+  FaMinus
+} from 'react-icons/fa'
+
+import {
+  ActionIcon,
+  Button,
+  Card,
+  Center,
+  Container,
+  Grid,
+  Group,
+  MantineTheme,
+  Progress,
+  RingProgress,
+  SimpleGrid,
+  Table,
+  Text,
+  ThemeIcon,
+  Title,
+  useMantineTheme
+} from '@mantine/core'
+import { Dropzone, DropzoneStatus } from '@mantine/dropzone'
+import { FileItemRef, useFileUpload, useFileUploadItem, useMultipleFilesUpload } from '@nhost/react'
+
+function getIconColor(status: DropzoneStatus, theme: MantineTheme) {
+  return status.accepted
+    ? theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6]
+    : status.rejected
+    ? theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6]
+    : theme.colorScheme === 'dark'
+    ? theme.colors.dark[0]
+    : theme.colors.gray[7]
+}
+
+export const DropzoneChildren: React.FC<
+  React.PropsWithChildren<{
+    status: DropzoneStatus
+    theme: MantineTheme
+    success: boolean
+    error: boolean
+    progress: number
+  }>
+> = ({ status, theme, success, progress, error, children }) => (
+  <Grid style={{ pointerEvents: 'none' }} align="center">
+    <Grid.Col span={4}>
+      {success ? (
+        <RingProgress
+          sections={[{ value: 100, color: 'teal' }]}
+          label={
+            <Center>
+              <ThemeIcon color="teal" variant="light" radius="xl" size="xl">
+                <FaCheckCircle size={22} />
+              </ThemeIcon>
+            </Center>
+          }
+        />
+      ) : error ? (
+        <Center>
+          <FaExclamationTriangle style={{ color: 'red', maxWidth: '80px' }} size={80} />
+        </Center>
+      ) : progress ? (
+        <RingProgress
+          sections={[{ value: progress, color: 'blue' }]}
+          label={
+            <Center>
+              <Text color="blue" weight={700} size="xl">
+                {progress}%
+              </Text>
+            </Center>
+          }
+        />
+      ) : (
+        <Center>
+          <FaCloudUploadAlt
+            style={{ color: getIconColor(status, theme), maxWidth: '80px' }}
+            size={80}
+          />
+        </Center>
+      )}
+    </Grid.Col>
+    <Grid.Col span={8}>
+      <Center>{children}</Center>
+    </Grid.Col>
+  </Grid>
+)
+
+const ListItem: React.FC<React.PropsWithChildren<{ fileRef: FileItemRef }>> = ({ fileRef }) => {
+  const { progress, isUploaded, name, isError, destroy } = useFileUploadItem(fileRef)
+  return (
+    <tr>
+      <td>
+        {name} {isError && <FaExclamationTriangle color="red" />}
+      </td>
+      <td>{progress && <Progress value={progress} />}</td>
+      <td>
+        <ActionIcon onClick={destroy}>
+          {isUploaded ? <FaCheck color="teal" title="success" /> : <FaMinus />}
+        </ActionIcon>
+      </td>
+    </tr>
+  )
+}
+
+export const StoragePage: React.FC = () => {
+  const { upload, progress, isUploaded, isUploading, isError } = useFileUpload()
+  const {
+    add,
+    upload: uploadAll,
+    progress: progressAll,
+    isUploaded: uploadedAll,
+    isUploading: uploadingAll,
+    isError: isErrorAll,
+    files,
+    clear,
+    cancel
+  } = useMultipleFilesUpload()
+  const theme = useMantineTheme()
+
+  return (
+    <Container>
+      <Title>Storage</Title>
+      <Card shadow="sm" p="lg" m="sm">
+        <Title order={2}>Upload a single file</Title>
+
+        <Dropzone
+          onDrop={([file]) => {
+            console.log('accepted file', file)
+            upload(file)
+          }}
+          onReject={(additions) => console.log('rejected files', additions)}
+          multiple={false}
+        >
+          {(status) => (
+            <DropzoneChildren
+              status={status}
+              theme={theme}
+              success={isUploaded}
+              progress={progress || 0}
+              error={isError}
+            >
+              {isUploaded ? (
+                <Text size="xl">Successfully uploaded</Text>
+              ) : isUploading ? (
+                <Text size="xl">Uploading...</Text>
+              ) : isError ? (
+                <Text size="xl">Error uploading the file</Text>
+              ) : (
+                <Text size="xl">Drag a file here or click to select</Text>
+              )}
+            </DropzoneChildren>
+          )}
+        </Dropzone>
+      </Card>
+      <Card shadow="sm" p="lg" m="sm">
+        <Title order={2}>Upload multiple files</Title>
+        <SimpleGrid cols={1}>
+          <Dropzone
+            onDrop={(additions) => {
+              console.log('accepted files', additions)
+              add(additions)
+            }}
+            onReject={(additions) => console.log('rejected files', additions)}
+          >
+            {(status) => (
+              <DropzoneChildren
+                status={status}
+                theme={theme}
+                success={uploadedAll}
+                error={isErrorAll}
+                progress={progressAll || 0}
+              >
+                {uploadedAll ? (
+                  <Text size="xl">Successfully uploaded</Text>
+                ) : uploadingAll ? (
+                  <Text size="xl">Uploading...</Text>
+                ) : isErrorAll ? (
+                  <div>Error uploading some files</div>
+                ) : (
+                  <Text size="xl">Drag files here or click to select</Text>
+                )}
+              </DropzoneChildren>
+            )}
+          </Dropzone>
+          <Table style={{ width: '100%', maxWidth: '100%' }}>
+            <colgroup>
+              <col />
+              <col width="20%" />
+              <col />
+            </colgroup>
+            <tbody>
+              {files.map((ref) => (
+                <ListItem key={ref.id} fileRef={ref} />
+              ))}
+            </tbody>
+          </Table>
+          <Group grow>
+            <Button
+              leftIcon={<FaCloudUploadAlt size={14} />}
+              onClick={() => uploadAll()}
+              loading={uploadingAll}
+            >
+              Upload
+            </Button>
+            {uploadingAll ? (
+              <Button onClick={cancel}>Cancel</Button>
+            ) : (
+              <Button leftIcon={<FaCloudUploadAlt size={14} />} onClick={() => clear()}>
+                Clear
+              </Button>
+            )}
+          </Group>
+        </SimpleGrid>
+      </Card>
+    </Container>
+  )
+}

examples/react-apollo/src/components/NavBar.tsx

@@ -1,4 +1,4 @@
-import { FaHouseUser, FaQuestion, FaSignOutAlt } from 'react-icons/fa'
+import { FaFile, FaHouseUser, FaQuestion, FaSignOutAlt } from 'react-icons/fa'
 import { SiApollographql } from 'react-icons/si'
 import { useLocation, useNavigate } from 'react-router'
 import { Link } from 'react-router-dom'
@@ -52,6 +52,7 @@ const MenuItem: React.FC<MenuItemProps> = ({ icon, color, label, link, action })
 const data: MenuItemProps[] = [
   { icon: <FaHouseUser size={16} />, label: 'Home', link: '/' },
   { icon: <FaHouseUser size={16} />, label: 'Profile', link: '/profile' },
+  { icon: <FaFile size={16} />, label: 'Storage', link: '/storage' },
   { icon: <SiApollographql size={16} />, label: 'Apollo', link: '/apollo' },
   { icon: <FaQuestion size={16} />, label: 'About', link: '/about' }
 ]

package.json

@@ -38,6 +38,7 @@
   },
   "workspaces": [
     "packages/*",
+    "examples/*",
     "docs"
   ],
   "devDependencies": {

packages/apollo/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/apollo
 
+## 0.5.19
+
+### Patch Changes
+
+- @nhost/nhost-js@1.4.3
+
 ## 0.5.18
 
 ### Patch Changes

packages/apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/apollo",
-  "version": "0.5.18",
+  "version": "0.5.19",
   "description": "Nhost Apollo Client library",
   "license": "MIT",
   "keywords": [

packages/core/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nhost/core
 
+## 0.7.3
+
+### Patch Changes
+
+- f9854b15: Upload multiple files with `useMultipleFilesUpload`
+- f9854b15: `useFileUpload`: keep track of upload progress and cancel upload
+
 ## 0.7.2
 
 ### Patch Changes

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/core",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "Nhost core client library",
   "license": "MIT",
   "keywords": [
@@ -58,7 +58,7 @@
   "dependencies": {
     "axios": "^0.27.2",
     "js-cookie": "^3.0.1",
-    "xstate": "^4.31.0"
+    "xstate": "^4.32.1"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.2",