mgply09ox: Publish an image post through a server upload pipeline

src/components/Composer.tsx

@@ -1,19 +1,53 @@
-import type { FormEvent } from "react";
+"use client";
+
+import { useEffect, useRef, useState, type ChangeEvent, type FormEvent } from "react";
 
 export interface ComposerProps {
   value: string;
   busy: boolean;
   error: boolean;
+  /** The selected image file, when the image picker is wired. */
+  file?: File | null;
   onChange: (value: string) => void;
+  /** When present, the composer shows an image picker and reports the choice. */
+  onFile?: (file: File | null) => void;
   onSubmit: () => void;
 }
 
-export function Composer({ value, busy, error, onChange, onSubmit }: ComposerProps) {
+// Content types the picker offers (spec: allowed image types).
+const IMAGE_ACCEPT = "image/jpeg,image/jpg,image/png,image/gif,image/webp,image/heic";
+
+export function Composer({ value, busy, error, file = null, onChange, onFile, onSubmit }: ComposerProps) {
   const empty = value.trim().length === 0;
+  // A post needs either text or an image.
+  const canSubmit = (!empty || !!file) && !busy;
+  const inputRef = useRef<HTMLInputElement | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+
+  // Build a preview URL client-side only, and revoke it when the file changes.
+  useEffect(() => {
+    if (!file) {
+      setPreview(null);
+      return;
+    }
+    const url = URL.createObjectURL(file);
+    setPreview(url);
+    return () => URL.revokeObjectURL(url);
+  }, [file]);
+
   function submit(e: FormEvent) {
     e.preventDefault();
-    if (!empty && !busy) onSubmit();
+    if (canSubmit) onSubmit();
   }
+  function pick(e: ChangeEvent<HTMLInputElement>) {
+    const chosen = e.target.files && e.target.files[0] ? e.target.files[0] : null;
+    onFile?.(chosen);
+  }
+  function remove() {
+    onFile?.(null);
+    if (inputRef.current) inputRef.current.value = "";
+  }
+
   return (
     <form className="composer" onSubmit={submit}>
       <label htmlFor="composer-text" className="composer-label">New post</label>
@@ -25,10 +59,36 @@ export function Composer({ value, busy, error, onChange, onSubmit }: ComposerPro
         disabled={busy}
         onChange={(e) => onChange(e.target.value)}
       />
+      {onFile ? (
+        <div className="composer-media">
+          <label className="composer-image">
+            <span>Add image</span>
+            <input
+              ref={inputRef}
+              type="file"
+              accept={IMAGE_ACCEPT}
+              disabled={busy}
+              onChange={pick}
+            />
+          </label>
+          {file ? (
+            <div className="composer-preview">
+              {preview ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img src={preview} alt={`Selected image: ${file.name}`} />
+              ) : null}
+              <span className="composer-filename">{file.name}</span>
+              <button type="button" className="composer-remove" onClick={remove} disabled={busy}>
+                Remove
+              </button>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
       {error ? (
         <p className="error" role="alert">Publishing the post failed. Your text is still here.</p>
       ) : null}
-      <button type="submit" className="composer-post" disabled={empty || busy}>
+      <button type="submit" className="composer-post" disabled={!canSubmit}>
         {busy ? "Posting" : "Post"}
       </button>
     </form>

src/components/Feed.tsx

@@ -22,6 +22,7 @@ export function Feed({ onSignedOut, feedUserId }: { onSignedOut: () => void; fee
   const [deleteBusy, setDeleteBusy] = useState<ReadonlySet<string>>(new Set());
   const [deleteErrors, setDeleteErrors] = useState<ReadonlySet<string>>(new Set());
   const [draft, setDraft] = useState("");
+  const [file, setFile] = useState<File | null>(null);
   const [posting, setPosting] = useState(false);
   const [postFailed, setPostFailed] = useState(false);
   // Id of a post already created but not yet seen on the first page. A retry
@@ -187,22 +188,24 @@ export function Feed({ onSignedOut, feedUserId }: { onSignedOut: () => void; fee
 
   const publish = useCallback(async () => {
     const text = draft.trim();
-    if (!text || posting) return;
+    // A post needs either text or an image.
+    if ((!text && !file) || posting) return;
     setPosting(true);
     setPostFailed(false);
     try {
-      const page = await publishAndConfirm(text, unconfirmed.current);
+      const page = await publishAndConfirm(text, file, unconfirmed.current);
       setPosts(mergePosts(toCardPosts(page.items)));
       setNextCursor(page.nextCursor);
       setPending([]);
       setDraft("");
+      setFile(null);
     } catch (e) {
       if (e instanceof PostError && e.signedOut) onSignedOut();
       setPostFailed(true);
     } finally {
       setPosting(false);
     }
-  }, [draft, posting, onSignedOut]);
+  }, [draft, file, posting, onSignedOut]);
 
   function changeDraft(v: string) {
     // New text is a new post; forget a stale unconfirmed id.
@@ -210,6 +213,12 @@ export function Feed({ onSignedOut, feedUserId }: { onSignedOut: () => void; fee
     setDraft(v);
   }
 
+  function changeFile(f: File | null) {
+    // A different attachment is a new post; forget a stale unconfirmed id.
+    unconfirmed.current = { id: null };
+    setFile(f);
+  }
+
   function showNew() {
     setPosts((cur) => mergePosts(cur, pending));
     setPending([]);
@@ -233,7 +242,7 @@ export function Feed({ onSignedOut, feedUserId }: { onSignedOut: () => void; fee
       deleteBusy={deleteBusy}
       deleteErrors={deleteErrors}
       onSignedOut={onSignedOut}
-      composer={{ value: draft, busy: posting, error: postFailed, onChange: changeDraft, onSubmit: () => void publish() }}
+      composer={{ value: draft, busy: posting, error: postFailed, file, onChange: changeDraft, onFile: changeFile, onSubmit: () => void publish() }}
       sentinelRef={sentinel}
     />
   );