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://stackoverflow.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();
    }