allow image uploading to journals

Author: scooterthedev

client/src/components/AdminReviewPage.css

@@ -556,3 +556,22 @@
   opacity: 0.5;
   cursor: wait;
 }
+
+.admin-review-journal-description {
+  display: block;
+  margin: 0.3rem 0;
+  color: #c8d4f5;
+  font-size: 0.97rem;
+  white-space: pre-wrap;
+}
+
+.admin-review-media-item {
+  display: block;
+  max-width: 100%;
+  max-height: 24rem;
+  border-radius: 8px;
+  border: 2px solid #2e3f7a;
+  object-fit: contain;
+  background: #1a2240;
+  margin: 0.4rem 0;
+}

client/src/components/AdminReviewPage.jsx

@@ -1,5 +1,38 @@
 import { useAuth } from "../auth/AuthContext.jsx";
 import { useEffect, useMemo, useState } from "react";
+
+function isVideoUrl(url) {
+  const ext = url.split("?")[0].split(".").pop()?.toLowerCase();
+  return ["mp4", "webm", "ogg", "mov"].includes(ext);
+}
+
+function JournalDescriptionRenderer({ text }) {
+  if (!text) return null;
+  const parts = [];
+  const imgRe = /!\[([^\]]*)\]\((https:\/\/cdn\.hackclub\.com\/[^\s)]+)\)/g;
+  let last = 0;
+  let match;
+  while ((match = imgRe.exec(text)) !== null) {
+    if (match.index > last) parts.push({ type: "text", value: text.slice(last, match.index) });
+    parts.push({ type: "media", alt: match[1], url: match[2] });
+    last = match.index + match[0].length;
+  }
+  if (last < text.length) parts.push({ type: "text", value: text.slice(last) });
+
+  return (
+    <div className="admin-review-journal-description">
+      {parts.map((part, i) =>
+        part.type === "text" ? (
+          <span key={i} style={{ whiteSpace: "pre-wrap" }}>{part.value}</span>
+        ) : isVideoUrl(part.url) ? (
+          <video key={i} className="admin-review-media-item" src={part.url} controls preload="metadata" />
+        ) : (
+          <img key={i} className="admin-review-media-item" src={part.url} alt={part.alt} />
+        )
+      )}
+    </div>
+  );
+}
 import "./AdminReviewPage.css";
 
 function formatHours(value) {
@@ -444,7 +477,7 @@ function AdminReviewDetail({ projectId }) {
             journalEntries.map((entry) => (
               <article className="admin-review-journal-entry" key={entry.id}>
                 <strong>{entry.timeDone ? new Date(entry.timeDone).toLocaleString() : "N/A"} · {entry.hoursWorked}h</strong>
-                <p>{entry.description}</p>
+                <JournalDescriptionRenderer text={entry.description} />
                 {entry.toolsUsed?.length ? <small>Tools: {entry.toolsUsed.join(", ")}</small> : null}
               </article>
             ))

client/src/components/ProjectsPage.css

@@ -485,3 +485,78 @@
   color: #304389;
   font-weight: 700;
 }
+
+.journal-textarea-wrap {
+  position: relative;
+}
+
+.journal-textarea-wrap textarea {
+  width: 100%;
+  box-sizing: border-box;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+
+.journal-textarea-wrap--drag textarea {
+  border-color: #3b5fc0;
+  box-shadow: 0 0 0 3px rgba(59, 95, 192, 0.25);
+}
+
+.journal-textarea-drop-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  background: rgba(59, 95, 192, 0.12);
+  border: 2px dashed #3b5fc0;
+  font-size: 1rem;
+  font-weight: 700;
+  color: #1b4cc0;
+  pointer-events: none;
+}
+
+.journal-textarea-uploading {
+  position: absolute;
+  bottom: 0.4rem;
+  right: 0.6rem;
+  font-size: 0.78rem;
+  color: #3b5fc0;
+  font-weight: 700;
+  pointer-events: none;
+  background: rgba(255,255,255,0.85);
+  border-radius: 4px;
+  padding: 0 4px;
+}
+
+.journal-upload-error {
+  margin: 0.2rem 0 0;
+  font-size: 0.85rem;
+  color: #c0392b;
+  font-weight: 700;
+}
+
+.journal-upload-hint-text {
+  color: #6b7ea8;
+  font-size: 0.78rem;
+  font-weight: 400;
+  margin-top: 0.1rem;
+}
+
+.journal-description {
+  display: block;
+  margin: 0.35rem 0;
+  color: #304389;
+  font-size: 0.97rem;
+}
+
+.journal-media-item {
+  display: block;
+  max-width: 100%;
+  max-height: 20rem;
+  border-radius: 8px;
+  border: 2px solid #c7d6ff;
+  object-fit: contain;
+  background: #eef2ff;
+  margin: 0.4rem 0;
+}

client/src/components/ProjectsPage.jsx

@@ -1,5 +1,5 @@
 const platformBackground = "https://cdn.hackclub.com/019e3e5a-908f-707d-9790-91f9ec414045/bkg.png";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useAuth } from "../auth/AuthContext.jsx";
 import { PlatformStatusBar } from "./PlatformStatusBar.jsx";
 const sideBrick = "https://cdn.hackclub.com/019e3e5a-9d8a-7fcb-ad80-d6166cfd97f8/side_brick.png";
@@ -98,6 +98,51 @@ const emptyJournalEntry = {
   toolsUsed: "",
 };
 
+const ALLOWED_UPLOAD_TYPES = new Set([
+  "image/jpeg",
+  "image/png",
+  "image/gif",
+  "image/webp",
+  "image/avif",
+  "video/mp4",
+  "video/webm",
+  "video/ogg",
+  "video/quicktime",
+]);
+
+function isVideoUrl(url) {
+  const ext = url.split("?")[0].split(".").pop()?.toLowerCase();
+  return ["mp4", "webm", "ogg", "mov"].includes(ext);
+}
+
+function JournalDescriptionRenderer({ text }) {
+  if (!text) return null;
+  const parts = [];
+  const imgRe = /!\[([^\]]*)\]\((https:\/\/cdn\.hackclub\.com\/[^\s)]+)\)/g;
+  let last = 0;
+  let match;
+  while ((match = imgRe.exec(text)) !== null) {
+    if (match.index > last) parts.push({ type: "text", value: text.slice(last, match.index) });
+    parts.push({ type: "media", alt: match[1], url: match[2] });
+    last = match.index + match[0].length;
+  }
+  if (last < text.length) parts.push({ type: "text", value: text.slice(last) });
+
+  return (
+    <div className="journal-description">
+      {parts.map((part, i) =>
+        part.type === "text" ? (
+          <span key={i} style={{ whiteSpace: "pre-wrap" }}>{part.value}</span>
+        ) : isVideoUrl(part.url) ? (
+          <video key={i} className="journal-media-item" src={part.url} controls preload="metadata" />
+        ) : (
+          <img key={i} className="journal-media-item" src={part.url} alt={part.alt} />
+        )
+      )}
+    </div>
+  );
+}
+
 function displayStatus(project) {
   if (project.status === "approved") return "Approved";
   if (project.status === "rejected") return "Rejected";
@@ -593,6 +638,71 @@ function ProjectDetailsModal({ project, onClose, onEdit, onJournal, onShip, onDe
 }
 
 function JournalModal({ project, entries, form, onChange, onClose, onSubmit }) {
+  const [uploading, setUploading] = useState(false);
+  const [uploadError, setUploadError] = useState("");
+  const [isDraggingOver, setIsDraggingOver] = useState(false);
+  const textareaRef = useRef(null);
+  const descriptionRef = useRef(form.description);
+  descriptionRef.current = form.description;
+
+  async function uploadAndInsert(file) {
+    if (!ALLOWED_UPLOAD_TYPES.has(file.type)) {
+      setUploadError(`Unsupported file type: ${file.type}. Use JPEG, PNG, GIF, WebP, AVIF, MP4, WebM, OGG, or MOV.`);
+      return;
+    }
+    setUploading(true);
+    setUploadError("");
+
+    const textarea = textareaRef.current;
+    const start = textarea?.selectionStart ?? descriptionRef.current.length;
+    const end = textarea?.selectionEnd ?? start;
+    const placeholder = `![Uploading ${file.name}…]()`;
+    const before = descriptionRef.current.slice(0, start);
+    const after = descriptionRef.current.slice(end);
+    const withPlaceholder = `${before}${placeholder}${after}`;
+    onChange("description", withPlaceholder);
+    descriptionRef.current = withPlaceholder;
+
+    try {
+      const formData = new FormData();
+      formData.append("file", file);
+      const response = await fetch("/api/cdn/upload", {
+        method: "POST",
+        credentials: "include",
+        headers: { "x-file-type": file.type },
+        body: formData,
+      });
+      const data = await response.json();
+      if (!response.ok) throw new Error(data.error || "Upload failed.");
+
+      const mdLink = `![${file.name}](${data.url})`;
+      const resolved = descriptionRef.current.replace(placeholder, mdLink);
+      onChange("description", resolved);
+      descriptionRef.current = resolved;
+    } catch (err) {
+      const cleaned = descriptionRef.current.replace(placeholder, "");
+      onChange("description", cleaned);
+      descriptionRef.current = cleaned;
+      setUploadError(err.message);
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  function handleTextareaDrop(event) {
+    event.preventDefault();
+    setIsDraggingOver(false);
+    const files = Array.from(event.dataTransfer.files);
+    for (const file of files) uploadAndInsert(file);
+  }
+
+  function handleTextareaPaste(event) {
+    const files = Array.from(event.clipboardData?.files ?? []);
+    if (files.length === 0) return;
+    event.preventDefault();
+    for (const file of files) uploadAndInsert(file);
+  }
+
   return (
     <div className="projects-page__modal-overlay" role="presentation" onClick={onClose}>
       <section className="projects-page__modal projects-page__modal--journal" role="dialog" aria-modal="true" onClick={(event) => event.stopPropagation()}>
@@ -619,13 +729,33 @@ function JournalModal({ project, entries, form, onChange, onClose, onSubmit }) {
           </label>
           <label>
             Description
-            <textarea value={form.description} onChange={(event) => onChange("description", event.target.value)} required />
+            <div className={`journal-textarea-wrap${isDraggingOver ? " journal-textarea-wrap--drag" : ""}`}>
+              <textarea
+                ref={textareaRef}
+                value={form.description}
+                onChange={(event) => onChange("description", event.target.value)}
+                onDragOver={(e) => { e.preventDefault(); setIsDraggingOver(true); }}
+                onDragLeave={() => setIsDraggingOver(false)}
+                onDrop={handleTextareaDrop}
+                onPaste={handleTextareaPaste}
+                required
+                placeholder="Describe what you worked on… drag & drop or paste images/videos to attach them inline"
+              />
+              {isDraggingOver && (
+                <div className="journal-textarea-drop-overlay" aria-hidden="true">Drop to upload</div>
+              )}
+              {uploading && (
+                <div className="journal-textarea-uploading" aria-live="polite">Uploading…</div>
+              )}
+            </div>
+            {uploadError ? <p className="journal-upload-error">{uploadError}</p> : null}
+            <small className="journal-upload-hint-text">Drag &amp; drop or paste images/videos to embed them inline</small>
           </label>
           <label>
             Tools Used
             <input value={form.toolsUsed} onChange={(event) => onChange("toolsUsed", event.target.value)} placeholder="React, Figma, CAD" />
           </label>
-          <button type="submit">Save Entry</button>
+          <button type="submit" disabled={uploading}>Save Entry</button>
         </form>
 
         <section className="projects-page__journal-list" aria-label="Journal entries">
@@ -638,7 +768,7 @@ function JournalModal({ project, entries, form, onChange, onClose, onSubmit }) {
                 <strong>
                   {entry.timeDone ? new Date(entry.timeDone).toLocaleDateString() : "N/A"} - {entry.hoursWorked || 0} hrs
                 </strong>
-                <p>{entry.description}</p>
+                <JournalDescriptionRenderer text={entry.description} />
                 {entry.toolsUsed?.length ? <small>Tools: {entry.toolsUsed.join(", ")}</small> : null}
               </article>
             ))

server/index.js

@@ -353,6 +353,69 @@ app.delete("/api/projects/:id", requireUser, async (req, res) => {
   }
 });
 
+const CDN_API_KEY = process.env.CDN_API_KEY;
+const CDN_UPLOAD_URL = "https://cdn.hackclub.com/api/v4/upload";
+const ALLOWED_MEDIA_TYPES = new Set([
+  "image/jpeg",
+  "image/png",
+  "image/gif",
+  "image/webp",
+  "image/avif",
+  "video/mp4",
+  "video/webm",
+  "video/ogg",
+  "video/quicktime",
+]);
+
+app.post("/api/cdn/upload", requireUser, async (req, res) => {
+  if (!CDN_API_KEY) {
+    return res.status(503).json({ error: "CDN uploads are not configured on this server." });
+  }
+
+  const contentType = req.headers["content-type"] || "";
+  if (!contentType.startsWith("multipart/form-data")) {
+    return res.status(400).json({ error: "Expected multipart/form-data." });
+  }
+
+  const fileType = (req.headers["x-file-type"] || "").toLowerCase().trim();
+  if (!fileType || !ALLOWED_MEDIA_TYPES.has(fileType)) {
+    return res.status(400).json({ error: "Unsupported file type. Only images (JPEG, PNG, GIF, WebP, AVIF) and videos (MP4, WebM, OGG, MOV) are allowed." });
+  }
+
+  try {
+    const cdnResponse = await fetch(CDN_UPLOAD_URL, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${CDN_API_KEY}`,
+        "Content-Type": contentType,
+      },
+      body: req,
+      duplex: "half",
+    });
+
+    const data = await cdnResponse.json();
+    if (!cdnResponse.ok) {
+      return res.status(cdnResponse.status).json({ error: data?.error || "CDN upload failed." });
+    }
+
+    let uploadedUrl;
+    try {
+      const parsed = new URL(data.url || "");
+      if (parsed.hostname !== "cdn.hackclub.com" || parsed.protocol !== "https:") {
+        throw new Error("Unexpected CDN response URL.");
+      }
+      uploadedUrl = parsed.href;
+    } catch {
+      return res.status(502).json({ error: "CDN returned an unexpected URL." });
+    }
+
+    res.json({ url: uploadedUrl });
+  } catch (error) {
+    console.error("CDN upload proxy error:", error);
+    res.status(500).json({ error: "Failed to upload file." });
+  }
+});
+
 app.get("/api/projects/:id/journal_entries", requireUser, async (req, res) => {
   try {
     const entries = await listJournalEntriesForUserProject(req.session.userId, req.params.id);