codegirl007/plumber
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Add post image upload interface (#12)

Browse Source 
Adds accessible drag-and-drop and browse controls, staged attachment editing, responsive lazy-loaded thread image grids, and UI regression coverage.

Reviewed-on: #12
Co-authored-by: codegirl-007 <s.raide@gmail.com>
This commit was merged in pull request #12.
This commit is contained in:
codegirl007
2026-08-29 08:01:04 +00:00
committed by codegirl007
parent 677e63329d
commit 394c7413c4
9 changed files with 641 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/posts_test.go
+90
View File
@@ -413,6 +413,12 @@ func TestQuestionPageRendersNestedPostControls(t *testing.T) {
Body: "Water under the cabinet.",
City: "Oakland",
PostDate: pacific.Today(),
Images: []store.PostImage{{
ID: "root-photo", ObjectKey: "post-images/root-photo.jpg",
PublicURL: "https://cdn.example/root-photo.jpg",
Description: "Water pooling below the shutoff valve",
Width: 1200, Height: 900,
}},
}
if err := mem.CreatePost(context.Background(), root); err != nil {
t.Fatal(err)
@@ -421,6 +427,11 @@ func TestQuestionPageRendersNestedPostControls(t *testing.T) {
ParentID: &root.ID,
AuthorID: homeowner.ID,
Body: "The model number is 123.",
Images: []store.PostImage{{
ID: "reply-photo", ObjectKey: "post-images/reply-photo.png",
PublicURL: "https://cdn.example/reply-photo.png",
Width: 900, Height: 1200,
}},
}
if err := mem.CreatePost(context.Background(), homeownerReply); err != nil {
t.Fatal(err)
@@ -429,6 +440,12 @@ func TestQuestionPageRendersNestedPostControls(t *testing.T) {
ParentID: &homeownerReply.ID,
AuthorID: admin.ID,
Body: "Replace the cartridge.",
Images: []store.PostImage{{
ID: "admin-photo", ObjectKey: "post-images/admin-photo.webp",
PublicURL: "https://cdn.example/admin-photo.webp",
Description: "Replacement cartridge orientation",
Width: 1000, Height: 1000,
}},
}
if err := mem.CreatePost(context.Background(), adminReply); err != nil {
t.Fatal(err)
@@ -460,6 +477,19 @@ func TestQuestionPageRendersNestedPostControls(t *testing.T) {
`action="/posts"`,
`data-submit-once`,
`data-submit-button`,
`enctype="multipart/form-data"`,
`data-image-picker`,
`accept="image/jpeg,image/png,image/webp"`,
`aria-live="polite"`,
`name="existing_image_id" value="root-photo"`,
`name="existing_image_id" value="reply-photo"`,
`src="https://cdn.example/root-photo.jpg"`,
`alt="Water pooling below the shutoff valve"`,
`src="https://cdn.example/reply-photo.png"`,
`alt="Photo attached to this post"`,
`src="https://cdn.example/admin-photo.webp"`,
`loading="lazy" decoding="async"`,
`<figcaption>Replacement cartridge orientation</figcaption>`,
`action="/posts/` + root.ID + `/edit"`,
`action="/posts/` + homeownerReply.ID + `/edit"`,
`href="/questions/` + root.ID + `#post-` + root.ID + `"`,
@@ -475,6 +505,9 @@ func TestQuestionPageRendersNestedPostControls(t *testing.T) {
if got := strings.Count(body, ">Permalink</a>"); got != 3 {
t.Fatalf("question page rendered %d permalinks, want 3: %s", got, body)
}
if got := strings.Count(body, `data-image-picker`); got != 5 {
t.Fatalf("question page rendered %d image pickers, want 5: %s", got, body)
}
if strings.Contains(body, `action="/posts/`+adminReply.ID+`/edit"`) {
t.Fatalf("homeowner can edit admin reply: %s", body)
}
@@ -490,6 +523,63 @@ func TestQuestionPageRendersNestedPostControls(t *testing.T) {
strings.Contains(rec.Body.String(), `action="/posts/`+root.ID+`/edit"`) {
t.Fatalf("admin edit controls are incorrect: %d %s", rec.Code, rec.Body.String())
}
rec = httptest.NewRecorder()
req = httptest.NewRequest(http.MethodGet, "/", nil)
for _, cookie := range homeownerCookies {
req.AddCookie(cookie)
}
handler.ServeHTTP(rec, req)
if rec.Code != http.StatusOK {
t.Fatalf("hunt page status = %d: %s", rec.Code, rec.Body.String())
}
if strings.Contains(rec.Body.String(), "cdn.example") {
t.Fatalf("hunt page rendered post images: %s", rec.Body.String())
}
}
func TestImagePickerAssetsAreServed(t *testing.T) {
t.Parallel()
srv, _ := newTestServer(t, Config{})
handler := srv.Handler()
for _, asset := range []struct {
path string
wants []string
}{
{
path: "/static/app.js",
wants: []string{
`const pickerSelector = "[data-image-picker]"`,
`new DataTransfer()`,
`addEventListener("drop"`,
`resetImagePicker`,
`URL.revokeObjectURL`,
},
},
{
path: "/static/app.css",
wants: []string{
`.image-dropzone`,
`.image-dropzone:focus-within`,
`.image-preview-list`,
`.post-image-grid`,
`@media (max-width: 520px)`,
},
},
} {
rec := httptest.NewRecorder()
req := httptest.NewRequest(http.MethodGet, asset.path, nil)
handler.ServeHTTP(rec, req)
if rec.Code != http.StatusOK {
t.Fatalf("%s status = %d", asset.path, rec.Code)
}
for _, want := range asset.wants {
if !strings.Contains(rec.Body.String(), want) {
t.Errorf("%s missing %q", asset.path, want)
}
}
}
}
func waitForMail(t *testing.T, recording *mail.Recording, want int) []mail.PostReply {
internal/web/server.go
+11
View File
@@ -104,6 +104,11 @@ type threadPostCtx struct {
Depth int
}
type imagePickerCtx struct {
ID string
Images []store.PostImage
}
func New(st store.Store, sessionStore scs.Store, templateFS fs.FS, staticFS fs.FS, cfg Config) (*Server, error) {
if cfg.Blob == nil {
cfg.Blob = blob.Disabled{}
@@ -118,6 +123,12 @@ func New(st store.Store, sessionStore scs.Store, templateFS fs.FS, staticFS fs.F
"postCtx": func(user *store.User, csrf string, root, post *store.Post, depth int) threadPostCtx {
return threadPostCtx{User: user, CSRF: csrf, Root: root, Post: post, Depth: depth}
},
"imagePicker": func(id string, images []store.PostImage) imagePickerCtx {
return imagePickerCtx{ID: id, Images: images}
},
"newImagePicker": func(id string) imagePickerCtx {
return imagePickerCtx{ID: id}
},
"add": func(a, b int) int { return a + b },
"rank": func(i int) int { return i + 1 },
"isAdmin": func(u *store.User) bool { return u.Admin() },
internal/web/server_test.go
+5
View File
@@ -173,6 +173,11 @@ func TestRegisterLoginAsk(t *testing.T) {
`id="submit-progress"`,
`data-submit-once`,
`data-submit-button`,
`enctype="multipart/form-data"`,
`data-image-picker`,
`id="submit-images"`,
`accept="image/jpeg,image/png,image/webp"`,
`Add up to 4 JPEG, PNG, or WebP images.`,
} {
if !strings.Contains(rec.Body.String(), want) {
t.Fatalf("submit form missing %q: %s", want, rec.Body.String())
static/app.css
+245
View File
@@ -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;
static/app.js
+194
View File
@@ -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);
})();
templates/partials/_image_picker.html
+85
View File
@@ -0,0 +1,85 @@
{{define "imagePicker"}}
<fieldset class="image-picker" data-image-picker data-max-images="4">
<legend>Photos <span class="optional">(optional)</span></legend>
<p id="{{.ID}}-hint" class="image-picker-hint">
Add up to 4 JPEG, PNG, or WebP images. Each image can be up to 5 MB.
</p>
<div class="image-dropzone" data-image-dropzone>
<input id="{{.ID}}" class="image-input" type="file" name="images"
accept="image/jpeg,image/png,image/webp" multiple
aria-describedby="{{.ID}}-hint {{.ID}}-status {{.ID}}-error"
data-image-input>
<label class="image-dropzone-label" for="{{.ID}}">
<strong>Drop photos here</strong>
<span>or click to browse</span>
</label>
<span id="{{.ID}}-status" class="image-picker-count" role="status"
aria-live="polite" data-image-count>{{len .Images}} of 4</span>
</div>
<p id="{{.ID}}-error" class="image-picker-error" role="alert"
data-image-error hidden></p>
<div class="image-preview-list" data-image-list>
{{range .Images}}
<article class="image-preview" data-image-card data-existing-image>
<div class="image-preview-media">
<img src="{{.PublicURL}}" alt="" width="{{.Width}}" height="{{.Height}}">
<span class="image-preview-tag">Saved</span>
</div>
<div class="image-preview-fields">
<input type="hidden" name="existing_image_id" value="{{.ID}}">
<label for="{{$.ID}}-description-{{.ID}}">
Image description <span class="optional">(optional)</span>
</label>
<input id="{{$.ID}}-description-{{.ID}}" type="text"
name="existing_image_description" maxlength="500"
value="{{.Description}}" placeholder="What should people notice?">
<button class="image-remove" type="button" data-remove-image
aria-label="Remove image{{if .Description}}: {{.Description}}{{end}}">
Remove
</button>
</div>
</article>
{{end}}
</div>
<template data-image-template>
<article class="image-preview" data-image-card data-new-image>
<div class="image-preview-media">
<img alt="" data-image-preview>
<span class="image-preview-tag">New</span>
</div>
<div class="image-preview-fields">
<p class="image-preview-name" data-image-name></p>
<label>
Image description <span class="optional">(optional)</span>
<input type="text" name="image_description" maxlength="500"
placeholder="What should people notice?">
</label>
<button class="image-remove" type="button" data-remove-image
aria-label="Remove selected image">
Remove
</button>
</div>
</article>
</template>
<noscript>
<p class="image-picker-hint">Image previews and removal while editing require JavaScript.</p>
</noscript>
</fieldset>
{{end}}
{{define "postImages"}}
{{if .Images}}
<div class="post-image-grid post-image-grid-{{len .Images}}">
{{range .Images}}
<figure class="post-image">
<img src="{{.PublicURL}}" width="{{.Width}}" height="{{.Height}}"
alt="{{if .Description}}{{.Description}}{{else}}Photo attached to this post{{end}}"
loading="lazy" decoding="async">
{{if .Description}}<figcaption>{{.Description}}</figcaption>{{end}}
</figure>
{{end}}
</div>
{{end}}
{{end}}
templates/partials/_post.html
+8 -3
View File
@@ -3,12 +3,13 @@
{{if canReply .User .Root}}
<details class="post-composer">
<summary>Reply</summary>
<form class="post-form" method="post" action="/posts"
<form class="post-form" method="post" action="/posts" enctype="multipart/form-data"
data-submit-once data-submitting-label="Posting…">
<input type="hidden" name="_csrf" value="{{.CSRF}}">
<input type="hidden" name="parent_id" value="{{.Post.ID}}">
<label for="reply-{{.Post.ID}}">Reply to {{.Post.AuthorName}}</label>
<textarea id="reply-{{.Post.ID}}" name="body" rows="5" required maxlength="12000"></textarea>
{{template "imagePicker" (newImagePicker (printf "reply-images-%s" .Post.ID))}}
<div class="post-form-actions">
<button type="submit" class="btn btn-primary" data-submit-button>Post reply</button>
<button type="reset" class="btn btn-ghost"
@@ -20,13 +21,16 @@
{{if canEditPost .User .Post}}
<details class="post-composer">
<summary>Edit</summary>
<form class="post-form" method="post" action="/posts/{{.Post.ID}}/edit">
<form class="post-form" method="post" action="/posts/{{.Post.ID}}/edit"
enctype="multipart/form-data"
data-submit-once data-submitting-label="Saving…">
<input type="hidden" name="_csrf" value="{{.CSRF}}">
<label for="edit-{{.Post.ID}}">Edit post</label>
<textarea id="edit-{{.Post.ID}}" name="body" rows="5" required
maxlength="12000">{{.Post.Body}}</textarea>
{{template "imagePicker" (imagePicker (printf "edit-images-%s" .Post.ID) .Post.Images)}}
<div class="post-form-actions">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="submit" class="btn btn-primary" data-submit-button>Save changes</button>
<button type="reset" class="btn btn-ghost"
onclick="this.closest('details').removeAttribute('open')">Cancel</button>
</div>
@@ -59,6 +63,7 @@
</p>
</header>
<p class="post-body">{{.Post.Body}}</p>
{{template "postImages" .Post}}
{{template "postActions" .}}
{{if .Post.Replies}}
<div class="post-replies">
templates/question.html
+1
View File
@@ -17,6 +17,7 @@
{{if isEdited .Question}}<span class="edited">Edited</span>{{end}}
</p>
<p class="post-body">{{.Question.Body}}</p>
{{template "postImages" .Question}}
{{template "postActions" (postCtx .User .CSRF .Question .Question 0)}}
</div>
</article>
templates/submit.html
+2 -1
View File
@@ -4,7 +4,7 @@
<h1>Ask a question</h1>
<p class="lede">It lands on today’s hunt (Pacific time). People vote; the ranking resets at midnight PT.</p>
{{if .Error}}<p class="banner error" role="alert">{{.Error}}</p>{{end}}
<form class="ask" method="post" action="/submit"
<form class="ask" method="post" action="/submit" enctype="multipart/form-data"
data-submit-once data-submitting-label="Posting…">
<input type="hidden" name="_csrf" value="{{.CSRF}}">
<label for="title">Title</label>
@@ -13,6 +13,7 @@
<textarea id="body" name="body" rows="8" required maxlength="8000" placeholder="Age of the house, what you already tried, where you are in the Bay if it helps.">{{.BodyVal}}</textarea>
<label for="city">City <span class="optional">(optional)</span></label>
<input id="city" name="city" type="text" maxlength="80" value="{{.CityVal}}" placeholder="Oakland">
{{template "imagePicker" (newImagePicker "submit-images")}}
<button type="submit" class="btn btn-primary" data-submit-button>Submit to today’s hunt</button>
</form>
</main>