feat: handle attach fields

[harshtandiya]

Summary by CodeRabbit

Release Notes

• New Features
  • Added "Attach" field type enabling users to upload files within forms
  • File upload interface with preview mode and file removal functionality
  • Support for multiple file formats including images and PDFs
  • Attachment component integrated with form builder for seamless file management

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

The changes introduce support for an "Attach" field type to the forms_pro application. Updates include adding "Attach" to the form_field DocType schema and Python type definitions, creating a new Attachment Vue component with file upload and preview capabilities, integrating the new field type into FieldRenderer for rendering, and registering the field in the form fields utility registry.

Changes

Cohort / File(s)	Summary
Form Field Type Definition forms_pro/forms_pro/doctype/form_field/form_field.json, forms_pro/forms_pro/doctype/form_field/form_field.py	Added "Attach" to fieldtype select options and updated Python literal type declaration to include "Attach" as a valid fieldtype option.
Frontend Field Renderer frontend/src/components/builder/FieldRenderer.vue	Added conditional branch for fieldtype == 'Attach' that renders a label, required indicator, nested RenderField component, and description, with support for edit mode and disabled states.
Frontend File Attachment Component frontend/src/components/fields/Attachment.vue	New Vue component providing file upload UI with FileUploader integration, file preview mode, size formatting, and remove functionality. Emits file URL via update:value event.
Frontend Form Field Registry frontend/src/utils/form_fields.ts	Added AttachmentField definition and "Attach" entry to formFields array; replaced FileUploader import with Attachment component import.
Debug Output frontend/src/pages/SubmissionPage.vue	Added pre-formatted debug display of submissionFormStore in template.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• PR #9: Extends the same frontend form field infrastructure (form_fields.ts, FieldRenderer.vue) by adding the Attach field type with new Attachment component and field definition.
• PR #12: Also modifies the form_field DocType schema, Python type definitions, FieldRenderer.vue, and form_fields registry to add a new fieldtype (Link), following the same integration pattern.

Poem

🐰 A file attachment field hops into view,
With upload and preview in one component new,
The form builder renders it just right,
Now documents attach with delight! ✨📎

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a387105 and 0222fb7.

📒 Files selected for processing (6)

• forms_pro/forms_pro/doctype/form_field/form_field.json
• forms_pro/forms_pro/doctype/form_field/form_field.py
• frontend/src/components/builder/FieldRenderer.vue
• frontend/src/components/fields/Attachment.vue
• frontend/src/pages/SubmissionPage.vue
• frontend/src/utils/form_fields.ts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}