File upload pipeline: wire end-to-end via APIv4 File.create
Closes the file-upload gap. Files now actually land in CiviCRM (verified
empirically against the live Civi instance via spike scripts).
Spike findings (see scripts/spike-file-upload.mjs):
- APIv4 Attachment is NOT exposed on this Civi
- APIv4 File + EntityFile ARE exposed; File.create accepts inline
base64 `content` and returns a usable file id
- Custom file fields store the file id directly in the custom column,
so EntityFile linkage is unnecessary for this use case
- Round-trip via Contact.update + Contact.get .file_name join verified
on a real org contact
Pipeline:
Renderer (FileField) picks up onChange →
POST /api/upload (multipart) with file + cid + cs + fieldRef →
verifyChecksum, MIME allowlist + magic-byte sniff, 5 MB cap →
civi.File.create({ file_name, mime_type, content: base64 }) →
returns { id, file_name } →
renderer stores in RHF state via setValue
Form submit →
POST /api/submit (JSON) with the {id, file_name} value →
submit detects the file shape and writes the id as the value of
the activity/contact custom field
File changes:
app/api/upload/route.ts
Replaced the 501 stub with the real File.create call. Comment
documents that EntityFile linkage is intentionally skipped and that
orphan cleanup is owned by a CiviCRM scheduled job.
app/api/submit/route.ts
For type:"file" values shaped as {id, file_name}, write the id as
the custom field value (activity or contact, depending on the
civiField / civiContactField the field declares).
components/fields/FieldRenderer.tsx
Replaced the bare <input type=file> register() with FileField, an
upload-on-pick subcomponent. The native input is NOT register()'d:
its FileList value was the original bug. FileField owns its
uploading + error state and writes {id, file_name} via setValue on
success. Submit is blocked upstream while uploads are in flight.
components/StageSection.tsx, components/EngagementForm.tsx
Thread setValue, cid, cs, and an onUploadStateChange callback
through to FieldRenderer. EngagementForm tracks uploads-in-flight
count; onSubmit refuses to submit while the count is > 0.
config/form.ts
Promotes Certificate_of_Incorporation from readonly to a real
file field now that the pipeline works.
app/api/data/route.ts
Drops the readonly carveout that was only needed while the
certificate was readonly.
scripts/list-civi-entities.mjs (new)
APIv4 entity probe + APIv3 attachment-API probe. Used to determine
that File (not Attachment) was the right entity on this Civi.
scripts/spike-file-upload.mjs (new)
The actual end-to-end test that proved out the pipeline before
wiring. Safe to re-run on any Civi instance during future audits.
Not in this change:
- Orphan attachment cleanup (CiviCRM scheduled job, Civi admin scope)
- Per-field MIME allowlists (single global list for v1)
- S3 / presigned-URL path for >5 MB files (deferred; capped at 5 MB
today to stay under Amplify Lambda's 6 MB sync payload limit)
This commit is contained in:
@@ -66,9 +66,17 @@ export function EngagementForm({ config, cid, cs }: EngagementFormProps) {
|
||||
control,
|
||||
watch,
|
||||
setFocus,
|
||||
setValue,
|
||||
formState: { errors, isDirty },
|
||||
} = useForm({ mode: "onBlur" });
|
||||
|
||||
// Count of file uploads currently in flight. Each <FileField> calls the
|
||||
// handler with +1 when it starts and -1 when it finishes; submit is
|
||||
// blocked while the count is > 0 so users can't ship a half-uploaded form.
|
||||
const [uploadsInFlight, setUploadsInFlight] = useState(0);
|
||||
const handleUploadStateChange = (delta: 1 | -1) =>
|
||||
setUploadsInFlight((n) => Math.max(0, n + delta));
|
||||
|
||||
// Subscribe ONLY to current_stage. That's the single field that affects
|
||||
// section visibility, so re-rendering the whole form on every keystroke
|
||||
// (which `watch()` with no args would do) is wasteful — particularly with
|
||||
@@ -279,6 +287,19 @@ export function EngagementForm({ config, cid, cs }: EngagementFormProps) {
|
||||
}
|
||||
|
||||
const onSubmit = async (values: Record<string, unknown>) => {
|
||||
// Block while any file upload is in flight — submitting now would
|
||||
// ship the form without the pending {id, file_name} value for that
|
||||
// field, which would silently clear the prior attachment.
|
||||
if (uploadsInFlight > 0) {
|
||||
setSubmitState({
|
||||
kind: "error",
|
||||
message:
|
||||
uploadsInFlight === 1
|
||||
? "A file is still uploading. Please wait a moment and try again."
|
||||
: `${uploadsInFlight} files are still uploading. Please wait a moment and try again.`,
|
||||
});
|
||||
return;
|
||||
}
|
||||
setSubmitState({ kind: "submitting" });
|
||||
try {
|
||||
// Strip values for hidden fields — never write data the user couldn't see.
|
||||
@@ -393,6 +414,7 @@ export function EngagementForm({ config, cid, cs }: EngagementFormProps) {
|
||||
<StageSection
|
||||
section={section}
|
||||
register={register}
|
||||
setValue={setValue}
|
||||
control={control}
|
||||
errors={errors}
|
||||
formValues={evalState}
|
||||
@@ -400,6 +422,9 @@ export function EngagementForm({ config, cid, cs }: EngagementFormProps) {
|
||||
locked={locked}
|
||||
defaultOpen={pathwayState === "current" || section.rank === 0}
|
||||
options={load.data.options ?? {}}
|
||||
cid={cid}
|
||||
cs={cs}
|
||||
onUploadStateChange={handleUploadStateChange}
|
||||
/>
|
||||
</li>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user