Sigala's Blog

In this post I am going to show you how you can use a TYPO3 Form (form from the TYPO3 form extension) to create a new data record in the database with the possibility to upload multiple images and assign these uploaded images as file references to this created data record.

 

Scenario

This post will demonstrate the following scenario. We will create a TYPO3 form which is going to

1. Add a new record into the fe_users database table.
2. Upload muliple images and add these images as file references to the created record and the images will be accessible via the image property of the Frontend User object.

Note: Frontend User object here refers to an object corresponding to a data record from the fe_users table.

 

Brush up on your knowledge on EXT:form. Do this by reading the documentation. You don't have to go into the Configuration Reference and API Reference sections of the documentation. Just read up on the other parts to understand the basic concepts of TYPO3 forms.

 

Configure EXT:form

Assuming you have a TYPO3 website with the form extension installed and a sitepackage extension setup, follow the steps below to configure EXT:form. If you do not have a sitepackage setup, follow this tutorial to set this up.

1. Register your custom YAML configuration for EXT:form

Include the Typoscript settings for the EXT:form to the Typoscript template record. Make sure it is before the Typoscript settings of the sitepackage.

Add the code below to the setup.typoscript file of your sitepackage.

 

plugin.tx_form {
    settings {
        yamlConfigurations {
            100 = EXT:demo_sitepackage/Configuration/Form/CustomFormSetup.yaml
        }
    }
}
module.tx_form {
    settings {
        yamlConfigurations {
            100 = EXT:demo_sitepackage/Configuration/Form/CustomFormSetup.yaml
        }
    }
}

 

The setup.typoscript file of the sitepackage used as demo for this article can be found at: https://github.com/Mbigha/form-demo-sitepackage/blob/main/Configuration/TypoScript/setup.typoscript.

2. Write EXT:form configuration

Next, create the CustomFormSetup.yaml file in the directory as specified in the Typoscript code above and enter the form configuration. Link to the full form configuration used for this demo can be found here: https://github.com/Mbigha/form-demo-sitepackage/blob/main/Configuration/Form/CustomFormSetup.yaml

 

Create the custom form element implementation class

A custom form element will be used for the form field for uploading multiple images since the default image upload element does not allow multiple image upload.

Create the implementation class for the custom form element in the directory as specified in the custom form configuration.

Implementation class: https://github.com/Mbigha/form-demo-sitepackage/blob/main/Classes/Domain/Model/FormElements/MultipleUpload.php

 

Create Fluid template for the custom form element

Fluid templates for rendering form elements in the frontend are stored in the partialRootPaths folder. From the custom form configuration, this is the EXT:demo_sitepackage/Resources/Private/Partials/Form/Frontend/ folder. From the form configuration, the template name has to be MultipleUpload.html. Go to this directory and create this file.

MultipleUpload.html file: https://github.com/Mbigha/form-demo-sitepackage/blob/main/Resources/Private/Partials/Form/Frontend/MultipleUpload.html

 

Create form

1. Create the Forms folder in the Resource/Private folder of your sitepackage for storing your form definition which will be created by the form editor. 
2. Using the Form manager, create a new blank form and build the form using the Form editor.
3. Go to the generated form definition and manually add the registered custom finisher as a finisher for this form.
4. Update the name of the identifiers of the form fields to more meaningful names so they are easier to work later.

The full form definition for this demo can be found here: https://github.com/Mbigha/form-demo-sitepackage/blob/main/Resources/Private/Forms/demoform.form.yaml.

 

Create the registered custom finisher

Create the custom finisher at the location as specified in the custom form configuration at the implementationClassName option of the finisher definition. 

Here is a link to the custom finisher created for this demo. The file has been documented to ease understanding it.

Custom Finisher: https://github.com/Mbigha/form-demo-sitepackage/blob/main/Classes/Domain/Finishers/SaveUserDataFinisher.php

 

Results

Add the created form to a page. The form from this tutorial looks like below

 

Debug output

Below is a debug output showing the created user record with the uploaded images available as FileReference objects at the image property of the created user object.

The full extension containing all the code used for this tutorial can be found at: https://github.com/Mbigha/form-demo-sitepackage/tree/main

 

Hope this article was able to help. If any question, just write me using the contact form and I will gladly help.