TYPO3 FAL in Flexform - typo3

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();
}

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>