From a924abf4c18a3845dd6bcb0514802f513efbd247 Mon Sep 17 00:00:00 2001
From: Travis Vachon <travis.vachon@protocol.ai>
Date: Wed, 20 Dec 2023 07:22:07 -0800
Subject: [PATCH] feat: support multi file upload and directory wrapping (#615)

Make backwards compatible API changes to support multi-file upload and
directory wrapping.

Also support directory selection, wrapping the wonky builtin API with
something a little cleaner.

Revive the multi file upload and uploads lists examples!
---
 examples/react/components/src/Uploader.tsx    |  53 +++++---
 .../react/multi-file-upload/.eslintrc.cjs     |  20 +++
 examples/react/multi-file-upload/.gitignore   |  24 ++++
 examples/react/multi-file-upload/README.md    |   8 ++
 examples/react/multi-file-upload/index.html   |  13 ++
 examples/react/multi-file-upload/package.json |  32 +++++
 .../react/multi-file-upload/postcss.config.js |   6 +
 examples/react/multi-file-upload/src/App.tsx  |  43 +++++++
 .../react/multi-file-upload/src/index.css     |  26 ++++
 examples/react/multi-file-upload/src/main.jsx |  10 ++
 .../multi-file-upload/tailwind.config.js      |  13 ++
 .../react/multi-file-upload/vite.config.js    |  11 ++
 examples/react/uploads-list/.eslintrc.cjs     |  20 +++
 examples/react/uploads-list/.gitignore        |  24 ++++
 examples/react/uploads-list/README.md         |   8 ++
 examples/react/uploads-list/index.html        |  13 ++
 examples/react/uploads-list/package.json      |  33 +++++
 examples/react/uploads-list/postcss.config.js |   6 +
 examples/react/uploads-list/src/App.tsx       |  76 +++++++++++
 examples/react/uploads-list/src/index.css     |  26 ++++
 examples/react/uploads-list/src/main.jsx      |  10 ++
 .../react/uploads-list/tailwind.config.js     |  13 ++
 examples/react/uploads-list/vite.config.js    |  11 ++
 .../playwright/src/multi-file-upload.spec.ts  |   4 +-
 .../test/playwright/src/uploads-list.spec.ts  |   4 +-
 packages/react/src/Uploader.tsx               | 113 +++++++++++++---
 packages/react/test/Uploader.spec.tsx         |  87 ++++++++++++-
 pnpm-lock.yaml                                | 121 ++++++++++++++++++
 28 files changed, 779 insertions(+), 49 deletions(-)
 create mode 100644 examples/react/multi-file-upload/.eslintrc.cjs
 create mode 100644 examples/react/multi-file-upload/.gitignore
 create mode 100644 examples/react/multi-file-upload/README.md
 create mode 100644 examples/react/multi-file-upload/index.html
 create mode 100644 examples/react/multi-file-upload/package.json
 create mode 100644 examples/react/multi-file-upload/postcss.config.js
 create mode 100644 examples/react/multi-file-upload/src/App.tsx
 create mode 100644 examples/react/multi-file-upload/src/index.css
 create mode 100644 examples/react/multi-file-upload/src/main.jsx
 create mode 100644 examples/react/multi-file-upload/tailwind.config.js
 create mode 100644 examples/react/multi-file-upload/vite.config.js
 create mode 100644 examples/react/uploads-list/.eslintrc.cjs
 create mode 100644 examples/react/uploads-list/.gitignore
 create mode 100644 examples/react/uploads-list/README.md
 create mode 100644 examples/react/uploads-list/index.html
 create mode 100644 examples/react/uploads-list/package.json
 create mode 100644 examples/react/uploads-list/postcss.config.js
 create mode 100644 examples/react/uploads-list/src/App.tsx
 create mode 100644 examples/react/uploads-list/src/index.css
 create mode 100644 examples/react/uploads-list/src/main.jsx
 create mode 100644 examples/react/uploads-list/tailwind.config.js
 create mode 100644 examples/react/uploads-list/vite.config.js

diff --git a/examples/react/components/src/Uploader.tsx b/examples/react/components/src/Uploader.tsx
index ea228cc2..8ae8f1fd 100644
--- a/examples/react/components/src/Uploader.tsx
+++ b/examples/react/components/src/Uploader.tsx
@@ -9,14 +9,16 @@ function humanFileSize (bytes: number): string {
 
 interface UploadingProps {
   file?: File
+  files?: File[]
   storedDAGShards: CARMetadata[]
   uploadProgress: UploadProgress
 }
 
-function Uploading ({ file, storedDAGShards, uploadProgress }: UploadingProps): ReactNode {
+function Uploading ({ file, files, storedDAGShards, uploadProgress }: UploadingProps): ReactNode {
+  const fileName = ((files != null) && files.length > 1) ? 'your files' : file?.name
   return (
     <div className='flex flex-col items-center w-full'>
-      <h1 className='font-bold text-sm uppercase text-zinc-950'>Uploading {file?.name}</h1>
+      <h1 className='font-bold text-sm uppercase text-zinc-950'>Uploading {fileName}</h1>
       <UploadLoader uploadProgress={uploadProgress} />
       {storedDAGShards?.map(({ cid, size }) => (
         <p className='text-xs max-w-full overflow-hidden text-ellipsis' key={cid.toString()}>
@@ -40,20 +42,22 @@ function Errored ({ error }: { error?: Error }): ReactNode {
 
 interface DoneProps {
   file?: File
+  files?: File[]
   dataCID?: AnyLink
   storedDAGShards: CARMetadata[]
 }
 
-const Done = ({ file, dataCID, storedDAGShards }: DoneProps): ReactNode => {
+const Done = ({ file, files, dataCID, storedDAGShards }: DoneProps): ReactNode => {
   const cidString: string = dataCID?.toString() ?? ''
+  const fileName = ((files != null) && files.length > 1) ? 'your files' : file?.name
   return (
     <div>
-      <h1 className='near-white'>Done!</h1>
-      <p className='f6 code truncate'>{cidString}</p>
-      <p><a href={`https://w3s.link/ipfs/${cidString}`} className='blue'>View {file?.name} on IPFS Gateway.</a></p>
-      <p className='near-white'>Chunks ({storedDAGShards.length}):</p>
+      <h1 className='text-gray-800'>Done!</h1>
+      <p className='truncate'>{cidString}</p>
+      <p><a href={`https://w3s.link/ipfs/${cidString}`} className='text-blue-800'>View {fileName} on IPFS Gateway.</a></p>
+      <p className='text-gray-800'>Chunks ({storedDAGShards.length}):</p>
       {storedDAGShards.map(({ cid, size }) => (
-        <p key={cid.toString()} className='f7 truncate'>
+        <p key={cid.toString()} className='truncate'>
           {cid.toString()} ({size} bytes)
         </p>
       ))}
@@ -62,16 +66,16 @@ const Done = ({ file, dataCID, storedDAGShards }: DoneProps): ReactNode => {
 }
 
 function UploaderConsole (): ReactNode {
-  const [{ status, file, error, dataCID, storedDAGShards, uploadProgress }] =
+  const [{ status, file, files, error, dataCID, storedDAGShards, uploadProgress }] =
     useUploader()
 
   switch (status) {
     case UploadStatus.Uploading: {
-      return <Uploading file={file} storedDAGShards={storedDAGShards} uploadProgress={uploadProgress} />
+      return <Uploading file={file} files={files} storedDAGShards={storedDAGShards} uploadProgress={uploadProgress} />
     }
     case UploadStatus.Succeeded: {
       return (
-        <Done file={file} dataCID={dataCID} storedDAGShards={storedDAGShards} />
+        <Done file={file} files={files} dataCID={dataCID} storedDAGShards={storedDAGShards} />
       )
     }
     case UploadStatus.Failed: {
@@ -84,19 +88,21 @@ function UploaderConsole (): ReactNode {
 }
 
 function UploaderContents (): ReactNode {
-  const [{ status, file }] = useUploader()
+  const [{ status, file, files }] = useUploader()
   const hasFile = file !== undefined
   if (status === UploadStatus.Idle) {
     return hasFile
       ? (
         <>
-          <div className='flex flex-row'>
-            <div className='flex flex-col justify-around'>
-              <span className='text-sm'>{file.name}</span>
-              <span className='text-xs text-white/75 font-mono'>
-                {humanFileSize(file.size)}
-              </span>
-            </div>
+          <div className='flex flex-row space-x-2 flex-wrap max-w-xl'>
+            {files?.map((f, i) => (
+              <div className='flex flex-col justify-around' key={i}>
+                <span className='text-sm'>{f.name}</span>
+                <span className='text-xs text-white/75 font-mono'>
+                  {humanFileSize(f.size)}
+                </span>
+              </div>
+            ))}
           </div>
           <div className='p-4'>
             <button
@@ -119,14 +125,19 @@ function UploaderContents (): ReactNode {
   }
 }
 
-export function UploaderForm (): ReactNode {
+interface UploaderFormProps {
+  multiple?: boolean
+  allowDirectory?: boolean
+}
+
+export function UploaderForm ({ multiple, allowDirectory }: UploaderFormProps): ReactNode {
   const [{ file }] = useUploader()
   const hasFile = file !== undefined
   return (
     <Uploader.Form className="m-12">
       <div className='relative shadow h-52 p-8 rounded-md bg-white/5 hover:bg-white/20 border-2 border-dotted border-zinc-950 flex flex-col justify-center items-center text-center'>
         <label className={`${hasFile ? 'hidden' : 'block h-px w-px overflow-hidden absolute whitespace-nowrap'}`}>File:</label>
-        <Uploader.Input className={`${hasFile ? 'hidden' : 'block absolute inset-0 cursor-pointer w-full opacity-0'}`} />
+        <Uploader.Input multiple={multiple} allowDirectory={allowDirectory} className={`${hasFile ? 'hidden' : 'block absolute inset-0 cursor-pointer w-full opacity-0'}`} />
         <UploaderContents />
         {hasFile ? '' : <span>Drag files or Click to Browse</span>}
       </div>
diff --git a/examples/react/multi-file-upload/.eslintrc.cjs b/examples/react/multi-file-upload/.eslintrc.cjs
new file mode 100644
index 00000000..4dcb4390
--- /dev/null
+++ b/examples/react/multi-file-upload/.eslintrc.cjs
@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/examples/react/multi-file-upload/.gitignore b/examples/react/multi-file-upload/.gitignore
new file mode 100644
index 00000000..a547bf36
--- /dev/null
+++ b/examples/react/multi-file-upload/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/react/multi-file-upload/README.md b/examples/react/multi-file-upload/README.md
new file mode 100644
index 00000000..f768e33f
--- /dev/null
+++ b/examples/react/multi-file-upload/README.md
@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
diff --git a/examples/react/multi-file-upload/index.html b/examples/react/multi-file-upload/index.html
new file mode 100644
index 00000000..ca923318
--- /dev/null
+++ b/examples/react/multi-file-upload/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>W3UI Multi File Upload Example App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/examples/react/multi-file-upload/package.json b/examples/react/multi-file-upload/package.json
new file mode 100644
index 00000000..9e7792bb
--- /dev/null
+++ b/examples/react/multi-file-upload/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "@w3ui/example-react-multi-file-upload",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.0.17",
+    "@w3ui/example-react-components": "workspace:^",
+    "@w3ui/react": "workspace:^",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.4.13",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.4",
+    "vite": "^5.0.0"
+  }
+}
diff --git a/examples/react/multi-file-upload/postcss.config.js b/examples/react/multi-file-upload/postcss.config.js
new file mode 100644
index 00000000..2e7af2b7
--- /dev/null
+++ b/examples/react/multi-file-upload/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/examples/react/multi-file-upload/src/App.tsx b/examples/react/multi-file-upload/src/App.tsx
new file mode 100644
index 00000000..a9378f57
--- /dev/null
+++ b/examples/react/multi-file-upload/src/App.tsx
@@ -0,0 +1,43 @@
+import { Authenticator, Provider, Uploader, WrapInDirectoryCheckbox, useUploader } from '@w3ui/react'
+import { AuthenticationEnsurer, SpaceEnsurer, UploaderForm } from '@w3ui/example-react-components'
+import React, { useState } from 'react'
+
+function Options ({ allowDirectory, setAllowDirectory }) {
+  const [{ files }] = useUploader()
+  return (
+    <div className='flex flex-col'>
+      {(files?.length === 1) && (
+        <label className='flex space-x-2'>
+          <WrapInDirectoryCheckbox />
+          <span>Wrap in directory?</span>
+        </label>
+      )}
+      <label className='flex space-x-2'>
+        <input type='checkbox' checked={allowDirectory} onChange={e => setAllowDirectory(e.target.checked)} />
+        <span>Allow directory selection?</span>
+      </label>
+    </div>
+  )
+}
+
+function App () {
+  const [allowDirectory, setAllowDirectory] = useState(false)
+  return (
+    <div className='bg-grad flex flex-col items-center h-screen'>
+      <Provider>
+        <Authenticator>
+          <AuthenticationEnsurer>
+            <SpaceEnsurer>
+              <Uploader>
+                <UploaderForm multiple allowDirectory={allowDirectory} />
+                <Options allowDirectory={allowDirectory} setAllowDirectory={setAllowDirectory} />
+              </Uploader>
+            </SpaceEnsurer>
+          </AuthenticationEnsurer>
+        </Authenticator>
+      </Provider>
+    </div>
+  )
+}
+
+export default App
diff --git a/examples/react/multi-file-upload/src/index.css b/examples/react/multi-file-upload/src/index.css
new file mode 100644
index 00000000..bfe584f7
--- /dev/null
+++ b/examples/react/multi-file-upload/src/index.css
@@ -0,0 +1,26 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .w3ui-button {
+    @apply text-white bg-slate-800 hover:bg-blue-800 rounded-sm py-2 px-8 text-sm font-medium transition-colors ease-in;
+  }
+  
+  .w3ui-button.active {
+    @apply bg-transparent;
+  }
+
+  .authenticator {
+    @apply bg-zinc-950 w-full h-screen flex flex-col justify-center items-center;
+  }
+}
+
+@layer utilities {
+  .bg-grad {
+    background-color: rgb(244 244 245);
+    background-image: linear-gradient(225deg, #ff149296 0%, #00ffff96 100%);
+    background-size: 400% 400%;
+    animation: bgPosDrift 60s ease infinite;
+  }
+}
\ No newline at end of file
diff --git a/examples/react/multi-file-upload/src/main.jsx b/examples/react/multi-file-upload/src/main.jsx
new file mode 100644
index 00000000..a700d3b7
--- /dev/null
+++ b/examples/react/multi-file-upload/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/examples/react/multi-file-upload/tailwind.config.js b/examples/react/multi-file-upload/tailwind.config.js
new file mode 100644
index 00000000..6c03cf34
--- /dev/null
+++ b/examples/react/multi-file-upload/tailwind.config.js
@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "../components/src/**/*.{js,ts,jsx,tsx}"
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
diff --git a/examples/react/multi-file-upload/vite.config.js b/examples/react/multi-file-upload/vite.config.js
new file mode 100644
index 00000000..ba31486b
--- /dev/null
+++ b/examples/react/multi-file-upload/vite.config.js
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '',
+  plugins: [react()],
+  server: {
+    port: 3000,
+  }
+})
diff --git a/examples/react/uploads-list/.eslintrc.cjs b/examples/react/uploads-list/.eslintrc.cjs
new file mode 100644
index 00000000..4dcb4390
--- /dev/null
+++ b/examples/react/uploads-list/.eslintrc.cjs
@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/examples/react/uploads-list/.gitignore b/examples/react/uploads-list/.gitignore
new file mode 100644
index 00000000..a547bf36
--- /dev/null
+++ b/examples/react/uploads-list/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/react/uploads-list/README.md b/examples/react/uploads-list/README.md
new file mode 100644
index 00000000..f768e33f
--- /dev/null
+++ b/examples/react/uploads-list/README.md
@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
diff --git a/examples/react/uploads-list/index.html b/examples/react/uploads-list/index.html
new file mode 100644
index 00000000..fd1db4d2
--- /dev/null
+++ b/examples/react/uploads-list/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>W3UI Uploads List Example App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/examples/react/uploads-list/package.json b/examples/react/uploads-list/package.json
new file mode 100644
index 00000000..e5d69f1e
--- /dev/null
+++ b/examples/react/uploads-list/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "@w3ui/example-react-uploads-list",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "vite",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.0.17",
+    "@w3ui/example-react-components": "workspace:^",
+    "@w3ui/react": "workspace:^",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "swr": "^2.2.4"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@vitejs/plugin-react": "^4.2.0",
+    "autoprefixer": "^10.4.13",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "postcss": "^8.4.21",
+    "tailwindcss": "^3.2.4",
+    "vite": "^5.0.0"
+  }
+}
diff --git a/examples/react/uploads-list/postcss.config.js b/examples/react/uploads-list/postcss.config.js
new file mode 100644
index 00000000..2e7af2b7
--- /dev/null
+++ b/examples/react/uploads-list/postcss.config.js
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/examples/react/uploads-list/src/App.tsx b/examples/react/uploads-list/src/App.tsx
new file mode 100644
index 00000000..688c3336
--- /dev/null
+++ b/examples/react/uploads-list/src/App.tsx
@@ -0,0 +1,76 @@
+import { Authenticator, Provider, Uploader, useW3, UnknownLink, UploadListSuccess } from '@w3ui/react'
+import { AuthenticationEnsurer, Loader, SpaceEnsurer, UploaderForm } from '@w3ui/example-react-components'
+import React from 'react'
+import useSWR from 'swr'
+
+interface PageProps {
+  searchParams?: {
+    cursor?: string
+    pre?: string
+  }
+}
+
+function Uploads ({ searchParams = { cursor: '', pre: 'false' } }: PageProps) {
+  const [{ client, spaces }] = useW3()
+  const spaceDID = client?.currentSpace()?.did()
+  const space = spaces.find(s => s.did() === spaceDID)
+
+  const key = spaceDID && `/space/${spaceDID}/uploads?cursor=${searchParams.cursor ?? ''}&pre=${searchParams.pre ?? 'false'}`
+  const { data: uploads, isLoading, mutate } = useSWR<UploadListSuccess | undefined>(key, {
+    fetcher: async () => {
+      if (!client || !space) return
+
+      if (client.currentSpace()?.did() !== space.did()) {
+        await client.setCurrentSpace(space.did())
+      }
+
+      return await client.capability.upload.list({
+        cursor: searchParams.cursor,
+        pre: searchParams.pre === 'true',
+        size: 10
+      })
+    },
+    onError: err => console.error(err.message, err.cause),
+    keepPreviousData: true
+  })
+  if (isLoading) {
+    return (
+      <Loader />
+    )
+  }
+  return (
+    <>
+      <Uploader onUploadComplete={() => mutate()}>
+        <UploaderForm />
+      </Uploader>
+      <div className='flex flex-col'>
+        <h3 className="bold text-xl mb-4">Uploads</h3>
+        {uploads?.results.map((upload, i) => (
+          <div key={i}>
+            <a href={`https://${upload.root.toString()}.ipfs.w3s.link`}>
+              {upload.root.toString()}
+            </a>
+          </div>
+        ))}
+      </div>
+    </>
+  )
+}
+
+function App () {
+  return (
+    <div className='bg-grad flex flex-col items-center h-screen'>
+      <Provider>
+        <Authenticator>
+          <AuthenticationEnsurer>
+            <SpaceEnsurer>
+              <Uploads />
+            </SpaceEnsurer>
+          </AuthenticationEnsurer>
+        </Authenticator>
+      </Provider>
+    </div>
+  )
+}
+
+export default App
diff --git a/examples/react/uploads-list/src/index.css b/examples/react/uploads-list/src/index.css
new file mode 100644
index 00000000..bfe584f7
--- /dev/null
+++ b/examples/react/uploads-list/src/index.css
@@ -0,0 +1,26 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .w3ui-button {
+    @apply text-white bg-slate-800 hover:bg-blue-800 rounded-sm py-2 px-8 text-sm font-medium transition-colors ease-in;
+  }
+  
+  .w3ui-button.active {
+    @apply bg-transparent;
+  }
+
+  .authenticator {
+    @apply bg-zinc-950 w-full h-screen flex flex-col justify-center items-center;
+  }
+}
+
+@layer utilities {
+  .bg-grad {
+    background-color: rgb(244 244 245);
+    background-image: linear-gradient(225deg, #ff149296 0%, #00ffff96 100%);
+    background-size: 400% 400%;
+    animation: bgPosDrift 60s ease infinite;
+  }
+}
\ No newline at end of file
diff --git a/examples/react/uploads-list/src/main.jsx b/examples/react/uploads-list/src/main.jsx
new file mode 100644
index 00000000..a700d3b7
--- /dev/null
+++ b/examples/react/uploads-list/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
diff --git a/examples/react/uploads-list/tailwind.config.js b/examples/react/uploads-list/tailwind.config.js
new file mode 100644
index 00000000..6c03cf34
--- /dev/null
+++ b/examples/react/uploads-list/tailwind.config.js
@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "../components/src/**/*.{js,ts,jsx,tsx}"
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
diff --git a/examples/react/uploads-list/vite.config.js b/examples/react/uploads-list/vite.config.js
new file mode 100644
index 00000000..ba31486b
--- /dev/null
+++ b/examples/react/uploads-list/vite.config.js
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  base: '',
+  plugins: [react()],
+  server: {
+    port: 3000,
+  }
+})
diff --git a/examples/test/playwright/src/multi-file-upload.spec.ts b/examples/test/playwright/src/multi-file-upload.spec.ts
index fed758fd..9e1a07d3 100644
--- a/examples/test/playwright/src/multi-file-upload.spec.ts
+++ b/examples/test/playwright/src/multi-file-upload.spec.ts
@@ -1,13 +1,13 @@
 import { test, expect } from '@playwright/test'
 
 for (const ui of [
-  //  'react',
+  'react',
 ]) {
   test(`${ui}: multi file upload`, async ({ page }) => {
     await page.goto(`/${ui}/multi-file-upload/`)
     await expect(page).toHaveTitle('W3UI Multi File Upload Example App')
 
-    const input = page.getByRole('textbox', { name: 'Email address:' })
+    const input = page.getByRole('textbox', { name: 'Email' })
     await input.fill('test@example.org')
     await input.press('Enter')
     await expect(page.getByText('Verify your email address!')).toBeVisible()
diff --git a/examples/test/playwright/src/uploads-list.spec.ts b/examples/test/playwright/src/uploads-list.spec.ts
index 567143dc..e105580e 100644
--- a/examples/test/playwright/src/uploads-list.spec.ts
+++ b/examples/test/playwright/src/uploads-list.spec.ts
@@ -1,13 +1,13 @@
 import { test, expect } from '@playwright/test'
 
 for (const ui of [
-  //  'react'
+  'react'
 ]) {
   test(`${ui}: uploads list`, async ({ page }) => {
     await page.goto(`/${ui}/uploads-list/`)
     await expect(page).toHaveTitle('W3UI Uploads List Example App')
 
-    const input = page.getByRole('textbox', { name: 'Email address:' })
+    const input = page.getByRole('textbox', { name: 'Email' })
     await input.fill('test@example.org')
     await input.press('Enter')
     await expect(page.getByText('Verify your email address!')).toBeVisible()
diff --git a/packages/react/src/Uploader.tsx b/packages/react/src/Uploader.tsx
index e8ab0211..c933c52a 100644
--- a/packages/react/src/Uploader.tsx
+++ b/packages/react/src/Uploader.tsx
@@ -1,4 +1,4 @@
-import type { As, Component, Props, Options } from 'ariakit-react-utils'
+import type { As, Component, Props, Options, HTMLProps } from 'ariakit-react-utils'
 import type { ChangeEvent } from 'react'
 import type { AnyLink, CARMetadata, ProgressStatus } from '@w3ui/core'
 
@@ -35,6 +35,10 @@ export interface UploaderContextState {
    * a File to be uploaded
    */
   file?: File
+  /**
+   * Files to be uploaded
+   */
+  files?: File[]
   /**
    * A callback that can be passed to an `onSubmit` handler to
    * upload `file` to web3.storage via the w3up API
@@ -52,6 +56,10 @@ export interface UploaderContextState {
    * Shard upload progress information.
    */
   uploadProgress: UploadProgress
+  /**
+   * Should single files be wrapped in a directory?
+   */
+  wrapInDirectory: boolean
 }
 
 export interface UploaderContextActions {
@@ -60,6 +68,15 @@ export interface UploaderContextActions {
    * when `handleUploadSubmit` is called.
    */
   setFile: (file?: File) => void
+  /**
+   * Set files to be uploaded to web3.storage. The file will be uploaded
+   * when `handleUploadSubmit` is called.
+   */
+  setFiles: (file?: File[]) => void
+  /**
+   * Set whether single files should be wrapped in a directory before upload.
+   */
+  setWrapInDirectory: (wrap: boolean) => void
 }
 
 export type UploaderContextValue = [
@@ -71,11 +88,18 @@ export const UploaderContextDefaultValue: UploaderContextValue = [
   {
     status: UploadStatus.Idle,
     storedDAGShards: [],
-    uploadProgress: {}
+    uploadProgress: {},
+    wrapInDirectory: false
   },
   {
     setFile: () => {
       throw new Error('missing set file function')
+    },
+    setFiles: () => {
+      throw new Error('missing set files function')
+    },
+    setWrapInDirectory: () => {
+      throw new Error('missing set wrap in directory function')
     }
   }
 ]
@@ -84,6 +108,7 @@ export const UploaderContext = createContext<UploaderContextValue>(UploaderConte
 
 interface OnUploadCompleteProps {
   file?: File
+  files?: File[]
   dataCID?: AnyLink
 }
 
@@ -91,6 +116,7 @@ export type OnUploadComplete = (props: OnUploadCompleteProps) => void
 
 export type UploaderRootOptions<T extends As = typeof Fragment> = Options<T> & {
   onUploadComplete?: OnUploadComplete
+  defaultWrapInDirectory?: boolean
 }
 export type UploaderRootProps<T extends As = typeof Fragment> = Props<UploaderRootOptions<T>>
 
@@ -102,41 +128,51 @@ export type UploaderRootProps<T extends As = typeof Fragment> = Props<UploaderRo
  * web3.storage.
  */
 export const UploaderRoot: Component<UploaderRootProps> = createComponent(
-  (props) => {
+  ({ onUploadComplete, defaultWrapInDirectory = false, ...props }) => {
     const [{ client }] = useW3()
-    const [file, setFile] = useState<File>()
+    const [files, setFiles] = useState<File[]>()
+    const file = files?.[0]
+    const setFile = (file: File | undefined): void => { (file != null) && setFiles([file]) }
+    const [wrapInDirectory, setWrapInDirectory] = useState(defaultWrapInDirectory)
     const [dataCID, setDataCID] = useState<AnyLink>()
     const [status, setStatus] = useState(UploadStatus.Idle)
     const [error, setError] = useState()
     const [storedDAGShards, setStoredDAGShards] = useState<UploaderContextState['storedDAGShards']>([])
     const [uploadProgress, setUploadProgress] = useState<UploadProgress>({})
 
-    const setFileAndReset = (file?: File): void => {
-      setFile(file)
+    const setFilesAndReset = (files?: File[]): void => {
+      setFiles(files)
       setStatus(UploadStatus.Idle)
     }
 
     const handleUploadSubmit = async (e: Event): Promise<void> => {
       e.preventDefault()
-      if ((client !== undefined) && (file !== undefined)) {
+      // file !== undefined should be unecessary but is here to make tsc happy
+      if ((client !== undefined) && (files !== undefined) && (file !== undefined)) {
         try {
           setError(undefined)
           setStatus(UploadStatus.Uploading)
           const storedShards: CARMetadata[] = []
           setStoredDAGShards(storedShards)
-          const cid = await client.uploadFile(file, {
-            onShardStored (meta) {
+          const uploadOptions = {
+            onShardStored (meta: CARMetadata) {
               storedShards.push(meta)
               setStoredDAGShards([...storedShards])
             },
-            onUploadProgress (status) {
+            onUploadProgress (status: ProgressStatus) {
               setUploadProgress(statuses => ({ ...statuses, [status.url ?? '']: status }))
             }
-          })
+          }
+          const cid = files.length > 1
+            ? await client.uploadDirectory(files, uploadOptions)
+            : (wrapInDirectory
+                ? await client.uploadDirectory(files, uploadOptions)
+                : await client.uploadFile(file, uploadOptions))
+
           setDataCID(cid)
           setStatus(UploadStatus.Succeeded)
-          if (props.onUploadComplete !== undefined) {
-            props.onUploadComplete({ file, dataCID: cid })
+          if (onUploadComplete !== undefined) {
+            onUploadComplete({ file, files, dataCID: cid })
           }
         } catch (error_: any) {
           setError(error_)
@@ -150,14 +186,20 @@ export const UploaderRoot: Component<UploaderRootProps> = createComponent(
         () => [
           {
             file,
+            files,
             dataCID,
             status,
             error,
             handleUploadSubmit,
             storedDAGShards,
-            uploadProgress
+            uploadProgress,
+            wrapInDirectory
           },
-          { setFile: setFileAndReset }
+          {
+            setFile: (file?: File) => { setFilesAndReset((file === undefined) ? file : [file]) },
+            setFiles: setFilesAndReset,
+            setWrapInDirectory
+          }
         ],
         [
           file,
@@ -178,7 +220,9 @@ export const UploaderRoot: Component<UploaderRootProps> = createComponent(
 )
 
 export type UploaderInputOptions<T extends As = 'input'> = Options<T>
-export type UploaderInputProps<T extends As = 'input'> = Props<UploaderInputOptions<T>>
+export type UploaderInputProps<T extends As = 'input'> = Props<UploaderInputOptions<T>> & {
+  allowDirectory?: boolean
+}
 
 /**
  * Input component for the headless Uploader.
@@ -186,13 +230,40 @@ export type UploaderInputProps<T extends As = 'input'> = Props<UploaderInputOpti
  * A file `input` designed to work with `Uploader`. Any passed props will
  * be passed along to the `input` component.
  */
-export const UploaderInput: Component<UploaderInputProps> = createComponent((props) => {
-  const [, { setFile }] = useContext(UploaderContext)
+export const UploaderInput: Component<UploaderInputProps> = createComponent(({ allowDirectory, ...props }) => {
+  const [, { setFiles }] = useContext(UploaderContext)
+  const onChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files != null) {
+        setFiles([...e.target.files])
+      }
+    },
+    [setFiles]
+  )
+  const inputProps: HTMLProps<Options> = { ...props, type: 'file', onChange }
+  if (allowDirectory === true) {
+    // this attribute behaves weirdly - having it either be the string true or not
+    // set at all seems to be the only way to get it working the way you'd expect
+    inputProps.webkitdirectory = 'true'
+  }
+  return createElement('input', inputProps)
+})
+
+export type WrapInDirectoryCheckboxOptions<T extends As = 'input'> = Options<T>
+export type WrapInDirectoryCheckboxProps<T extends As = 'input'> = Props<WrapInDirectoryCheckboxOptions<T>>
+
+/**
+ * A checkbox that controls whether the uploader will wrap single files in a directory.
+ */
+export const WrapInDirectoryCheckbox: Component<WrapInDirectoryCheckboxProps> = createComponent((props) => {
+  const [{ wrapInDirectory }, { setWrapInDirectory }] = useContext(UploaderContext)
   const onChange = useCallback(
-    (e: ChangeEvent<HTMLInputElement>) => { setFile(e.target.files?.[0]) },
-    [setFile]
+    (e: ChangeEvent<HTMLInputElement>) => {
+      setWrapInDirectory(e.target.checked)
+    },
+    []
   )
-  return createElement('input', { ...props, type: 'file', onChange })
+  return createElement('input', { ...props, type: 'checkbox', value: wrapInDirectory, onChange })
 })
 
 export type UploaderFormOptions<T extends As = 'form'> = Options<T>
diff --git a/packages/react/test/Uploader.spec.tsx b/packages/react/test/Uploader.spec.tsx
index 2f5b830c..d25c37a4 100644
--- a/packages/react/test/Uploader.spec.tsx
+++ b/packages/react/test/Uploader.spec.tsx
@@ -1,13 +1,17 @@
 import React from 'react'
 import 'fake-indexeddb/auto'
-import { test, expect, vi } from 'vitest'
+import { test, expect, vi, afterEach } from 'vitest'
 import user from '@testing-library/user-event'
-import { render, screen } from '@testing-library/react'
+import { render, screen, cleanup } from '@testing-library/react'
 import * as Link from 'multiformats/link'
 import { Context, ContextDefaultValue, ContextValue } from '../src/providers/Provider'
 import { Uploader } from '../src/Uploader'
 
-test('Form', async () => {
+afterEach(() => {
+  cleanup()
+})
+
+test('single file upload', async () => {
   const cid = Link.parse('bafybeibrqc2se2p3k4kfdwg7deigdggamlumemkiggrnqw3edrjosqhvnm')
   const client = { uploadFile: vi.fn().mockImplementation(() => cid) }
 
@@ -41,3 +45,80 @@ test('Form', async () => {
 
   expect(client.uploadFile).toHaveBeenCalled()
 })
+
+test('multi file upload', async () => {
+  const cid = Link.parse('bafybeibrqc2se2p3k4kfdwg7deigdggamlumemkiggrnqw3edrjosqhvnm')
+  const client = {
+    uploadDirectory: vi.fn().mockImplementation(() => cid)
+  }
+
+  const contextValue: ContextValue = [
+    {
+      ...ContextDefaultValue[0],
+      // @ts-expect-error not a real client
+      client
+    },
+    ContextDefaultValue[1]
+  ]
+  const handleComplete = vi.fn()
+  render(
+    <Context.Provider value={contextValue}>
+      <Uploader onUploadComplete={handleComplete}>
+        <Uploader.Form>
+          <Uploader.Input data-testid='file-upload' multiple />
+          <input type='submit' value='Upload' />
+        </Uploader.Form>
+      </Uploader>
+    </Context.Provider>
+  )
+
+  const files = [
+    new File(['hello'], 'hello.txt', { type: 'text/plain' }),
+    new File(['world'], 'world.txt', { type: 'text/plain' })
+  ]
+
+  const fileInput = screen.getByTestId('file-upload')
+  await user.upload(fileInput, files)
+
+  const submitButton = screen.getByText('Upload')
+  await user.click(submitButton)
+
+  expect(client.uploadDirectory).toHaveBeenCalled()
+})
+
+test('wrapping a file in a directory', async () => {
+  const cid = Link.parse('bafybeibrqc2se2p3k4kfdwg7deigdggamlumemkiggrnqw3edrjosqhvnm')
+  const client = {
+    uploadDirectory: vi.fn().mockImplementation(() => cid)
+  }
+
+  const contextValue: ContextValue = [
+    {
+      ...ContextDefaultValue[0],
+      // @ts-expect-error not a real client
+      client
+    },
+    ContextDefaultValue[1]
+  ]
+  const handleComplete = vi.fn()
+  render(
+    <Context.Provider value={contextValue}>
+      <Uploader onUploadComplete={handleComplete} defaultWrapInDirectory>
+        <Uploader.Form>
+          <Uploader.Input data-testid='file-upload' />
+          <input type='submit' value='Upload' />
+        </Uploader.Form>
+      </Uploader>
+    </Context.Provider>
+  )
+
+  const file = new File(['hello'], 'hello.txt', { type: 'text/plain' })
+
+  const fileInput = screen.getByTestId('file-upload')
+  await user.upload(fileInput, file)
+
+  const submitButton = screen.getByText('Upload')
+  await user.click(submitButton)
+
+  expect(client.uploadDirectory).toHaveBeenCalled()
+})
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2a36a1a8..51cb6d6f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,6 +93,58 @@ importers:
         specifier: ^5.0.0
         version: 5.0.5
 
+  examples/react/multi-file-upload:
+    dependencies:
+      '@heroicons/react':
+        specifier: ^2.0.17
+        version: 2.0.18(react@18.2.0)
+      '@w3ui/example-react-components':
+        specifier: workspace:^
+        version: link:../components
+      '@w3ui/react':
+        specifier: workspace:^
+        version: link:../../../packages/react
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.2.0(react@18.2.0)
+    devDependencies:
+      '@types/react':
+        specifier: ^18.2.37
+        version: 18.2.42
+      '@types/react-dom':
+        specifier: ^18.2.15
+        version: 18.2.17
+      '@vitejs/plugin-react':
+        specifier: ^4.2.0
+        version: 4.2.1(vite@5.0.5)
+      autoprefixer:
+        specifier: ^10.4.13
+        version: 10.4.16(postcss@8.4.32)
+      eslint:
+        specifier: ^8.53.0
+        version: 8.55.0
+      eslint-plugin-react:
+        specifier: ^7.33.2
+        version: 7.33.2(eslint@8.55.0)
+      eslint-plugin-react-hooks:
+        specifier: ^4.6.0
+        version: 4.6.0(eslint@8.55.0)
+      eslint-plugin-react-refresh:
+        specifier: ^0.4.4
+        version: 0.4.5(eslint@8.55.0)
+      postcss:
+        specifier: ^8.4.21
+        version: 8.4.32
+      tailwindcss:
+        specifier: ^3.2.4
+        version: 3.3.6
+      vite:
+        specifier: ^5.0.0
+        version: 5.0.5
+
   examples/react/sign-up-in:
     dependencies:
       '@heroicons/react':
@@ -145,6 +197,61 @@ importers:
         specifier: ^5.0.0
         version: 5.0.5
 
+  examples/react/uploads-list:
+    dependencies:
+      '@heroicons/react':
+        specifier: ^2.0.17
+        version: 2.0.18(react@18.2.0)
+      '@w3ui/example-react-components':
+        specifier: workspace:^
+        version: link:../components
+      '@w3ui/react':
+        specifier: workspace:^
+        version: link:../../../packages/react
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.2.0(react@18.2.0)
+      swr:
+        specifier: ^2.2.4
+        version: 2.2.4(react@18.2.0)
+    devDependencies:
+      '@types/react':
+        specifier: ^18.2.37
+        version: 18.2.42
+      '@types/react-dom':
+        specifier: ^18.2.15
+        version: 18.2.17
+      '@vitejs/plugin-react':
+        specifier: ^4.2.0
+        version: 4.2.1(vite@5.0.5)
+      autoprefixer:
+        specifier: ^10.4.13
+        version: 10.4.16(postcss@8.4.32)
+      eslint:
+        specifier: ^8.53.0
+        version: 8.55.0
+      eslint-plugin-react:
+        specifier: ^7.33.2
+        version: 7.33.2(eslint@8.55.0)
+      eslint-plugin-react-hooks:
+        specifier: ^4.6.0
+        version: 4.6.0(eslint@8.55.0)
+      eslint-plugin-react-refresh:
+        specifier: ^0.4.4
+        version: 0.4.5(eslint@8.55.0)
+      postcss:
+        specifier: ^8.4.21
+        version: 8.4.32
+      tailwindcss:
+        specifier: ^3.2.4
+        version: 3.3.6
+      vite:
+        specifier: ^5.0.0
+        version: 5.0.5
+
   examples/test/playwright:
     devDependencies:
       '@playwright/test':
@@ -2491,6 +2598,10 @@ packages:
       string-width: 5.1.2
     dev: false
 
+  /client-only@0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+    dev: false
+
   /clipboardy@3.0.0:
     resolution: {integrity: sha512-Su+uU5sr1jkUy1sGRpLKjKrvEOVXgSgiSInwa/qeID6aJ07yh+5NWc3h2QfjHjBnfX4LhtFcuAWKUsJ3r+fjbg==}
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -5757,6 +5868,16 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
+  /swr@2.2.4(react@18.2.0):
+    resolution: {integrity: sha512-njiZ/4RiIhoOlAaLYDqwz5qH/KZXVilRLvomrx83HjzCWTfa+InyfAjv05PSFxnmLzZkNO9ZfvgoqzAaEI4sGQ==}
+    peerDependencies:
+      react: ^16.11.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      client-only: 0.0.1
+      react: 18.2.0
+      use-sync-external-store: 1.2.0(react@18.2.0)
+    dev: false
+
   /symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
     dev: true