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>