#399

frontend/src/components/posts/import/PostImportRowForm.tsx

@@ -28,7 +28,8 @@ const buildDraft = (row: PostImportRow): Draft => ({
     originalCreatedFrom: String (row.attributes.originalCreatedFrom ?? ''),
     originalCreatedBefore: String (row.attributes.originalCreatedBefore ?? ''),
     tags: String (row.attributes.tags ?? ''),
-    parentPostIds: String (row.attributes.parentPostIds ?? '') })
+    parentPostIds: String (row.attributes.parentPostIds ?? ''),
+    thumbnailFile: row.thumbnailFile })
 
 const buildResetDraft = (row: PostImportRow): Draft => ({
     url: row.resetSnapshot.url,
@@ -37,7 +38,8 @@ const buildResetDraft = (row: PostImportRow): Draft => ({
     originalCreatedFrom: String (row.resetSnapshot.attributes.originalCreatedFrom ?? ''),
     originalCreatedBefore: String (row.resetSnapshot.attributes.originalCreatedBefore ?? ''),
     tags: String (row.resetSnapshot.attributes.tags ?? ''),
-    parentPostIds: String (row.resetSnapshot.attributes.parentPostIds ?? '') })
+    parentPostIds: String (row.resetSnapshot.attributes.parentPostIds ?? ''),
+    thumbnailFile: undefined })
 
 const groupedMessages = (...values: (string[] | undefined)[]): string[] =>
     [...new Set (values.flatMap (value => value ?? []))]
@@ -64,6 +66,13 @@ const sameTagSources = (
     (current?.automatic ?? '') === reset.automatic
     && (current?.manual ?? '') === reset.manual
 
+const sameWarnings = (
+    current: PostImportRow,
+    reset:   PostImportRow['resetSnapshot'],
+): boolean =>
+    JSON.stringify (current.fieldWarnings) === JSON.stringify (reset.fieldWarnings)
+    && JSON.stringify (current.baseWarnings) === JSON.stringify (reset.baseWarnings)
+
 
 const PostImportRowForm: FC<Props> = (
     { row,
@@ -76,6 +85,8 @@ const PostImportRowForm: FC<Props> = (
   const [resetRequested, setResetRequested] = useState (false)
   const [committedThumbnailBase, setCommittedThumbnailBase] = useState (
       () => String (row.attributes.thumbnailBase ?? ''))
+  const [thumbnailObjectUrl, setThumbnailObjectUrl] = useState<string | undefined> (
+      () => row.thumbnailObjectUrl)
 
   useEffect (() => {
     const nextDraft = buildDraft (row)
@@ -83,8 +94,14 @@ const PostImportRowForm: FC<Props> = (
     setMessageRow (null)
     setResetRequested (false)
     setCommittedThumbnailBase (String (row.attributes.thumbnailBase ?? ''))
+    setThumbnailObjectUrl (row.thumbnailObjectUrl)
   }, [row])
 
+  useEffect (() => () => {
+    if (thumbnailObjectUrl != null)
+      URL.revokeObjectURL (thumbnailObjectUrl)
+  }, [thumbnailObjectUrl])
+
   const displayRow = messageRow ?? row
   const resetDraft = useMemo (
       () => buildResetDraft (row),
@@ -94,7 +111,8 @@ const PostImportRowForm: FC<Props> = (
       || (sameDraft (draft, resetDraft)
           && sameProvenance (row.provenance, row.resetSnapshot.provenance)
           && sameTagSources (row.tagSources, row.resetSnapshot.tagSources)
-          && row.metadataUrl === row.resetSnapshot.metadataUrl)
+          && row.metadataUrl === row.resetSnapshot.metadataUrl
+          && sameWarnings (displayRow, row.resetSnapshot))
 
   const update = <Key extends keyof Draft,> (
       key:   Key,
@@ -122,8 +140,11 @@ const PostImportRowForm: FC<Props> = (
     setResetRequested (true)
     setMessageRow (null)
     setCommittedThumbnailBase (resetDraft.thumbnailBase)
+    if (thumbnailObjectUrl != null)
+      URL.revokeObjectURL (thumbnailObjectUrl)
+    setThumbnailObjectUrl (undefined)
     return false
-  }, [controls, resetDisabled, resetDraft])
+  }, [controls, resetDisabled, resetDraft, thumbnailObjectUrl])
 
   const save = useCallback (async (): Promise<boolean> => {
     setSaving (true)
@@ -163,7 +184,7 @@ const PostImportRowForm: FC<Props> = (
 	    <div className="grid gap-6 md:grid-cols-[7rem_minmax(0,1fr)]">
 	      <div className="space-y-3 md:sticky md:top-0 md:self-start">
 		<PostImportThumbnailPreview
-		    url={committedThumbnailBase}
+		    url={committedThumbnailBase || thumbnailObjectUrl || ''}
 		    className="h-28 w-28"/>
 	      </div>
 
@@ -191,7 +212,34 @@ const PostImportRowForm: FC<Props> = (
 				if (draft.thumbnailBase !== committedThumbnailBase)
 				  setCommittedThumbnailBase (draft.thumbnailBase)
 			      }}
-			      onChange={value => update ('thumbnailBase', value)}/>
+			      onChange={value => {
+				if (value && thumbnailObjectUrl != null)
+				  {
+				    URL.revokeObjectURL (thumbnailObjectUrl)
+				    setThumbnailObjectUrl (undefined)
+				    update ('thumbnailFile', undefined)
+				  }
+				update ('thumbnailBase', value)
+			      }}/>
+			  {!(draft.thumbnailBase) && (
+			      <input
+				  type="file"
+				  accept="image/*"
+				  disabled={saving}
+				  onChange={event => {
+				    const file = event.target.files?.[0]
+				    if (thumbnailObjectUrl != null)
+				      URL.revokeObjectURL (thumbnailObjectUrl)
+				    if (file == null)
+				      {
+					setThumbnailObjectUrl (undefined)
+					update ('thumbnailFile', undefined)
+					return
+				      }
+				    const objectUrl = URL.createObjectURL (file)
+				    setThumbnailObjectUrl (objectUrl)
+				    update ('thumbnailFile', file)
+				  }}/>)}
 			</>}
 		    core={{
 			title: {