TYPO3 FAL in Flexform

Question

I have a flexform with following code:

<image>
    <TCEforms>
        <label>LLL:EXT:my_slider/Resources/Private/Language/locallang.xlf:flexform.slider.main.slider.image</label>
        <config>
            <type>group</type>
            <internal_type>file</internal_type>
            <allowed>jpg, jpeg, gif, png</allowed>
            <show_thumbs>1</show_thumbs>
            <minitems>0</minitems>
            <maxitems>1</maxitems>
            <size>1</size>
        </config>
    </TCEforms>
</image>

Until now this worked. But now in TYPO3 10 I get this error:

TCA internal_type of field "image" in table tt_content must be set to "db" or "folder".

How can I resolve this? How can I migrate my flexform to FAL? I've testet a few solutions but they ended in:

Invalid flex form data structure on field name "pi_flexform" with element "image" in section container "sliderConfiguration": Nesting inline elements in flex form sections is not allowed.

if i write

<el>
    <settings.slider type="array">
    <title>LLL:EXT:my_slider/Resources/Private/Language/locallang.xlf:flexform.slider.main.slider</title>
    <type>array</type>
    <section>1</section>
    <el>
        <sliderConfiguration>
            <type>array</type>
            <title>LLL:EXT:my_slider/Resources/Private/Language/locallang.xlf:flexform.slider.main.slider.slide</title>
            <el>
                <media>
                    <!-- https://stackguides.com/questions/47554243/how-to-add-cropvariants-to-an-image-field-in-typo3-flexform -->
                    <TCEforms>
                        <label>
                            LLL:EXT:va_template/Resources/Private/Language/locallang.xlf:content_element.backgroundtext.settings.image
                        </label>
                        <config>
                            <type>inline</type>
                            <minitems>1</minitems>
                            <maxitems>1</maxitems>
                            <appearance type="array">
                                <enabledControls type="array">
                                    <delete>1</delete>
                                    <dragdrop>1</dragdrop>
                                    <new>0</new>
                                    <hide>1</hide>
                                    <info>1</info>
                                </enabledControls>
                                <fileUploadAllowed>1</fileUploadAllowed>
                                <headerThumbnail type="array">
                                    <field>uid_local</field>
                                    <height>100c</height>
                                    <width>100</width>
                                </headerThumbnail>
                                <useSortable>1</useSortable>
                            </appearance>
                            <foreign_field>uid_foreign</foreign_field>
                            <foreign_label>uid_local</foreign_label>
                            <foreign_match_fields type="array">
                                <fieldname>media</fieldname>
                            </foreign_match_fields>
                            <foreign_selector>uid_local</foreign_selector>
                            <foreign_sortby>sorting_foreign</foreign_sortby>
                            <foreign_table>sys_file_reference</foreign_table>
                            <foreign_table_field>tablenames</foreign_table_field>
                        </config>
                    </TCEforms>
                </media>

then i get this error

Invalid flex form data structure on field name "pi_flexform" with element "media" in section container "sliderConfiguration": Nesting inline elements in flex form sections is not allowed.

Answer 1

I have written here the full flexform config which will run with typo3 10.

<image>
                <TCEforms>
                    <label>LLL:EXT:ns_theme_healthy/Resources/Private/Language/locallang_flex.xlf:general.image</label>
                    <config>
                        <type>inline</type>
                        <maxitems>1</maxitems>
                        <foreign_table>sys_file_reference</foreign_table>
                        <foreign_table_field>tablenames</foreign_table_field>
                        <foreign_label>uid_local</foreign_label>
                        <foreign_sortby>sorting_foreign</foreign_sortby>
                        <foreign_field>uid_foreign</foreign_field>
                        <foreign_selector>uid_local</foreign_selector>
                        <foreign_selector_fieldTcaOverride>
                            <config>
                                <appearance>
                                    <elementBrowserType>file</elementBrowserType>
                                    <elementBrowserAllowed>gif,jpg,jpeg,png,svg</elementBrowserAllowed>
                                </appearance>
                            </config>
                        </foreign_selector_fieldTcaOverride>
                        <foreign_types type="array">
                            <numIndex index="0">
                                <showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
                            </numIndex>
                            <numIndex index="2">
                                <showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
                            </numIndex>
                        </foreign_types>
                        <foreign_match_fields>
                            <fieldname>image</fieldname> <!-- CAUTION!! Replace "fal" with the variable name of this field! -->
                        </foreign_match_fields>
                        <appearance type="array">
                            <newRecordLinkAddTitle>1</newRecordLinkAddTitle>
                            <headerThumbnail>
                                <field>uid_local</field>
                                <height>64</height>
                                <width>64</width>
                            </headerThumbnail>
                            <enabledControls>
                                <info>1</info>
                                <new>0</new>
                                <dragdrop>0</dragdrop>
                                <sort>1</sort>
                                <hide>0</hide>
                                <delete>1</delete>
                                <localize>1</localize>
                            </enabledControls>
                            <createNewRelationLinkTitle>LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:images.addFileReference</createNewRelationLinkTitle>
                        </appearance>
                        <behaviour>
                            <localizationMode>select</localizationMode>
                            <localizeChildrenAtParentLocalization>1</localizeChildrenAtParentLocalization>
                        </behaviour>
                        <overrideChildTca>
                            <columns type="array">
                                <uid_local type="array">
                                    <config type="array">
                                        <appearance type="array">
                                            <elementBrowserType>file</elementBrowserType>
                                            <elementBrowserAllowed>jpg,png,svg,jpeg,gif</elementBrowserAllowed>
                                        </appearance>
                                    </config>
                                </uid_local>
                            </columns>
                            <types type="array">
                                <numIndex index="2">
                                    <showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
                                </numIndex>
                            </types>
                        </overrideChildTca>
                    </config>
                </TCEforms>
            </image>

I have tested this will my all-new typo3 10 projects.

I hope it helps you. Thank you!

Answer 2

Solution by max.haredoom works :) Great work, man. It is strange that it only works without "settings..."

If you need this for a custom content element then you can add something like this to your processor file:

    if (isset($processedData['content']['images']) &&
        (int) $processedData['content']['images'] > 0) {
        $fileRepository = GeneralUtility::makeInstance(\TYPO3\CMS\Core\Resource\FileRepository::class);
        $fileObjects = $fileRepository->findByRelation('tt_content', 'image', $processedData['data']['uid']);
        // now loop over objects and get sys_file uids via $fileObject->getOriginalFile()->getUid();
    }

Answer 3

What about doing it like it is done in the standard content elements?

In the TYPO3 Backend go to the module Configuration
and select $GLOBALS['TCA'] (Table configuration array)
then find the path to tt_content.columns.media.config

select those fields and values and insert it as XML in your definition

Answer 4

I found this. The selected image is saved in tt_content. but it doesn't appear in the backend form after saving.

<options.image1>
    <TCEforms>
        <label>Bild</label>
        <config>
            <type>inline</type>
            <type>group</type>
            <internal_type>db</internal_type>
            <maxitems>1</maxitems>
            <foreign_table>sys_file_reference</foreign_table>
            <foreign_field>uid_foreign</foreign_field>
            <foreign_sortby>sorting_foreign</foreign_sortby>
            <foreign_table_field>tablenames</foreign_table_field>
            <foreign_match_fields>
                <fieldname>--feldname--</fieldname>
            </foreign_match_fields>
            <foreign_label>uid_local</foreign_label>
            <foreign_selector>uid_local</foreign_selector>
            <foreign_selector_fieldTcaOverride>
                <config>
                    <appearance>
                        <elementBrowserType>file</elementBrowserType>
                        <elementBrowserAllowed>gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai</elementBrowserAllowed>
                    </appearance>
                </config>
            </foreign_selector_fieldTcaOverride>
            <appearance>
                <elementBrowserType>file</elementBrowserType>
                <elementBrowserAllowed>jpg,jpeg,png,gif</elementBrowserAllowed>
            </appearance>
            <allowed>sys_file</allowed>
            <size>5</size>
            <minitems>0</minitems>
            <maxitems>5</maxitems>
            <show_thumbs>1</show_thumbs>
        </config>
    </TCEforms>
</options.image1>

Answer 5

I found a solution: Please see here: How to create a file upload field in flexform of a custom extbase extension in TYPO3 10?

Or for your convenience:

<T3DataStructure>
<sheets>
    <sDEF>
        <ROOT>
            <TCEforms>
                <sheetTitle>Example 1</sheetTitle>
            </TCEforms>
            <type>array</type>
            <el>
                <!-- example of a working fal image -->
                <images>
                    <label>FAL-Images</label>
                    <config>
                        <type>inline</type>
                        <foreign_table>sys_file_reference</foreign_table>
                        <foreign_field>uid_foreign</foreign_field>
                        <foreign_sortby>sorting_foreign</foreign_sortby>
                        <foreign_table_field>tablenames</foreign_table_field>
                        <foreign_match_fields>
                            <fieldname>image</fieldname>
                        </foreign_match_fields>
                        <foreign_label>uid_local</foreign_label>
                        <foreign_selector>uid_local</foreign_selector>
                        <overrideChildTca>
                            <columns>
                                <uid_local>
                                    <config>
                                        <appearance>
                                            <elementBrowserType>file</elementBrowserType>
                                            <elementBrowserAllowed></elementBrowserAllowed>
                                        </appearance>
                                    </config>
                                </uid_local>
                            </columns>
                        </overrideChildTca>
                        <filter>
                            <userFunc>TYPO3\CMS\Core\Resource\Filter\FileExtensionFilter->filterInlineChildren</userFunc>
                            <parameters>
                                <allowedFileExtensions></allowedFileExtensions>
                                <disallowedFileExtensions></disallowedFileExtensions>
                            </parameters>
                        </filter>
                        <appearance>
                            <useSortable>1</useSortable>
                            <headerThumbnail>
                                <field>uid_local</field>
                                <width>45</width>
                                <height>45c</height>
                            </headerThumbnail>
                            <enabledControls>
                                <info>1</info>
                                <new>0</new>
                                <dragdrop>1</dragdrop>
                                <sort>0</sort>
                                <hide>1</hide>
                                <delete>1</delete>
                            </enabledControls>
                        </appearance>
                    </config>
                </images>
                <!-- end -->
            </el>
        </ROOT>
    </sDEF>
</sheets>

Answer 6

I got a similar bug after updating Typo3 9.x to Typo3 10.x, if you want to edit a Field which was created by the DCE Extension.

My past config of a dce element, which gave me the error was:

<config>
    <type>group</type>
    <internal_type>file</internal_type>
    <allowed>jpg,jpeg,png,gif</allowed>
    <size>1</size>
    <minitems>0</minitems>
    <maxitems>1</maxitems>
    <show_thumbs>1</show_thumbs>
</config>

After changing the <internal_type> from file to folder the error was gone end everything is fine again. The Backend also told me the option "db" will maybe also work in some cases.

<config>
    <type>group</type>
    <internal_type>folder</internal_type>
    <allowed>jpg,jpeg,png,gif</allowed>
    <size>1</size>
    <minitems>0</minitems>
    <maxitems>1</maxitems>
    <show_thumbs>1</show_thumbs>
</config>