fix(packages/viewer): add directory option to file input

Vectreal · Sep 13, 2024 · a97d2c9 · a97d2c9
1 parent 4212893
commit a97d2c9
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/apps/official-website/src/pages/editor/drop-zone.tsx b/apps/official-website/src/pages/editor/drop-zone.tsx
@@ -8,6 +8,14 @@ import { Card, CardContent } from '@vctrl/shared/components';
 import TypographyLead from '../../components/typography/typography-lead';
 import { useIsMobile } from '../../lib/hooks';
 
+declare module 'react' {
+  interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
+    // extends React's HTMLAttributes
+    directory?: string;
+    webkitdirectory?: string;
+  }
+}
+
 const DropZone = () => {
   const isMobile = useIsMobile();
   const { getRootProps, getInputProps, isDragActive, acceptedFiles } =
@@ -54,7 +62,12 @@ const DropZone = () => {
             <TypographyLead isHighlighted={isDragActive}>
               Click here, or drag and drop your 3D model files
             </TypographyLead>
-            <input {...getInputProps()} />
+            <input
+              {...getInputProps()}
+              webkitdirectory="true"
+              directory="true"
+              multiple
+            />
           </div>
         </CardContent>
       </Card>