Add post image upload interface

templates/partials/_image_picker.html

@@ -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

@@ -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">