How to create a file upload field in flexform of a custom extbase extension in TYPO3 10?

Question

I tried to create a file upload field in flexform of an extbase extension in TYPO3 10. since the internal_type "file" is not supported in TYPO3 10, I tried the below given code.

<settings.bgImage>
    <TCEforms>
        <label>Background Image</label>
        <config>
            <type>inline</type>
            <maxitems>1</maxitems>
            <foreign_table>sys_file_reference</foreign_table>
            <!--<foreign_field>uid_foreign</foreign_field>-->
            <foreign_table_field>tablenames</foreign_table_field>
            <foreign_label>uid_local</foreign_label>
            <foreign_sortby>sorting_foreign</foreign_sortby>
            <foreign_selector>uid_local</foreign_selector>
            <foreign_selector_fieldTcaOverride type="array">
            <config>
                <appearance>
                    <elementBrowserType>file</elementBrowserType>
                    <elementBrowserAllowed>jpg,jpeg,png,svg</elementBrowserAllowed>
                </appearance>
            </config>
            </foreign_selector_fieldTcaOverride>
            <foreign_match_fields type="array">
                <fieldname>image</fieldname>
            </foreign_match_fields>
            <appearance type="array">
                <newRecordLinkAddTitle>1</newRecordLinkAddTitle>
                <createNewRelationLinkTitle>Add Image</createNewRelationLinkTitle>
                <headerThumbnail>
                    <field>uid_local</field>
                    <height>64</height>
                    <width>64</width>
                </headerThumbnail>
            </appearance>
        </config>
    </TCEforms>
  </settings.bgImage>

But this is also not working correctly. please help me to fix this. Thank you

Answer 1

Here is a currently working complete FlexForm with only a single FAL-Image field. The config has changed again... :-(

FlexForm Example

    <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>
                                    <!-- this will be stored in sys_file_reference.fieldname -->
                                    <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>
    </T3DataStructure>

Update: I'll show here a ViewHelper and how to use it...

Template Example

{namespace t=Your\Extension\ViewHelpers}

<f:for each="{t:FAL(uid=entry.uid, field='image', table='tt_content')}" as="preview">
    <div class="preview">
        <f:image src="{f:uri.image(image=preview)}" title="{preview.title}" />
        <figcaption>{preview.title} {preview.description}</figcaption>
    </div>
</f:for>

ViewHelper Example

<?php
namespace Your\Extension\ViewHelpers;
use TYPO3Fluid\Fluid\Core\Rendering\RenderingContextInterface;
use TYPO3Fluid\Fluid\Core\ViewHelper\AbstractViewHelper;
use TYPO3Fluid\Fluid\Core\ViewHelper\Traits\CompileWithRenderStatic;
use TYPO3\CMS\Core\Resource\ResourceFactory;
use TYPO3\CMS\Core\Utility\GeneralUtility;

class FALViewHelper extends AbstractViewHelper
{
    use CompileWithRenderStatic;

    public function initializeArguments()
    {
        $this->registerArgument('table', 'string', '', false);
        $this->registerArgument('field', 'string', '', true);
        $this->registerArgument('uid', 'integer', '', true);
    }
    public static function renderStatic( array $arguments, \Closure $renderChildrenClosure, RenderingContextInterface $renderingContext)
    {
        $resFactory = \TYPO3\CMS\Core\Resource\ResourceFactory::getInstance();
        $table = $arguments['table'] != NULL ? $arguments['table'] : 'tt_content';
        $field = $arguments['field'];
        $uid = intval($arguments['uid']);

        $fileRepository = GeneralUtility::makeInstance(\TYPO3\CMS\Core\Resource\FileRepository::class);
        $fileObjects = $fileRepository->findByRelation($table, $field, $uid);

        return $fileObjects;
    }
}

Explanation

The images are resolved thru the table sys_file_reference.

When you take a look at it, you will find, that these fields will be filled with your extensions data: - tablenames, - fieldname and - uid_foreign

A flexform field will probably have tt_content as tablenames, image as fieldname and the uid of your extensions tt_content record as uid_foreign.

The flexform defines the <fieldname>image</fieldname> ... this will become the fieldname.

The template must tell the ViewHelper what to look for: {t:FAL(uid=entry.uid, field='image', table='tt_content')}

• The entry.uid must match your content element's uid.
• The field='image' must match the FlexForm fieldname.
• The table must match the table where the data is stored in. (Here: tt_content)

If you are using it in an extension you will need to change the tablename to your tx_yourextension_whatever. You will probably change the fieldname as well...

Note

This code still seems to produce some deprecation warnings... I havn't yet figured out, how to overcome these :-/

Answer 2

Thanks for the code. I've been looking for a solution here for a while myself.

Unfortunately, the wrong image is displayed in my template. The output in my fluid template is like this:

{f:uri.image(src:'{data.flexform_images}', treatIdAsReference:'1')}

What's wrong?