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

chore: update versions

docs/docs/platform/database/index.mdx

@@ -21,10 +21,10 @@ The database is managed via the Hasura Console where you can manage the database
 
 Hasura Console is where you manage your database. This is where you create and manage tables, schemas, and data.
 
-1) Open the Hasura Console by clicking on **GraphQL** in the top menu in the Nhost Dashboard.
-2) Click **Open Hasura Console** at the top right of the page.
-3) Copy the **admin secret**, and click **Open Hasura**.
-4) Use the **admin secret** to sign in.
+1. Open the Hasura Console by clicking on **GraphQL** in the top menu in the Nhost Dashboard.
+2. Click **Open Hasura Console** at the top right of the page.
+3. Copy the **admin secret**, and click **Open Hasura**.
+4. Use the **admin secret** to sign in.
 
 <video width="99%" autoPlay muted loop controls="true">
   <source src="/videos/open-hasura-console.mp4" type="video/mp4" />
@@ -131,6 +131,21 @@ To track database changes, use the [Nhost CLI](/platform/cli) to develop locally
 
 Learn how to [get started with Nhost CLI](/platform/overview/get-started-with-nhost-cli).
 
+## Seed Data
+
+Seed data is a way of automatically adding data to your database using SQL when a new environment is created. This is, for the moment, only applicable when you're using the [Nhost CLI](/platform/cli) to develop locally. When you're running `nhost up` for the first time, seed data is added.
+
+In the future, seed data will also be added to new preview environments.
+
+Seed data should be located in `nhost/seeds/default/` and are executed in alphabetical order.
+
+**Example:** Two seed scripts with countries and products.
+
+```text
+nhost/seeds/default/001-countries.sql
+nhost/seeds/default/002-products.sql
+```
+
 ## Backups
 
 Databases on [Pro and Enterprise plans](https://nhost.io/pricing) are backed up automatically.

docs/docs/reference/cli/up.mdx

@@ -7,7 +7,7 @@ Launch the development environment for your app. Once the environment is up, the
 
 - Apply database migrations.
 - Apply the Hasura metadata.
-- Apply seed data.
+- Apply [seed data](/platform/database#seed-data).
 
 ```bash
 nhost up

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()`

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#L37
+---
+
+# `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">params</span>** <span className="optional-status">required</span> `Partial<StorageUploadParams>`
+
+---

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

@@ -0,0 +1,37 @@
+---
+# ⚠️ 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#L46
+---
+
+# `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: AnyFileList, bucketId: string } | { type: "UPLOAD", url: string, files: AnyFileList, 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: AnyFileList, bucketId: string } | { type: "UPLOAD", url: string, files: AnyFileList, 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">params</span>** <span className="optional-status">optional</span> [`UploadMultipleFilesActionParams`](/reference/docgen/javascript/storage/types/upload-multiple-files-action-params)
+
+| Property                                                                                    | Type                                                                      | Required | Notes |
+| :------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------ | :------: | :---- |
+| <span className="parameter-name"><span className="light-grey">params.</span>bucketId</span> | `string`                                                                  |          |       |
+| <span className="parameter-name"><span className="light-grey">params.</span>files</span>    | [`AnyFileList`](/reference/docgen/javascript/storage/types/any-file-list) |          |       |
+
+---

docs/docs/reference/docgen/javascript/storage/types/any-file-list.mdx

@@ -0,0 +1,14 @@
+---
+# ⚠️ AUTO-GENERATED CONTENT. DO NOT EDIT THIS FILE DIRECTLY! ⚠️
+title: AnyFileList
+sidebar_label: AnyFileList
+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
+---
+
+# `AnyFileList`
+
+```ts
+type AnyFileList = File | Array<File> | FileList
+```

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#L11
+---
+
+# `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,29 @@
+---
+# ⚠️ 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#L18
+---
+
+# `MultipleFilesUploadEvents`
+
+```ts
+type MultipleFilesUploadEvents =
+  | { type: 'ADD'; files: AnyFileList; bucketId: string }
+  | {
+      type: 'UPLOAD'
+      url: string
+      files: AnyFileList
+      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#L35
+---
+
+# `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, files: [AnyFileList](/reference/docgen/javascript/storage/types/any-file-list) }
+```

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#L61
+---
+
+# `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#L142
+---
+
+# `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#L55
+---
+
+# `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#L16
+---
+
+# `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> `(params: StorageUploadParams) => void`
+
+---
+
+**<span className="parameter-name">upload</span>** <span className="optional-status">required</span> `(params: Partial<StorageUploadParams>) => 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> `(params: Required<Pick<UploadMultipleFilesActionParams, "files">> & UploadMultipleFilesActionParams) => void`
+
+---
+
+**<span className="parameter-name">upload</span>** <span className="optional-status">required</span> `(params: 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#L61
+---
+
+# `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#L142
+---
+
+# `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#L55
+---
+
+# `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#L16
+---
+
+# `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> `(params: StorageUploadParams) => void`
+
+---
+
+**<span className="parameter-name">upload</span>** <span className="optional-status">required</span> `(params: Partial<StorageUploadParams>) => 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> `(params: Required<Pick<UploadMultipleFilesActionParams, "files">> & UploadMultipleFilesActionParams) => void`
+
+---
+
+**<span className="parameter-name">upload</span>** <span className="optional-status">required</span> `(params: 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/README.md

@@ -1,5 +1,9 @@
 # React-Apollo example
 
+## See this example live
+
+Visit our demo application on [react-apollo.example.nhost.io](https://react-apollo.example.nhost.io)
+
 ## Get started
 
 1. Clone the repository
@@ -22,7 +26,7 @@ pnpm install
 nhost dev
 ```
 
-4. Terminal 2: Start React App
+4. Terminal 2: Start the React application
 
 ```sh
 pnpm run dev

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,103 @@ object_relationships:
 - name: bucket
   using:
     foreign_key_constraint_on: bucket_id
+insert_permissions:
+- permission:
+    check:
+      size:
+        _lt: 1024000
+    columns:
+    - is_uploaded
+    - size
+    - bucket_id
+    - etag
+    - mime_type
+    - name
+    - created_at
+    - updated_at
+    - id
+    - uploaded_by_user_id
+  role: anonymous
+- 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: anonymous
+- 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: anonymous
+- permission:
+    check: {}
+    columns:
+    - is_uploaded
+    - size
+    - bucket_id
+    - etag
+    - mime_type
+    - name
+    - created_at
+    - updated_at
+    - id
+    - uploaded_by_user_id
+    filter: {}
+  role: user
+delete_permissions:
+- permission:
+    backend_only: false
+    filter: {}
+  role: anonymous
+- permission:
+    backend_only: false
+    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({ files: 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' }
 ]

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

@@ -5,7 +5,7 @@ import { useProviderLink } from '@nhost/react'
 import AuthLink from './AuthLink'
 
 export default function OauthLinks() {
-  const { github, google, facebook } = useProviderLink()
+  const { github, google, facebook } = useProviderLink({ redirectTo: window.location.origin })
   return (
     <>
       <AuthLink leftIcon={<FaGithub />} link={github} color="#333">