Adds image uploader

examples/web/src/image/index.tsx

@@ -6,9 +6,21 @@ const ImageLoader = () => {
     const [path, setPath] = useState<string>('');
     const { controller } = useCurrentController();
 
-   const loadImage = async (path: string) => {
+    const loadImage = async (path: string) => {
         controller && controller.addImage(path);
-   }
+    }
+
+    const handleUpload = (e: any) => {
+        const fileReader = new FileReader();
+        const name = e.target.accept.includes('image') ? 'images' : 'videos';
+
+        fileReader.readAsDataURL(e.target.files[0]);
+        fileReader.onload = (e) => {
+            const path = e.target?.result as string;
+            setPath(path);
+            loadImage(path);
+        };
+    }
 
     return (
         <Stack direction="row" spacing={2}>
@@ -20,6 +32,19 @@ const ImageLoader = () => {
                 value={path} 
                 onChange={(e) => setPath(e.target.value)} />
             <Button onClick={() => loadImage(path || 'https://i.imgur.com/XbLP6ux.png')}>Load Image</Button>
+            <input
+                accept="image/*"
+                style={{ display: 'none' }}
+                id="raised-button-file"
+                multiple
+                type="file"
+                onChange={handleUpload}
+            />
+            <label htmlFor="raised-button-file">
+                <Button component="span" style={{ height: "100%" }}>
+                    Upload
+                </Button>
+            </label> 
         </Stack>
     )
 }

vercel.json

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