diff --git a/package.json b/package.json
index f8e1c98..9e31d8d 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "@ucanto/core": "^9.0.0",
     "@ucanto/interface": "^9.0.0",
     "@ucanto/transport": "^9.0.0",
-    "@w3ui/react": "^1.3.0",
+    "@w3ui/react": "^2.2.0",
     "@web3-storage/content-claims": "^3.2.1",
     "@web3-storage/data-segment": "^5.0.0",
     "archy": "^1.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b1f8534..f6d5531 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,8 +30,8 @@ dependencies:
     specifier: ^9.0.0
     version: 9.0.0
   '@w3ui/react':
-    specifier: ^1.3.0
-    version: 1.3.0(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^2.2.0
+    version: 2.2.0(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0)
   '@web3-storage/content-claims':
     specifier: ^3.2.1
     version: 3.2.1
@@ -1009,6 +1009,13 @@ packages:
     resolution: {integrity: sha512-D08YG6rr8X90YB56tSIuBaddy/UXAA9RKJoFvrsnogAum/0pmjkgi4+2nx96A330FmioegBWmEYQ+syqCFaveg==}
     dependencies:
       undici-types: 5.26.5
+    dev: true
+
+  /@types/node@20.11.0:
+    resolution: {integrity: sha512-o9bjXmDNcF7GbM4CNQpmi+TutCgap/K3w1JyKgxAjqx41zp9qlIAVFi0IhCNsJcXolEqLWhbFbEeL0PvYm4pcQ==}
+    dependencies:
+      undici-types: 5.26.5
+    dev: false
 
   /@types/prop-types@15.7.11:
     resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==}
@@ -1351,29 +1358,29 @@ packages:
       ts-morph: 12.0.0
     dev: true
 
-  /@w3ui/core@1.1.1:
-    resolution: {integrity: sha512-428LhUDm+HiwZ97pz3tAdHuarL7RF+bj4p15t64W6UxtqOMjLKSh3yakQzPppH29lFTr7lhpyi4PbQkqJNB2yA==}
+  /@w3ui/core@2.0.2:
+    resolution: {integrity: sha512-K6A+IPIk72BowF3MSXE14crrkqnjMvle6knoAyw75dp4zl6Bo1BzbPB8A53+l17jNgOelNu0gA2EbxFqoGwjHw==}
     dependencies:
       '@ipld/dag-ucan': 3.4.0
       '@ucanto/client': 9.0.0
       '@ucanto/interface': 9.0.0
       '@ucanto/principal': 9.0.0
       '@ucanto/transport': 9.0.0
-      '@web3-storage/access': 18.0.6
+      '@web3-storage/access': 18.1.0
       '@web3-storage/did-mailto': 2.1.0
-      '@web3-storage/w3up-client': 11.2.1
+      '@web3-storage/w3up-client': 12.0.0
     transitivePeerDependencies:
       - encoding
     dev: false
 
-  /@w3ui/react@1.3.0(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-SJnqjapMMbWdo//cYSp6YfaYykvi9Sp6bAfj98frnPrYVXA+1YjgJl5zDsvy0fpkMBuafvb9c8fvx109c2FDYw==}
+  /@w3ui/react@2.2.0(@types/react@18.2.42)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-OQLGmaq7tNoBVuCNkmOvUHUM/+62rlg8yHeJxzsa7jxWV5CTz4mV3z/b1Gq2Wy+plBzaTan44/RbtSPrl5m/9w==}
     peerDependencies:
       react: ^16.8.0 || ^17.0.0 || ^18.0.0
     dependencies:
       '@ariakit/react': 0.3.7(react-dom@18.2.0)(react@18.2.0)
       '@ariakit/react-core': 0.3.7(react-dom@18.2.0)(react@18.2.0)
-      '@w3ui/core': 1.1.1
+      '@w3ui/core': 2.0.2
       ariakit-react-utils: 0.17.0-next.27(@types/react@18.2.42)(react@18.2.0)
       react: 18.2.0
     transitivePeerDependencies:
@@ -1388,8 +1395,8 @@ packages:
       web-streams-polyfill: 3.2.1
     dev: false
 
-  /@web3-storage/access@18.0.6:
-    resolution: {integrity: sha512-IuzqkqRp53ILoSeALsyXmZO7zPn6syJGM6X1a+hsmbCGoVG1821i2WWMRz5aCsdgfJxl6Ge0rec+gCMfPx5h8Q==}
+  /@web3-storage/access@18.1.0:
+    resolution: {integrity: sha512-M6hMIm7GRJxN+l41u2+aK97whe15YF7vYVqvpm4dsbk8HQBzmjrRXw9jKhh71jPNgVRCpwvhLYpUM+lEgImvhw==}
     dependencies:
       '@ipld/car': 5.2.4
       '@ipld/dag-ucan': 3.4.0
@@ -1475,8 +1482,8 @@ packages:
       '@web3-storage/capabilities': 12.1.0
     dev: false
 
-  /@web3-storage/upload-client@12.3.2:
-    resolution: {integrity: sha512-vtf8Sb9GWfde9+tL+9Yu6bpB2Erzk/w99LTW55V6VPF6IdhmvPqAD83/X6w5G7VfxfEbFZ3ElRCqA8hOasP8aQ==}
+  /@web3-storage/upload-client@13.0.0:
+    resolution: {integrity: sha512-NCasbk7msHiQ+e+7TIYiOJyYcoiUlcK44FIYffDX+k4mb9J0qfA93Cw3FQSHe4D/3nEm5nCYs1rNxl07OIOpoQ==}
     dependencies:
       '@ipld/car': 5.2.4
       '@ipld/dag-cbor': 9.0.6
@@ -1485,7 +1492,7 @@ packages:
       '@ucanto/client': 9.0.0
       '@ucanto/interface': 9.0.0
       '@ucanto/transport': 9.0.0
-      '@web3-storage/capabilities': 12.1.0
+      '@web3-storage/capabilities': 13.0.0
       fr32-sha2-256-trunc254-padded-binary-tree-multihash: 3.1.1
       ipfs-utils: 9.0.14
       multiformats: 12.1.3
@@ -1496,8 +1503,8 @@ packages:
       - encoding
     dev: false
 
-  /@web3-storage/w3up-client@11.2.1:
-    resolution: {integrity: sha512-04/OfMKUjPoF+l87VjItYFb1wBaljiV8YJbBMlNm9Zf7gazWPDxjfuSWYUMYb8UAPhxQZnV2uGrqUaNqPlUqUg==}
+  /@web3-storage/w3up-client@12.0.0:
+    resolution: {integrity: sha512-94nEsrLf93U3ym4C/Ae9kqu4MtQG9YgRp2tXkOwZdVqGR7NCf92CMBfbM2aIPxIM5i1CIe7EMbb+SLFZYRzh4A==}
     dependencies:
       '@ipld/dag-ucan': 3.4.0
       '@ucanto/client': 9.0.0
@@ -1505,11 +1512,11 @@ packages:
       '@ucanto/interface': 9.0.0
       '@ucanto/principal': 9.0.0
       '@ucanto/transport': 9.0.0
-      '@web3-storage/access': 18.0.6
-      '@web3-storage/capabilities': 12.1.0
+      '@web3-storage/access': 18.1.0
+      '@web3-storage/capabilities': 13.0.0
       '@web3-storage/did-mailto': 2.1.0
       '@web3-storage/filecoin-client': 3.2.0
-      '@web3-storage/upload-client': 12.3.2
+      '@web3-storage/upload-client': 13.0.0
     transitivePeerDependencies:
       - encoding
     dev: false
@@ -4727,7 +4734,7 @@ packages:
       '@protobufjs/path': 1.1.2
       '@protobufjs/pool': 1.1.0
       '@protobufjs/utf8': 1.1.0
-      '@types/node': 20.10.4
+      '@types/node': 20.11.0
       long: 5.2.3
     dev: false
 
diff --git a/src/components/Uploader.tsx b/src/components/Uploader.tsx
index 73bdfea..1f13998 100644
--- a/src/components/Uploader.tsx
+++ b/src/components/Uploader.tsx
@@ -9,9 +9,12 @@ import { ArrowPathIcon } from '@heroicons/react/24/outline'
 import {
   UploadStatus,
   Uploader as W3Uploader,
+  WrapInDirectoryCheckbox,
   useUploader
 } from '@w3ui/react'
 import { gatewayHost } from '../components/services'
+import { ChangeEvent, useCallback, useState } from 'react'
+import { RadioGroup } from '@headlessui/react'
 
 function StatusLoader ({ progressStatus }: { progressStatus: ProgressStatus }) {
   const { total, loaded, lengthComputable } = progressStatus
@@ -99,18 +102,62 @@ export const Done = ({ dataCID }: DoneProps): JSX.Element => {
   )
 }
 
+enum UploadType {
+  File = 'File',
+  Directory = 'Directory'
+}
+
+function uploadPrompt (uploadType: UploadType) {
+  switch (uploadType) {
+    case UploadType.File: {
+      return 'Drag File or Click to Browse'
+    }
+    case UploadType.Directory: {
+      return 'Drag Directory or Click to Browse'
+    }
+  }
+}
+
 const UploaderForm = (): JSX.Element => {
   const [{ status, file }] = useUploader()
+  const [allowDirectory, setAllowDirectory] = useState(false)
+  const [uploadType, setUploadType] = useState(UploadType.File)
+  function changeUploadType (type: UploadType) {
+    if (type === UploadType.File) {
+      setAllowDirectory(false)
+    } else if (type === UploadType.Directory) {
+      setAllowDirectory(true)
+    }
+    setUploadType(type)
+  }
   const hasFile = file !== undefined
   return (
     <>
       <W3Uploader.Form>
+        <RadioGroup value={uploadType} onChange={changeUploadType} className='flex flex-row items-center text-center my-2'>
+          <RadioGroup.Option value={UploadType.File}>
+            {({ checked }) => (
+              <div className={`${checked ? 'bg-blue-200' : ''} w-24 border p-2 rounded-l`}>File</div>
+            )}
+          </RadioGroup.Option>
+          <RadioGroup.Option value={UploadType.Directory}>
+            {({ checked }) => (
+              <div className={`${checked ? 'bg-blue-200' : ''} w-24 border p-2 rounded-r`}>Directory</div>
+            )}
+          </RadioGroup.Option>
+        </RadioGroup>
+        {uploadType === UploadType.File && (
+          <label className='flex flex-row items-center mb-1'>
+            <WrapInDirectoryCheckbox /> 
+            <span className='text-sm ml-1'>Wrap In Directory</span>
+          </label>
+        )}
         <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`}>
           {hasFile ? '' : <span className='mb-5'><img src='/icon-tray.svg' /></span>}
           <label className={`${hasFile ? 'hidden' : 'block h-px w-px overflow-hidden absolute whitespace-nowrap'}`}>File:</label>
-          <W3Uploader.Input className={`${hasFile ? 'hidden' : 'block absolute inset-0 cursor-pointer w-full opacity-0'}`} />
+          <W3Uploader.Input className={`${hasFile ? 'hidden' : 'block absolute inset-0 cursor-pointer w-full opacity-0'}`} allowDirectory={allowDirectory} />
           <UploaderContents />
-          {hasFile ? '' : <span>Drag files or Click to Browse</span>}
+          {hasFile ? '' : <span>{uploadPrompt(uploadType)}</span>}
         </div>
       </W3Uploader.Form>
       <div className='flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-4 mt-4 text-center lg:text-left'>
@@ -226,6 +273,7 @@ export const Uploader = ({
     <W3Uploader
       as='div'
       onUploadComplete={onUploadComplete}
+      defaultWrapInDirectory={true}
     >
       <UploaderForm />
     </W3Uploader>