(form-builder-plugin) File upload support

[Mephiztopheles]

I have a project, where I need to create an application form, which needs to have an upload field for the cv.

The current approach does not support this, because it receives json at the endpoint form-submissions.

I can imagine, to create a different endpoint but I have no Idea, if this would work well.
Before I start to burn hours of work, I would like to know if there is an upcoming feature which would support this

[denolfe]

There are no plans to add support for this in the near future.

[sarbazx]

Hello @Mephiztopheles

were able to add upload field?

[Mephiztopheles]

No. Sorry for the late reply

[r1tsuu]

I had done this, steps:

1. Extend the fields for FormSubmissions collection with added a file name field that has upload type
2. Extend the field types for Forms collection with added a FileField block, this way your frontend will know when to render it.
3. On your frontend when submitting a form, you'll have to create a file document in your uploads collection before form-submission document creation.
   You can also go with a custom endpoint that does file and form submission documents creation at the same time (ideally you can use a transaction here). It should accept application/form-data.

[sarbazx]

I had done this, steps:

1. Extend the fields for FormSubmissions collection with added a file name field that has upload type
2. Extend the field types for Forms collection with added a FileField block, this way your frontend will know when to render it.
3. On your frontend when submitting a form, you'll have to create a file document in your uploads collection before form-submission document creation.
   You can also go with a custom endpoint that does file and form submission documents creation at the same time (ideally you can use a transaction here). It should accept application/form-data.

is it possible for you to share the code?

[tiennth193]

I had done this, steps:

1. Extend the fields for FormSubmissions collection with added a file name field that has upload type
2. Extend the field types for Forms collection with added a FileField block, this way your frontend will know when to render it.
3. On your frontend when submitting a form, you'll have to create a file document in your uploads collection before form-submission document creation.
   You can also go with a custom endpoint that does file and form submission documents creation at the same time (ideally you can use a transaction here). It should accept application/form-data.

Can you share it?

[andrehil]

For anyone looking to add a custom field to form-builder, I found this article and it worked :)
https://dev.to/mikecebul/payload-from-builder-plugin-custom-fields-5d3j

[aelaboussi]

You can use following approach:

I upload the file first and get its ID, then 'beforeEmail' gets id from body, find the file and attach it to email.

formBuilderPlugin({
      beforeEmail: async (emails, beforeChangeParams) => {
        return await Promise.all(
          emails.map(async (email) => {
            let attachments: any[] | undefined = undefined

            if (beforeChangeParams.data?.submissionData) {
              attachments = []

              for (let i = 0; i < beforeChangeParams.data.submissionData.length; i++) {
                const item = beforeChangeParams.data.submissionData[i]

                if (item.field === 'attachment') {
                  const documentsCollection =
                    beforeChangeParams.req.payload.collections['documents']
                  const data = await beforeChangeParams.req.payload.findByID({
                    collection: 'documents',
                    id: item.value,
                  })
                  const filename = data?.url?.toString() ? path.basename(data.url.toString()) : undefined; // check if yours is same (version)
                  if (documentsCollection.config.upload.staticDir && filename) {
                    attachments = [
                      ...attachments,
                      {
                        path: [documentsCollection.config.upload.staticDir, filename].join('/'),
                      },
                    ]
                  }
                }
              }
            }

            return {
              ...email,
              attachments,
            }
          }),
        )
      },
      fields: {
        text: true,
        textarea: true,
        ...
        attachment: {
          slug: 'attachment',
          labels: {
            singular: 'CV',
            plural: 'CV',
          },
          fields: [
            {
              type: 'row',
              fields: [
                {
                  name: 'name',
                  type: 'text',
                  label: 'Name: ',
                  required: true,
                  admin: { width: '50%' },
                },
                {
                  name: 'label',
                  type: 'text',
                  label: 'Label: ',
                  admin: { width: '50%' },
                },
              ],
            },
          ],
        } as Block,
      },
      formOverrides: {
        admin: {
          useAsTitle: 'title',
        },
        labels: {
          singular: 'form',
          plural: 'forms',
        },
      },
      formSubmissionOverrides: {
        labels: {
          singular: 'Submissions',
          plural: 'Soumissions',
        },
        fields: ({ defaultFields }) => [
          {
            name: 'form',
            type: 'relationship',
            relationTo: 'forms',
            required: true,
            admin: {
              position: 'sidebar',
            },
          },
          ...defaultFields.filter(
            (field) => !(typeof field === 'object' && 'name' in field && field.name === 'form'),
          ),
        ],
      },
    })