Add post image upload interface

2026-08-28 05:31:12 -07:00
parent 677e63329d
commit ab58398e68
9 changed files with 641 additions and 4 deletions
@@ -749,6 +749,243 @@ input:focus, textarea:focus, .btn:focus-visible, .chip:focus-visible, .vote-btn:

 .post-form-actions .btn { flex: 1 1 10rem; }

+.image-picker {
+  min-width: 0;
+  margin: 10px 0;
+  padding: 0;
+  border: 0;
+}
+
+.image-picker legend {
+  margin-bottom: 6px;
+  padding: 0;
+  font-family: var(--mono);
+  font-weight: 500;
+  font-size: 0.68rem;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+
+.image-picker-hint {
+  margin: 0 0 8px;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 0.7rem;
+  line-height: 1.5;
+  text-wrap: pretty;
+}
+
+.image-dropzone {
+  position: relative;
+  min-height: 108px;
+  display: grid;
+  place-content: center;
+  gap: 8px;
+  padding: 18px 72px 18px 18px;
+  border: 1px dashed var(--zinc);
+  border-radius: 3px;
+  background: #181a1d;
+  transition: border-color 140ms ease, background-color 140ms ease;
+}
+
+.image-dropzone:hover,
+.image-dropzone.is-dragging {
+  border-color: var(--signal);
+  background: #202124;
+}
+
+.image-dropzone:focus-within {
+  outline: 2px solid var(--signal);
+  outline-offset: 2px;
+}
+
+.image-input {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.image-dropzone-label {
+  display: grid;
+  gap: 3px;
+  pointer-events: none;
+  text-align: center;
+  color: var(--ink);
+}
+
+.image-dropzone-label strong {
+  font-family: var(--sans);
+  font-size: 0.95rem;
+  font-weight: 500;
+  letter-spacing: 0;
+  text-transform: none;
+}
+
+.image-dropzone-label span {
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 0.68rem;
+  letter-spacing: 0.05em;
+}
+
+.image-picker-count {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 3px 6px;
+  border: 1px solid var(--line);
+  color: var(--muted);
+  background: var(--panel);
+  font-family: var(--mono);
+  font-size: 0.65rem;
+  letter-spacing: 0.06em;
+  pointer-events: none;
+}
+
+.image-picker-error {
+  margin: 8px 0 0;
+  color: #ffd0d0;
+  font-family: var(--mono);
+  font-size: 0.72rem;
+}
+
+.image-preview-list {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  margin-top: 10px;
+}
+
+.image-preview {
+  min-width: 0;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  border: 1px solid var(--line);
+  border-radius: 3px;
+  overflow: hidden;
+  background: #141516;
+}
+
+.image-preview[hidden] { display: none; }
+
+.image-preview-media {
+  position: relative;
+  aspect-ratio: 4 / 3;
+  background: var(--bg);
+  overflow: hidden;
+}
+
+.image-preview-media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.image-preview-tag {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  padding: 3px 6px;
+  background: rgba(20, 21, 22, 0.9);
+  border: 1px solid var(--line);
+  color: var(--ink);
+  font-family: var(--mono);
+  font-size: 0.6rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.image-preview-fields {
+  min-width: 0;
+  display: grid;
+  align-content: start;
+  gap: 7px;
+  padding: 10px;
+}
+
+.image-preview-fields label {
+  display: grid;
+  gap: 6px;
+}
+
+.image-preview-name {
+  margin: 0;
+  overflow: hidden;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 0.68rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.image-remove {
+  width: fit-content;
+  min-height: 44px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 0.68rem;
+  letter-spacing: 0.06em;
+  text-decoration: underline;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.image-remove:hover { color: #ffd0d0; }
+.image-remove:focus-visible {
+  outline: 2px solid var(--signal);
+  outline-offset: 2px;
+}
+
+.post-image-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.post-image-grid-1 { grid-template-columns: minmax(0, 1fr); }
+
+.post-image {
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 3px;
+  background: #141516;
+}
+
+.post-image img {
+  width: 100%;
+  height: 100%;
+  max-height: 32rem;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+}
+
+.post-image-grid-1 .post-image img {
+  height: auto;
+  aspect-ratio: auto;
+  object-fit: contain;
+}
+
+.post-image figcaption {
+  padding: 8px 10px;
+  border-top: 1px solid var(--line);
+  color: var(--muted);
+  font-family: var(--mono);
+  font-size: 0.7rem;
+  line-height: 1.45;
+  overflow-wrap: anywhere;
+}
+
 .post-permalink {
  display: inline-flex;
  align-items: center;
@@ -797,8 +1034,16 @@ input:focus, textarea:focus, .btn:focus-visible, .chip:focus-visible, .vote-btn:
  .panel-wrap { padding: 32px; }
 }

+@media (max-width: 520px) {
+  .image-preview-list,
+  .post-image-grid {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover { filter: none; }
+  .image-dropzone { transition: none; }
  .submit-progress-bar {
    width: 100%;
    animation: none;
@@ -1,5 +1,9 @@
 (() => {
  const formSelector = "form[data-submit-once]";
+  const pickerSelector = "[data-image-picker]";
+  const allowedImageTypes = new Set(["image/jpeg", "image/png", "image/webp"]);
+  const maxImageBytes = 5 * 1024 * 1024;
+  const pickerStates = new WeakMap();

  function progressIndicator() {
    return document.getElementById("submit-progress");
@@ -21,6 +25,193 @@
    }
  }

+  function existingImageCount(picker) {
+    return picker.querySelectorAll("[data-existing-image]:not([hidden])").length;
+  }
+
+  function updateImageCount(picker, state) {
+    const count = existingImageCount(picker) + state.entries.length;
+    const status = picker.querySelector("[data-image-count]");
+    if (status) {
+      status.textContent = `${count} of ${state.max}`;
+    }
+  }
+
+  function showImageError(picker, message) {
+    const error = picker.querySelector("[data-image-error]");
+    if (!error) {
+      return;
+    }
+    error.textContent = message;
+    error.hidden = !message;
+  }
+
+  function imageFileAllowed(file) {
+    if (allowedImageTypes.has(file.type)) {
+      return true;
+    }
+    if (file.type) {
+      return false;
+    }
+    return /\.(jpe?g|png|webp)$/i.test(file.name);
+  }
+
+  function sameImageFile(left, right) {
+    return left.name === right.name &&
+      left.size === right.size &&
+      left.lastModified === right.lastModified;
+  }
+
+  function syncImageInput(state) {
+    const transfer = new DataTransfer();
+    state.entries.forEach((entry) => transfer.items.add(entry.file));
+    state.input.files = transfer.files;
+  }
+
+  function removeNewImage(picker, state, entry) {
+    const index = state.entries.indexOf(entry);
+    if (index === -1) {
+      return;
+    }
+    state.entries.splice(index, 1);
+    URL.revokeObjectURL(entry.previewURL);
+    entry.card.remove();
+    syncImageInput(state);
+    showImageError(picker, "");
+    updateImageCount(picker, state);
+  }
+
+  function addImageFiles(picker, state, files) {
+    showImageError(picker, "");
+    const uniqueFiles = files.filter((file) =>
+      !state.entries.some((entry) => sameImageFile(entry.file, file))
+    );
+    const available = state.max - existingImageCount(picker) - state.entries.length;
+    if (uniqueFiles.length > available) {
+      showImageError(
+        picker,
+        available > 0
+          ? `You can add ${available} more ${available === 1 ? "image" : "images"}.`
+          : "You already have 4 images selected."
+      );
+      syncImageInput(state);
+      return;
+    }
+    for (const file of uniqueFiles) {
+      if (!imageFileAllowed(file)) {
+        showImageError(picker, "Images must be JPEG, PNG, or WebP.");
+        syncImageInput(state);
+        return;
+      }
+      if (file.size > maxImageBytes) {
+        showImageError(picker, `${file.name} is larger than 5 MB.`);
+        syncImageInput(state);
+        return;
+      }
+    }
+
+    uniqueFiles.forEach((file) => {
+      const fragment = state.template.content.cloneNode(true);
+      const card = fragment.querySelector("[data-new-image]");
+      const preview = fragment.querySelector("[data-image-preview]");
+      const name = fragment.querySelector("[data-image-name]");
+      const previewURL = URL.createObjectURL(file);
+      preview.src = previewURL;
+      if (name) {
+        name.textContent = file.name;
+      }
+      const entry = { file, card, previewURL };
+      const removeButton = card.querySelector("[data-remove-image]");
+      removeButton.setAttribute("aria-label", `Remove selected image: ${file.name}`);
+      removeButton.addEventListener("click", () => {
+        removeNewImage(picker, state, entry);
+      });
+      state.list.appendChild(fragment);
+      state.entries.push(entry);
+    });
+    syncImageInput(state);
+    updateImageCount(picker, state);
+  }
+
+  function resetImagePicker(picker) {
+    const state = pickerStates.get(picker);
+    if (!state) {
+      return;
+    }
+    state.entries.forEach((entry) => {
+      URL.revokeObjectURL(entry.previewURL);
+      entry.card.remove();
+    });
+    state.entries = [];
+    state.input.value = "";
+    picker.querySelectorAll("[data-existing-image]").forEach((card) => {
+      card.hidden = false;
+      card.querySelectorAll("input").forEach((input) => {
+        input.disabled = false;
+      });
+    });
+    showImageError(picker, "");
+    updateImageCount(picker, state);
+  }
+
+  function initializeImagePicker(picker) {
+    if (
+      pickerStates.has(picker) ||
+      typeof DataTransfer === "undefined" ||
+      typeof URL.createObjectURL !== "function"
+    ) {
+      return;
+    }
+    const input = picker.querySelector("[data-image-input]");
+    const dropzone = picker.querySelector("[data-image-dropzone]");
+    const list = picker.querySelector("[data-image-list]");
+    const template = picker.querySelector("[data-image-template]");
+    if (!input || !dropzone || !list || !template) {
+      return;
+    }
+    const state = {
+      input,
+      list,
+      template,
+      entries: [],
+      max: Number.parseInt(picker.dataset.maxImages, 10) || 4,
+    };
+    pickerStates.set(picker, state);
+    updateImageCount(picker, state);
+
+    input.addEventListener("change", () => {
+      addImageFiles(picker, state, Array.from(input.files));
+    });
+    picker.querySelectorAll("[data-existing-image]").forEach((card) => {
+      card.querySelector("[data-remove-image]").addEventListener("click", () => {
+        card.hidden = true;
+        card.querySelectorAll("input").forEach((existingInput) => {
+          existingInput.disabled = true;
+        });
+        showImageError(picker, "");
+        updateImageCount(picker, state);
+      });
+    });
+    ["dragenter", "dragover"].forEach((eventName) => {
+      dropzone.addEventListener(eventName, (event) => {
+        event.preventDefault();
+        dropzone.classList.add("is-dragging");
+      });
+    });
+    ["dragleave", "drop"].forEach((eventName) => {
+      dropzone.addEventListener(eventName, (event) => {
+        event.preventDefault();
+        dropzone.classList.remove("is-dragging");
+      });
+    });
+    dropzone.addEventListener("drop", (event) => {
+      addImageFiles(picker, state, Array.from(event.dataTransfer.files));
+    });
+    picker.closest("form")?.addEventListener("reset", () => {
+      window.setTimeout(() => resetImagePicker(picker), 0);
+    });
+  }
+
  document.addEventListener("submit", (event) => {
    const form = event.target.closest(formSelector);
    if (!form) {
@@ -50,9 +241,12 @@

  window.addEventListener("pageshow", () => {
    document.querySelectorAll(formSelector).forEach(resetForm);
+    document.querySelectorAll(pickerSelector).forEach(resetImagePicker);
    const progress = progressIndicator();
    if (progress) {
      progress.hidden = true;
    }
  });
+
+  document.querySelectorAll(pickerSelector).forEach(initializeImagePicker);
 })();