fix: Fix FileInput in SSR (#2367)

trussworks · May 2, 2023 · 3d4845e · 3d4845e
1 parent d330621
commit 3d4845e
Showing 1 changed file with 18 additions and 5 deletions.
diff --git a/src/components/forms/FileInput/FileInput.tsx b/src/components/forms/FileInput/FileInput.tsx
@@ -1,4 +1,10 @@
-import React, { useState, forwardRef, useRef, useImperativeHandle } from 'react'
+import React, {
+  useState,
+  forwardRef,
+  useRef,
+  useImperativeHandle,
+  useEffect,
+} from 'react'
 import classnames from 'classnames'
 
 import { FilePreview } from './FilePreview'
@@ -41,6 +47,17 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
   const [isDragging, setIsDragging] = useState(false)
   const [showError, setShowError] = useState(false)
   const [files, setFiles] = useState<File[]>([])
+  const [hideDragText, setHideDragText] = useState(false)
+
+  useEffect(() => {
+    if (typeof navigator === 'undefined') return
+
+    const hideDragText =
+      /rv:11.0/i.test(navigator?.userAgent) ||
+      /Edge\/\d./i.test(navigator?.userAgent)
+
+    setHideDragText(hideDragText)
+  }, [typeof navigator])
 
   useImperativeHandle(
     ref,
@@ -65,10 +82,6 @@ export const FileInputForwardRef: React.ForwardRefRenderFunction<
     'has-invalid-file': showError,
   })
 
-  const hideDragText =
-    /rv:11.0/i.test(navigator.userAgent) ||
-    /Edge\/\d./i.test(navigator.userAgent)
-
   const dragText = multiple ? 'Drag files here or ' : 'Drag file here or '
 
   const filePreviews = []