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.
+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.
+2. Click **Open Hasura Console** at the top right of the page.
-3) Copy the **admin secret**, and click **Open Hasura**.
+3. Copy the **admin secret**, and click **Open Hasura**.
-4) Use the **admin secret** to sign in.
+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/03-sign-out.mdx

@@ -31,7 +31,7 @@ nhost.auth.signOut()
 nhost.auth.signOut()
 ```
 
-### Sign out the user from all decvices
+### Sign out the user from all devices
 
 ```ts
 nhost.auth.signOut({ all: true })

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

@@ -4,7 +4,7 @@ title: createMultipleFilesUploadMachine()
 sidebar_label: createMultipleFilesUploadMachine()
 slug: /reference/javascript/storage/create-multiple-files-upload-machine
 description: No description provided.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/machines/multiple-files-upload.ts#L28
+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/upload-file-promise.mdx

@@ -27,6 +27,6 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storag
 
 ---
 
-**<span className="parameter-name">\_\_namedParameters</span>** <span className="optional-status">required</span> `Partial<StorageUploadParams>`
+**<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

@@ -4,7 +4,7 @@ title: uploadMultipleFilesPromise()
 sidebar_label: uploadMultipleFilesPromise()
 slug: /reference/javascript/storage/upload-multiple-files-promise
 description: No description provided.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/promises/multiple-files-upload.ts#L45
+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()`
@@ -23,14 +23,15 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storag
 
 ---
 
-**<span className="parameter-name">service</span>** <span className="optional-status">required</span> `Interpreter<MultipleFilesUploadContext, any, { type: "ADD", files: File | Array<File> } | { type: "UPLOAD", url: string, bucketId: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", additions: number } | { type: "UPLOAD_DONE" } | { type: "UPLOAD_ERROR" } | { type: "CANCEL" } | { type: "REMOVE" } | { type: "CLEAR" }, { value: any, context: MultipleFilesUploadContext }, ResolveTypegenMeta<Typegen0, { type: "ADD", files: File | Array<File> } | { type: "UPLOAD", url: string, bucketId: string, accessToken: string, adminSecret: string } | { type: "UPLOAD_PROGRESS", additions: number } | { type: "UPLOAD_DONE" } | { type: "UPLOAD_ERROR" } | { type: "CANCEL" } | { type: "REMOVE" } | { type: "CLEAR" }, BaseActionObject, ServiceMap>>`
+**<span className="parameter-name">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">options</span>** <span className="optional-status">required</span> [`UploadMultipleFilesActionParams`](/reference/docgen/javascript/storage/types/upload-multiple-files-action-params)
+**<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 |
+| Property                                                                                    | Type                                                                      | Required | Notes |
-| :------------------------------------------------------------------------------------------- | :------- | :------: | :---- |
+| :------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------ | :------: | :---- |
-| <span className="parameter-name"><span className="light-grey">options.</span>bucketId</span> | `string` |          |       |
+| <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/multiple-files-upload-context.mdx

@@ -4,7 +4,7 @@ title: MultipleFilesUploadContext
 sidebar_label: MultipleFilesUploadContext
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/machines/multiple-files-upload.ts#L9
+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`

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

@@ -4,17 +4,18 @@ title: MultipleFilesUploadEvents
 sidebar_label: MultipleFilesUploadEvents
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/machines/multiple-files-upload.ts#L16
+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: File | Array<File> }
+  | { type: 'ADD'; files: AnyFileList; bucketId: string }
   | {
       type: 'UPLOAD'
       url: string
+      files: AnyFileList
       bucketId: string
       accessToken: string
       adminSecret: string

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

@@ -4,7 +4,7 @@ title: MultipleFilesUploadMachine
 sidebar_label: MultipleFilesUploadMachine
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storage-js/src/packages/hasura-storage-js/src/machines/multiple-files-upload.ts#L26
+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/upload-multiple-files-action-params.mdx

@@ -10,5 +10,5 @@ custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/hasura-storag
 # `UploadMultipleFilesActionParams`
 
 ```ts
-type UploadMultipleFilesActionParams = () => { bucketId: string }
+type UploadMultipleFilesActionParams = () => { bucketId: string, files: [AnyFileList](/reference/docgen/javascript/storage/types/any-file-list) }
 ```

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

@@ -4,7 +4,7 @@ title: useFileUploadItem()
 sidebar_label: useFileUploadItem()
 slug: /reference/nextjs/use-file-upload-item
 description: Use the hook `useFileUploadItem` to control the file upload of a file in a multiple file upload.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useFileUpload.ts#L59
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useFileUpload.ts#L61
 ---
 
 # `useFileUploadItem()`

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

@@ -4,7 +4,7 @@ title: useFileUpload()
 sidebar_label: useFileUpload()
 slug: /reference/nextjs/use-file-upload
 description: Use the hook `useFileUpload` to upload a file.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useFileUpload.ts#L129
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useFileUpload.ts#L142
 ---
 
 # `useFileUpload()`

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

@@ -4,7 +4,7 @@ title: useMultipleFilesUpload()
 sidebar_label: useMultipleFilesUpload()
 slug: /reference/nextjs/use-multiple-files-upload
 description: Use the hook `useFileUpload` to upload multiple files.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useMultipleFilesUpload.ts#L52
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useMultipleFilesUpload.ts#L55
 ---
 
 # `useMultipleFilesUpload()`

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

@@ -4,7 +4,7 @@ title: FileUploadHookResult
 sidebar_label: FileUploadHookResult
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useFileUpload.ts#L14
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useFileUpload.ts#L16
 ---
 
 # `FileUploadHookResult`
@@ -67,11 +67,11 @@ Returns the name of the file.
 
 ---
 
-**<span className="parameter-name">add</span>** <span className="optional-status">required</span> `(file: File) => void`
+**<span className="parameter-name">add</span>** <span className="optional-status">required</span> `(params: StorageUploadParams) => void`
 
 ---
 
-**<span className="parameter-name">upload</span>** <span className="optional-status">required</span> `(file: File) => Promise<UploadFileHandlerResult>`
+**<span className="parameter-name">upload</span>** <span className="optional-status">required</span> `(params: Partial<StorageUploadParams>) => Promise<UploadFileHandlerResult>`
 
 ---
 

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

@@ -49,11 +49,11 @@ Returns `true` when all the files have been successfully uploaded.
 
 ---
 
-**<span className="parameter-name">add</span>** <span className="optional-status">required</span> `(files: Array<File>) => void`
+**<span className="parameter-name">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> `(options: UploadMultipleFilesActionParams) => Promise<MultipleFilesHandlerResult>`
+**<span className="parameter-name">upload</span>** <span className="optional-status">required</span> `(params: UploadMultipleFilesActionParams) => Promise<MultipleFilesHandlerResult>`
 
 ---
 

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

@@ -4,7 +4,7 @@ title: useFileUploadItem()
 sidebar_label: useFileUploadItem()
 slug: /reference/react/use-file-upload-item
 description: Use the hook `useFileUploadItem` to control the file upload of a file in a multiple file upload.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useFileUpload.ts#L59
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useFileUpload.ts#L61
 ---
 
 # `useFileUploadItem()`

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

@@ -4,7 +4,7 @@ title: useFileUpload()
 sidebar_label: useFileUpload()
 slug: /reference/react/use-file-upload
 description: Use the hook `useFileUpload` to upload a file.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useFileUpload.ts#L129
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useFileUpload.ts#L142
 ---
 
 # `useFileUpload()`

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

@@ -4,7 +4,7 @@ title: useMultipleFilesUpload()
 sidebar_label: useMultipleFilesUpload()
 slug: /reference/react/use-multiple-files-upload
 description: Use the hook `useFileUpload` to upload multiple files.
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useMultipleFilesUpload.ts#L52
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useMultipleFilesUpload.ts#L55
 ---
 
 # `useMultipleFilesUpload()`

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

@@ -4,7 +4,7 @@ title: FileUploadHookResult
 sidebar_label: FileUploadHookResult
 description: No description provided.
 displayed_sidebar: referenceSidebar
-custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useFileUpload.ts#L14
+custom_edit_url: https://github.com/nhost/nhost/edit/main/packages/react/src/useFileUpload.ts#L16
 ---
 
 # `FileUploadHookResult`
@@ -67,11 +67,11 @@ Returns the name of the file.
 
 ---
 
-**<span className="parameter-name">add</span>** <span className="optional-status">required</span> `(file: File) => void`
+**<span className="parameter-name">add</span>** <span className="optional-status">required</span> `(params: StorageUploadParams) => void`
 
 ---
 
-**<span className="parameter-name">upload</span>** <span className="optional-status">required</span> `(file: File) => Promise<UploadFileHandlerResult>`
+**<span className="parameter-name">upload</span>** <span className="optional-status">required</span> `(params: Partial<StorageUploadParams>) => Promise<UploadFileHandlerResult>`
 
 ---
 

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

@@ -49,11 +49,11 @@ Returns `true` when all the files have been successfully uploaded.
 
 ---
 
-**<span className="parameter-name">add</span>** <span className="optional-status">required</span> `(files: Array<File>) => void`
+**<span className="parameter-name">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> `(options: UploadMultipleFilesActionParams) => Promise<MultipleFilesHandlerResult>`
+**<span className="parameter-name">upload</span>** <span className="optional-status">required</span> `(params: UploadMultipleFilesActionParams) => Promise<MultipleFilesHandlerResult>`
 
 ---
 

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/nhost/metadata/databases/default/tables/storage_files.yaml

@@ -50,6 +50,22 @@ object_relationships:
   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:
@@ -65,6 +81,20 @@ insert_permissions:
     - 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
@@ -80,6 +110,21 @@ select_permissions:
     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:
@@ -95,3 +140,12 @@ update_permissions:
     - 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/src/Storage.tsx

@@ -131,7 +131,7 @@ export const StoragePage: React.FC = () => {
         <Dropzone
           onDrop={([file]) => {
             console.log('accepted file', file)
-            upload(file)
+            upload({ file })
           }}
           onReject={(additions) => console.log('rejected files', additions)}
           multiple={false}
@@ -163,7 +163,7 @@ export const StoragePage: React.FC = () => {
           <Dropzone
             onDrop={(additions) => {
               console.log('accepted files', additions)
-              add(additions)
+              add({ files: additions })
             }}
             onReject={(additions) => console.log('rejected files', additions)}
           >

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">

examples/react-apollo/src/main.tsx

@@ -16,7 +16,8 @@ if (devTools) {
 }
 
 const nhost = new NhostClient({
-  backendUrl: import.meta.env.VITE_NHOST_URL || 'http://localhost:1337',
+  subdomain: import.meta.env.VITE_NHOST_SUBDOMAIN || 'localhost:1337',
+  region: import.meta.env.VITE_NHOST_REGION,
   devTools
 })
 

examples/react-apollo/src/sign-up/email-password.tsx

@@ -18,15 +18,14 @@ export const EmailPassword: React.FC = () => {
     () => password && password !== confirmPassword && 'Should match the given password',
     [password, confirmPassword]
   )
-  const options = useMemo(
-    () => ({ displayName: `${firstName} ${lastName}`, metadata: { firstName, lastName } }),
-    [firstName, lastName]
-  )
   const navigate = useNavigate()
-  const { signUpEmailPassword } = useSignUpEmailPassword(options)
+  const { signUpEmailPassword } = useSignUpEmailPassword()
 
   const signUp = async () => {
-    const result = await signUpEmailPassword(email, password, { metadata: { firstName, lastName } })
+    const result = await signUpEmailPassword(email, password, {
+      metadata: { firstName, lastName, displayName: `${firstName} ${lastName}` },
+      redirectTo: window.location.origin
+    })
     if (result.isError) {
       showNotification({
         color: 'red',

examples/react-apollo/vercel.json

@@ -0,0 +1,3 @@
+{
+  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
+}

packages/apollo/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/apollo
 
+## 0.5.20
+
+### Patch Changes
+
+- @nhost/nhost-js@1.4.4
+
 ## 0.5.19
 
 ### Patch Changes

packages/apollo/package.json

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

packages/hasura-storage-js/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @nhost/hasura-storage-js
 
+## 0.5.0
+
+### Minor Changes
+
+- 4f928756: Extend file upload parameters
+
+  - `bucketId` is available everywhere as an option
+  - It is possible to pass files as a parameter on a multiple `upload`, making the `add` action optional.
+  - The `add` and `upload` actions of multiple file upload accepts both a `File`, an array of `File` items, and a `FileList`
+
 ## 0.4.0
 
 ### Minor Changes

packages/hasura-storage-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/hasura-storage-js",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Hasura-storage client",
   "license": "MIT",
   "keywords": [

packages/hasura-storage-js/src/machines/file-upload.ts

@@ -156,9 +156,9 @@ export const createFileUploadMachine = () =>
                 type: 'UPLOAD_ERROR',
                 error: {
                   status: response?.status ?? 0,
-                  message: response?.data.error?.message || message,
+                  message: response?.data?.error?.message || message,
                   // TODO errors from hasura-storage are not codified
-                  error: response?.data.error?.message || message
+                  error: response?.data?.error?.message || message
                 }
               })
             })

packages/hasura-storage-js/src/machines/multiple-files-upload.ts

@@ -6,6 +6,8 @@ const { pure, sendParent } = actions
 
 export type FileItemRef = ActorRefFrom<FileUploadMachine>
 
+export type AnyFileList = File | File[] | FileList
+
 export type MultipleFilesUploadContext = {
   progress: number | null
   files: FileItemRef[]
@@ -14,8 +16,15 @@ export type MultipleFilesUploadContext = {
 }
 
 export type MultipleFilesUploadEvents =
-  | { type: 'ADD'; files: File | File[] }
+  | { type: 'ADD'; files: AnyFileList; bucketId?: string }
-  | { type: 'UPLOAD'; url: string; bucketId?: string; accessToken?: string; adminSecret?: string }
+  | {
+      type: 'UPLOAD'
+      url: string
+      files?: AnyFileList
+      bucketId?: string
+      accessToken?: string
+      adminSecret?: string
+    }
   | { type: 'UPLOAD_PROGRESS'; additions: number }
   | { type: 'UPLOAD_DONE' }
   | { type: 'UPLOAD_ERROR' }
@@ -42,7 +51,7 @@ export const createMultipleFilesUploadMachine = () => {
       },
       initial: 'idle',
       on: {
-        UPLOAD: { cond: 'hasFileToDownload', target: 'uploading' },
+        UPLOAD: { cond: 'hasFileToDownload', actions: 'addItem', target: 'uploading' },
         ADD: { actions: 'addItem' },
         REMOVE: { actions: 'removeItem' }
       },
@@ -83,8 +92,8 @@ export const createMultipleFilesUploadMachine = () => {
     },
     {
       guards: {
-        hasFileToDownload: (context) =>
+        hasFileToDownload: (context, event) =>
-          context.files.some((ref) => ref.getSnapshot()!.matches('idle')),
+          context.files.some((ref) => ref.getSnapshot()!.matches('idle')) || !!event.files,
         isAllUploaded: (context) =>
           context.files.every((item) => item.getSnapshot()?.matches('uploaded')),
         isAllUploadedOrError: (context) =>
@@ -118,8 +127,14 @@ export const createMultipleFilesUploadMachine = () => {
         resetLoaded: assign({ loaded: (_) => 0 }),
         startProgress: assign({ progress: (_) => 0 }),
         resetProgress: assign({ progress: (_) => null }),
-        addItem: assign((context, { files }) => {
+        addItem: assign((context, { files, bucketId }) => {
-          const additions = Array.isArray(files) ? files : [files]
+          const additions = files
+            ? Array.isArray(files)
+              ? files // File[]
+              : 'length' in files // FileList
+              ? Array.from(files)
+              : [files] // File
+            : [] // No file
           const total = context.total + additions.reduce((agg, curr) => agg + curr.size, 0)
           const progress = Math.round((context.loaded * 100) / total)
           return {
@@ -139,7 +154,7 @@ export const createMultipleFilesUploadMachine = () => {
                         sendDestroy: sendParent('REMOVE')
                       }
                     })
-                    .withContext({ ...INITIAL_FILE_CONTEXT, file }),
+                    .withContext({ ...INITIAL_FILE_CONTEXT, file, bucketId }),
                   { sync: true }
                 )
               )

packages/hasura-storage-js/src/machines/multiple-files-upload.typegen.ts

@@ -3,7 +3,7 @@
 export interface Typegen0 {
   '@@xstate/typegen': true
   eventsCausingActions: {
-    addItem: 'ADD'
+    addItem: 'UPLOAD' | 'ADD'
     removeItem: 'REMOVE'
     clearList: 'CLEAR'
     incrementProgress: 'UPLOAD_PROGRESS'

packages/hasura-storage-js/src/promises/file-upload.ts

@@ -40,18 +40,15 @@ export interface FileUploadState extends UploadFileHandlerResult, UploadProgress
 export const uploadFilePromise = async (
   nhost: NhostClientReturnType,
   interpreter: FileItemRef | InterpreterFrom<FileUploadMachine>,
-  { file, bucketId, id, name }: Partial<StorageUploadParams>
+  params: Partial<StorageUploadParams>
 ): Promise<UploadFileHandlerResult> =>
   new Promise<UploadFileHandlerResult>((resolve) => {
     interpreter.send({
       type: 'UPLOAD',
       url: nhost.storage.url,
-      file,
       accessToken: nhost.auth.getAccessToken(),
       adminSecret: nhost.adminSecret,
-      bucketId,
+      ...params
-      id,
-      name
     })
     interpreter.subscribe((s) => {
       if (s.matches('error')) {

packages/hasura-storage-js/src/promises/multiple-files-upload.ts

@@ -1,6 +1,6 @@
 import { InterpreterFrom } from 'xstate'
 
-import { FileItemRef, MultipleFilesUploadMachine } from '../machines'
+import { AnyFileList, FileItemRef, MultipleFilesUploadMachine } from '../machines'
 import { NhostClientReturnType } from '../utils/types'
 
 export interface MultipleUploadProgressState {
@@ -39,22 +39,23 @@ export interface MultipleFilesUploadState
 }
 
 export type UploadMultipleFilesActionParams = {
+  files?: AnyFileList
   bucketId?: string
 }
 
 export const uploadMultipleFilesPromise = async (
   nhost: NhostClientReturnType,
   service: InterpreterFrom<MultipleFilesUploadMachine>,
-  options: UploadMultipleFilesActionParams = { bucketId: 'default' }
+  params?: UploadMultipleFilesActionParams
 ): Promise<MultipleFilesHandlerResult> =>
   new Promise((resolve) => {
-    const { bucketId } = options
     service.send({
       type: 'UPLOAD',
       url: nhost.storage.url,
-      bucketId,
       accessToken: nhost.auth.getAccessToken(),
-      adminSecret: nhost.adminSecret
+      adminSecret: nhost.adminSecret,
+      bucketId: params?.bucketId,
+      files: params?.files
     })
     service.onTransition((s) => {
       if (s.matches('error')) {

packages/nextjs/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost/nextjs
 
+## 1.6.0
+
+### Patch Changes
+
+- Updated dependencies [4f928756]
+  - @nhost/react@0.11.0
+  - @nhost/nhost-js@1.4.4
+
 ## 1.5.0
 
 ### Patch Changes

packages/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/nextjs",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Nhost NextJS library",
   "license": "MIT",
   "keywords": [

packages/nhost-js/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nhost/nhost-js
 
+## 1.4.4
+
+### Patch Changes
+
+- Updated dependencies [4f928756]
+  - @nhost/hasura-storage-js@0.5.0
+
 ## 1.4.3
 
 ### Patch Changes

packages/nhost-js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/nhost-js",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "description": "Nhost JavaScript SDK",
   "license": "MIT",
   "keywords": [

packages/react-apollo/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @nhost/react-apollo
 
+## 4.6.0
+
+### Patch Changes
+
+- Updated dependencies [4f928756]
+  - @nhost/react@0.11.0
+  - @nhost/apollo@0.5.20
+
 ## 4.5.0
 
 ### Patch Changes

packages/react-apollo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-apollo",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "description": "Nhost React Apollo client",
   "license": "MIT",
   "keywords": [

packages/react-auth/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @nhost/react-auth
 
+## 3.4.0
+
+### Patch Changes
+
+- Updated dependencies [4f928756]
+  - @nhost/react@0.11.0
+
 ## 3.3.0
 
 ### Patch Changes

packages/react-auth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react-auth",
-  "version": "3.3.0",
+  "version": "3.4.0",
   "description": "Nhost React client",
   "license": "MIT",
   "keywords": [

packages/react/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @nhost/react
 
+## 0.11.0
+
+### Minor Changes
+
+- 4f928756: Extend file upload parameters
+
+  - `bucketId` is available everywhere as an option
+  - It is possible to pass files as a parameter on a multiple `upload`, making the `add` action optional.
+  - The `add` and `upload` actions of multiple file upload accepts both a `File`, an array of `File` items, and a `FileList`
+
+### Patch Changes
+
+- Updated dependencies [4f928756]
+  - @nhost/hasura-storage-js@0.5.0
+  - @nhost/nhost-js@1.4.4
+
 ## 0.10.0
 
 ### Minor Changes

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/react",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "Nhost React library",
   "license": "MIT",
   "keywords": [

packages/react/src/useFileUpload.ts

@@ -5,22 +5,24 @@ import {
   FileItemRef,
   FileUploadMachine,
   FileUploadState,
+  StorageUploadParams,
   UploadFileHandlerResult,
   uploadFilePromise
 } from '@nhost/hasura-storage-js'
 import { useInterpret, useSelector } from '@xstate/react'
 
 import { useNhostClient } from './useNhostClient'
+
 export interface FileUploadHookResult extends FileUploadState {
   /**
    * Add the file without uploading it.
    */
-  add: (file: File) => void
+  add: (params: StorageUploadParams) => void
 
   /**
    * Upload the file given as a parameter, or that has been previously added.
    */
-  upload: (file?: File) => Promise<UploadFileHandlerResult>
+  upload: (params: Partial<StorageUploadParams>) => Promise<UploadFileHandlerResult>
 
   /**
    * Cancel the ongoing upload.
@@ -61,11 +63,21 @@ export const useFileUploadItem = (
 ): FileUploadHookResult => {
   const nhost = useNhostClient()
 
-  const add = (file: File) => {
+  const add = (params: StorageUploadParams) => {
-    ref.send({ type: 'ADD', file })
+    ref.send({
+      type: 'ADD',
+      file: params.file,
+      bucketId: params.bucketId || bucketId
+    })
   }
 
-  const upload = (file?: File) => uploadFilePromise(nhost, ref, { file, bucketId, id, name })
+  const upload = (params: Partial<StorageUploadParams>) =>
+    uploadFilePromise(nhost, ref, {
+      file: params.file,
+      bucketId: params.bucketId || bucketId,
+      id,
+      name
+    })
 
   const cancel = () => {
     ref.send('CANCEL')
@@ -106,15 +118,16 @@ export const useFileUploadItem = (
  * @example
  * ```tsx
  * const {  add,
-    upload,
+ *  upload,
-    cancel,
+ *  cancel,
-    isUploaded,
+ *  isUploaded,
-    isUploading,
+ *  isUploading,
-    isError,
+ *  isError,
-    progress,
+ *  progress,
-    id,
+ *  id,
-    bucketId,
+ *  bucketId,
-    name } = useFileUpload();
+ *  name
+ * } = useFileUpload();
  *
  *
  * const handleFormSubmit = async (e) => {

packages/react/src/useMultipleFilesUpload.ts

@@ -16,11 +16,14 @@ export interface MultipleFilesHookResult extends MultipleFilesUploadState {
   /**
    * Add one or multiple files to add to the list of files to upload.
    */
-  add: (files: File[]) => void
+  add: (
+    params: Required<Pick<UploadMultipleFilesActionParams, 'files'>> &
+      UploadMultipleFilesActionParams
+  ) => void
   /**
    * Upload the files that has been previously added to the list.
    */
-  upload: (options?: UploadMultipleFilesActionParams) => Promise<MultipleFilesHandlerResult>
+  upload: (params?: UploadMultipleFilesActionParams) => Promise<MultipleFilesHandlerResult>
   /**
    * Cancel the ongoing upload. The files that have been successfully uploaded will not be deleted from the server.
    */
@@ -38,8 +41,8 @@ export interface MultipleFilesHookResult extends MultipleFilesUploadState {
  * ```tsx
  * const { upload, add, clear, progress, isUploaded, isUploading, files, isError, cancel } = useMultipleFilesUpload()
  *
- * const addFile = async (file: File) => {
+ * const addFile = async (files: File | File[] | FileList) => {
- *   add(file)
+ *   add({ files })
  * }
  *
  * const handleSubmit = async (e) => {
@@ -61,12 +64,15 @@ export const useMultipleFilesUpload = (): MultipleFilesHookResult => {
     }
   })
 
-  const add = (files: File | File[]) => {
+  const add = (
-    service.send('ADD', { files })
+    params: Required<Pick<UploadMultipleFilesActionParams, 'files'>> &
+      UploadMultipleFilesActionParams
+  ) => {
+    service.send({ type: 'ADD', ...params })
   }
 
-  const upload = (options: UploadMultipleFilesActionParams = { bucketId: 'default' }) =>
+  const upload = (params?: UploadMultipleFilesActionParams) =>
-    uploadMultipleFilesPromise(nhost, service, options)
+    uploadMultipleFilesPromise(nhost, service, params)
 
   const cancel = () => {
     service.send('CANCEL')

packages/vue/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nhost/vue
 
+## 0.3.4
+
+### Patch Changes
+
+- @nhost/nhost-js@1.4.4
+
 ## 0.3.3
 
 ### Patch Changes

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nhost/vue",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Nhost Vue library",
   "license": "MIT",
   "keywords": [

turbo.json

@@ -6,6 +6,10 @@
       "dependsOn": ["^build"],
       "outputs": ["dist/**", "umd/**", "build/**", ".next"]
     },
+    "@nhost-examples/react-apollo#build": {
+      "dependsOn": ["^build", "$VITE_NHOST_SUBDOMAIN", "$VITE_NHOST_REGION"],
+      "outputs": ["dist/**"]
+    },
     "test": {
       "dependsOn": ["^build"],
       "outputs": ["coverage/**"]