Enhanced file uploading for production (thanks citrinitas3421!)

web/src/components/Uploader/Uploader.tsx

@@ -2,26 +2,62 @@ import { useState } from 'react'
 
 import Compressor from '@uppy/compressor'
 import Uppy from '@uppy/core'
+import type { UploadResult, Meta } from '@uppy/core'
 import ImageEditor from '@uppy/image-editor'
 import { Dashboard } from '@uppy/react'
 import Tus from '@uppy/tus'
 
+import { isProduction } from '@redwoodjs/api/dist/logger'
+
 import '@uppy/image-editor/dist/style.min.css'
 import '@uppy/core/dist/style.min.css'
 import '@uppy/dashboard/dist/style.min.css'
 
-const Uploader = () => {
-  const [uppy] = useState(() =>
-    new Uppy({
+interface Props {
+  onComplete?(result: UploadResult<Meta, Record<string, never>>): void
+}
+
+const apiDomain = isProduction
+  ? process.env.API_ADDRESS_PROD
+  : process.env.API_ADDRESS_DEV
+
+const Uploader = ({ onComplete }: Props) => {
+  const [uppy] = useState(() => {
+    const instance = new Uppy({
       restrictions: {
-        allowedFileTypes: ['image/*'],
+        allowedFileTypes: [
+          'image/webp',
+          'image/png',
+          'image/jpg',
+          'image/jpeg',
+        ],
         maxNumberOfFiles: 10,
+        maxFileSize: 25 * 1024 * 1024,
+      },
+      onBeforeUpload: (files) => {
+        for (const [key, file] of Object.entries(files)) {
+          instance.setFileMeta(key, {
+            name: new Date().getTime().toString(),
+            type: file.type,
+            contentType: file.type,
+          })
+        }
+
+        return true
       },
     })
-      .use(Tus, { endpoint: 'http://localhost:8911/files' }) // TODO: check if env is production and change endpoint accordingly
+      .use(Tus, {
+        endpoint: `${apiDomain}/files`,
+        withCredentials: true,
+        removeFingerprintOnSuccess: true,
+      })
       .use(ImageEditor)
-      .use(Compressor)
-  )
+      .use(Compressor, {
+        mimeType: 'image/webp',
+      })
+
+    return instance.on('complete', onComplete)
+  })
 
   return <Dashboard uppy={uppy} proudlyDisplayPoweredByUppy={false} />
 }

web/src/pages/HomePage/HomePage.tsx

@@ -5,6 +5,7 @@ import Uploader from 'src/components/Uploader/Uploader'
 
 const HomePage = () => {
   const { isAuthenticated } = useAuth()
+
   return (
     <>
       <Metadata title="Home" description="Home page" />