Phase 14d-2: pages edit form on FilePond + existing files listing#30
Merged
Conversation
Picks up where 14d-1 left off: the editor pages edit form now ships a
FilePond widget that posts to /editor/api/upload, plus a server-rendered
list of files already attached to the page (FileRepository::
findByItemAndField). Migrated 1.x images (the legacy `images` data
array) render in a separate, collapsible "Legacy" block as display-only
until 14d-3 brings them onto the new pipeline.
PagesModule:
- constructor takes FieldRepository + FileRepository (DI extended in
EditorRouter::dispatchPages).
- renderImagesSection rewritten:
* existing page → server-renders an <ul.image-list--uploaded>
with thumbnail (300×300) + filename + remove button per file,
followed by an <input.filepond> bound to the upload endpoint
via data-* attributes (itemId, fieldId, csrf-name/value, url).
* new page → "Save the page first" hint (UploadHandler requires
itemId >= 1).
* pages without an `images` field → friendly diagnostic.
- File-row markup carries data-file-id + CSRF/url so the init script
can DELETE existing files without a page reload.
filepond-init.js (vendored under editor/theme/scripts/):
- Registers image-preview, file-validate-type, file-validate-size
plugins when present; tolerates a missing FilePond global.
- For each <input.filepond>: configures the process URL, appends
itemId/fieldId/CSRF to multipart, parses {"fileId":N} response,
surfaces server "error" messages on failure.
- Wires .image-list__remove buttons to fetch DELETE the upload
endpoint (form-encoded body) and removes the row on success.
Editor template loads filepond.css + filepond-image-preview.css in
<head> and the four FilePond JS files + filepond-init.js before the
body close.
Manual smoke (PHP built-in server, 80×80 PNG fixture):
GET /editor/pages/edit/?page=3 200, FilePond input present with
all data-* attributes, legacy
block details summary visible,
filepond-init.js loaded
GET /editor/pages/edit/ 200, "Save the page first" hint;
no FilePond input
POST /editor/api/upload (image) 200; fileId returned
GET /editor/pages/edit/?page=3 200, image-list--uploaded row
with the new file + thumbnail
DELETE /editor/api/upload 200; files row gone
Editor template loads filepond.css, filepond.js,
filepond-image-preview.{css,js},
filepond-init.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Picks up where 14d-1 left off: the editor pages edit form now ships a
FilePond widget that posts to
/editor/api/upload, plus a server-renderedlist of files already attached to the page (
FileRepository::findByItemAndField).Migrated 1.x images (the legacy
imagesdata array) render in a separate,collapsible "Legacy" block as display-only until 14d-3 brings them onto
the new pipeline.
PagesModule:
FieldRepository+FileRepositoryrenderImagesSectionrewritten:<ul.image-list--uploaded>rows (thumbnail + name +remove button) followed by an
<input.filepond>withdata-*configitemId >= 1)imagesfield → friendly diagnosticdata-file-id+ CSRF/url so JS can DELETEwithout a page reload
filepond-init.js (vendored under
editor/theme/scripts/):when present; tolerates a missing FilePond global
<input.filepond>: configures the process URL, appendsitemId/fieldId/CSRF to multipart, parses
{"fileId":N}response.image-list__removebuttons to fetch DELETE the upload endpointand remove the row on success
Editor template loads
filepond.css+filepond-image-preview.cssin<head>and the four FilePond JS files +filepond-init.jsbeforebody close.
Test plan
GET /editor/pages/edit/?page=3→ 200, FilePond input + all data-*,legacy block, filepond-init.js loaded
GET /editor/pages/edit/→ 200, "Save the page first" hintPOST /editor/api/upload→ 200; fileId returnedDELETE /editor/api/upload→ 200; files row gone