fusion-form icon indicating copy to clipboard operation
fusion-form copied to clipboard

Add support for multiple file upload field

Open ger4003 opened this issue 2 years ago • 0 comments

With the following form configuration in place the submitted data values contain only the first selected file of the multiple file upload field attachments.

I have discovered that the underlying issue is how the __trustedProperties field value is created.

Form configuration

prototype(My.Package:Content.ApplicationForm) < prototype(Neos.Neos:ContentComponent) {
    renderer = Neos.Fusion.Form:Runtime.RuntimeForm {
            namespace = 'application_form'
    
            process {
                content = My.Package:Components.ApplicationForm

                schema = Neos.Fusion.Form:Runtime.SchemaCollection {
                    name = ${Form.Schema.string().isRequired()}
                    email = ${Form.Schema.string().isRequired().validator('EmailAddress')}
                    attachments = ${Form.Schema.arrayOf(Form.Schema.resource().isRequired().validator('Neos\Fusion\Form\Runtime\Validation\Validator\FileTypeValidator', { allowedMediaTypes: ['image/jpeg', 'application/pdf'] }))}
                    picture = ${Form.Schema.resource().isRequired().validator('Neos\Fusion\Form\Runtime\Validation\Validator\FileTypeValidator', { allowedMediaTypes: ['image/jpeg'] })}
                }
            }

            action {
                email {
                    type = 'Neos.Fusion.Form.Runtime:Email'
                    options {
                        senderAddress = ...
                        senderName = ${data.name}
                        replyToAddress = ${data.email}
                        recipientAddress = ...
                        subject = "..."
                        attachments {
                             multipleFileUpload = ${data.attachments}
                             singleFileUpload = ${data.picture}
                        }
                        text = "..."
                    }
                }
            }
        }
}

prototype(My.Package:Components.ApplicationForm) < prototype(Neos.Fusion:Component) {
    renderer = afx`
        <fieldset>
            <legend>Application form</legend>
        </fieldset>

        <Neos.Fusion.Form:FieldContainer field.name="name" label="Name">
            <Neos.Fusion.Form:Input>
        </Neos.Fusion.Form:FieldContainer>

        <Neos.Fusion.Form:FieldContainer field.name="email" label="Email">
            <Neos.Fusion.Form:Input 
                attributes.type="email" 
            />
        </Neos.Fusion.Form:FieldContainer>

        <!-- multiple file upload-->
        <Neos.Fusion.Form:FieldContainer field.name="attachments" label="Attachments">
            <input 
                name={field.getName() + '[]'} 
                type="file"
                multiple={true} 
            />
        </Neos.Fusion.Form:FieldContainer>

        <!-- single file upload-->
        <Neos.Fusion.Form:FieldContainer field.name="picture" label="Attachments">
            <Neos.Fusion.Form:Upload />
        </Neos.Fusion.Form:FieldContainer>
    `
}

ger4003 avatar Sep 28 '22 18:09 ger4003