#399

frontend/src/components/posts/PostThumbnailPreview.tsx

@@ -6,6 +6,7 @@ import type { FC } from 'react'
 
 type Props = {
   url:        string
+  file?:      File
   alt?:       string
   className?: string
   referrerPolicy?: 'no-referrer' }
@@ -13,17 +14,36 @@ type Props = {
 
 const PostThumbnailPreview: FC<Props> = (
     { url,
+      file,
       alt = 'サムネール',
       className = 'h-16 w-16',
       referrerPolicy },
 ) => {
   const [failed, setFailed] = useState (false)
+  const [fileUrl, setFileUrl] = useState<string | null> (null)
 
   useEffect (() => {
     setFailed (false)
-  }, [url])
+  }, [file, url])
 
-  if (!(url) || failed)
+  useEffect (() => {
+    if (file == null)
+      {
+        setFileUrl (null)
+        return
+      }
+
+    const nextUrl = URL.createObjectURL (file)
+    setFileUrl (nextUrl)
+
+    return () => {
+      URL.revokeObjectURL (nextUrl)
+    }
+  }, [file])
+
+  const resolvedUrl = url.trim () !== '' ? url : (fileUrl ?? '')
+
+  if (resolvedUrl === '' || failed)
     {
       return (
           <div
@@ -34,7 +54,7 @@ const PostThumbnailPreview: FC<Props> = (
 
   return (
       <img
-          src={url}
+          src={resolvedUrl}
           alt={alt}
           referrerPolicy={referrerPolicy}
           className={cn (className, 'rounded border border-border object-cover')}