Uploading images in CP using ee:_shared/form via custom addon

Question

I created a module for EE2 a few years back and I'm in the process of making this compatible with EE3/4. I'd ideally like to make use of the ee:_shared/form (Shared Form View) and I'm 90% there but struggling with image field types. Text fields are working perfectly fine.

user/addons/module_name/mcp.module_name.php

public function add()
{
    if ( ! ee()->cp->allowed_group('can_access_content'))
    {
        show_error(lang('unauthorised_access'));
    }

    $vars = array(
        'base_url'              => ee('CP/URL', 'addons/settings/' . $this->lower . '/update'),
        'cp_page_title'         => lang('add'),
        'save_btn_text'         => 'btn_add',
        'save_btn_text_working' => 'btn_saving'
    );

    $vars['sections'] = array(
        $this->get_sections()
    );

    return ee('View')->make('module_name:form')->render($vars);
}

// $this->get_sections() returns the following nested arrays
// This is working fine for text fields
$sections[] = array(
    'title'  => $field,
    'fields' => array(
        $field => array(
            'type'     => $type,
            'value'    => $value,
            'required' => $required 
        )
    )
);

user/addons/module_name/View/form.php

<?php $this->embed('ee:_shared/form'); ?>

I'm guessing I need to use the ee('CP/FilePicker') Service for something but the documentation is very vague.

I appreciate this is an incredibly vague query but does anyone have experience with setting up a file/image field using EE's shared form view?

Answer 1

I've finally got to the bottom of this.

I needed to create a file picker reference and set that as the content of an HTML field type. The file picker allows you to search, select and upload images and stores the file's ID as the value of the field. I've added the full commented code below.

addons/module_name/mcp.module_name.php

public function add()
{
    // Options for shared view
    $vars = array(
        'base_url'              => ee('CP/URL', 'addons/settings/module_name/update'),
        'cp_page_title'         => lang('add_location'),
        'save_btn_text'         => 'btn_add_location',
        'save_btn_text_working' => 'btn_saving'
    );

    $image_id    = 123; // Get this when editing or leave blank when adding

    /* Begin image stuff */
    // Create a new File Picker
    $file_picker = ee('CP/FilePicker')->make();

    // Create a link from File Picker (more options on link below)
    // https://docs.expressionengine.com/latest/development/services/filepicker.html
    $link        = $file_picker->getLink('Browse Images')
        ->asThumbs() // Show images as thumbnails
        ->withValueTarget('location_image'); // This needs to match both the name and id attribute of the hidden input

    $vars['sections'] = array(
        'image' => array( // Will add a section to the form with the title 'Image'
            array(
                'title'  => 'change_image', // Add this to your lang file
                'desc'   => 'change_image_desc', // Add this to your lang 
                'fields' => array(
                    'location_image' => array(
                        'type'    => 'html',
                        'content' => '<input type="hidden" name="location_image" id="location_image" value="' . $image_id . '">' // Create a hidden field here with the id and name matching withValueTarget
                    ),
                    'image_picker'   => array(
                        'type'    => 'html',
                        'content' => $link->render() // Render the image picker
                    )
                )
            )
        )
    );
    /* End image stuff */

    return ee('View')->make('module_name:form')->render($vars);
}

addons/module_name/View/form.php

<div class="box">
    <?php $this->embed('ee:_shared/form') ?>
</div>

addons/module_name/language/english/lang.module_name.php

$lang = array(
    'add_location'      => 'Add Location',
    'btn_add_location'  => 'Add Location',
    'change_image'      => 'Change Image',
    'change_image_desc' => 'Upload or change the attached image'
);