Add camera option for image uploads

web/package.json

@@ -27,11 +27,11 @@
     "@uppy/progress-bar": "^4.0.0",
     "@uppy/react": "^4.0.1",
     "@uppy/tus": "^4.0.0",
+    "@uppy/webcam": "^4.0.1",
     "date-fns": "^4.1.0",
     "humanize-string": "2.1.0",
     "react": "18.3.1",
     "react-colorful": "^5.6.1",
-    "react-device-detect": "^2.2.3",
     "react-dom": "18.3.1",
     "react-typed": "^2.0.12"
   },

web/src/components/Portrait/PortraitForm/PortraitForm.tsx

@@ -133,7 +133,7 @@ const PortraitForm = ({ portrait }: PortraitFormProps) => {
             <Uploader
               onComplete={onUploadComplete}
               width="22rem"
-              height="11.5rem"
+              height="34.5rem"
               className="flex justify-center"
             />
             <p className="text-center">

web/src/components/Uploader/Uploader.tsx

@@ -5,11 +5,13 @@ import Uppy from '@uppy/core'
 import type { UploadResult, Meta } from '@uppy/core'
 import { Dashboard } from '@uppy/react'
 import Tus from '@uppy/tus'
+import Webcam from '@uppy/webcam'
 
 import { isProduction } from '@redwoodjs/api/logger'
 
 import '@uppy/core/dist/style.min.css'
 import '@uppy/dashboard/dist/style.min.css'
+import '@uppy/webcam/dist/style.min.css'
 
 type FileType = 'image' | 'pdf'
 
@@ -69,6 +71,11 @@ const Uploader = ({
         mimeType: 'image/webp',
       })
 
+    if (type === 'image')
+      instance.use(Webcam, {
+        modes: ['picture'],
+      })
+
     return instance.on('complete', onComplete)
   })
 

web/src/pages/Project/ProjectsPage/ProjectsPage.tsx

@@ -1,4 +1,4 @@
-import { isMobile, isBrowser } from 'react-device-detect'
+import mobile from 'is-mobile'
 
 import { Metadata } from '@redwoodjs/web'
 
@@ -14,8 +14,12 @@ const ProjectsPage = () => {
           <div className="max-w-md text-center">
             <h1 className="text-5xl font-bold">Projects</h1>
             <p className="py-6">
-              {isBrowser && !isMobile ? 'Click' : 'Tap'} on a project for
-              details
+              {mobile({
+                tablet: true,
+              })
+                ? 'Tap'
+                : 'Click'}{' '}
+              on a project for details
             </p>
           </div>
         </div>

yarn.lock

@@ -6278,6 +6278,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@uppy/webcam@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "@uppy/webcam@npm:4.0.1"
+  dependencies:
+    "@uppy/utils": "npm:^6.0.1"
+    is-mobile: "npm:^4.0.0"
+    preact: "npm:^10.5.13"
+  peerDependencies:
+    "@uppy/core": ^4.1.0
+  checksum: 10c0/b7522eb797e16d02ff3b2e106c713d7e7cccc6a0b200db0464b56dc2f4d22ed173f7dd2d1c6a64641f6a84784eb7310d72d1de4ffcdd0391648444b5820dc17a
+  languageName: node
+  linkType: hard
+
 "@vitejs/plugin-react@npm:4.3.1":
   version: 4.3.1
   resolution: "@vitejs/plugin-react@npm:4.3.1"
@@ -11773,6 +11786,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-mobile@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "is-mobile@npm:4.0.0"
+  checksum: 10c0/7d1f1c9ead3f140728318df7b1d6f2f19f28d96bf09c3a9016fe473ccccd32c4d03a01aeec68b612d48f1c0f776e7f1f18a1d83a7e95fb8199b4eb8536db01bc
+  languageName: node
+  linkType: hard
+
 "is-nan@npm:^1.3.2":
   version: 1.3.2
   resolution: "is-nan@npm:1.3.2"
@@ -15476,18 +15496,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-device-detect@npm:^2.2.3":
-  version: 2.2.3
-  resolution: "react-device-detect@npm:2.2.3"
-  dependencies:
-    ua-parser-js: "npm:^1.0.33"
-  peerDependencies:
-    react: ">= 0.14.0"
-    react-dom: ">= 0.14.0"
-  checksum: 10c0/396bbeeab0cb21da084c67434d204c9cf502fad6c683903313084d3f6487950a36a34f9bf67ccf5c1772a1bb5b79a2a4403fcfe6b51d93877db4c2d9f3a3a925
-  languageName: node
-  linkType: hard
-
 "react-dom@npm:18.3.1":
   version: 18.3.1
   resolution: "react-dom@npm:18.3.1"
@@ -17697,15 +17705,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ua-parser-js@npm:^1.0.33":
-  version: 1.0.39
-  resolution: "ua-parser-js@npm:1.0.39"
-  bin:
-    ua-parser-js: script/cli.js
-  checksum: 10c0/c6452b0c683000f10975cb0a7e74cb1119ea95d4522ae85f396fa53b0b17884358a24ffdd86a66030c6b2981bdc502109a618c79fdaa217ee9032c9e46fcc78a
-  languageName: node
-  linkType: hard
-
 "ua-parser-js@npm:^1.0.35":
   version: 1.0.38
   resolution: "ua-parser-js@npm:1.0.38"
@@ -18198,6 +18197,7 @@ __metadata:
     "@uppy/progress-bar": "npm:^4.0.0"
     "@uppy/react": "npm:^4.0.1"
     "@uppy/tus": "npm:^4.0.0"
+    "@uppy/webcam": "npm:^4.0.1"
     autoprefixer: "npm:^10.4.20"
     daisyui: "npm:^4.12.10"
     date-fns: "npm:^4.1.0"
@@ -18206,7 +18206,6 @@ __metadata:
     postcss-loader: "npm:^8.1.1"
     react: "npm:18.3.1"
     react-colorful: "npm:^5.6.1"
-    react-device-detect: "npm:^2.2.3"
     react-dom: "npm:18.3.1"
     react-typed: "npm:^2.0.12"
     tailwindcss: "npm:^3.4.8"