Drupal 8 how to save and render an image using a custom block configuration - drupal-8

Question

I'm trying to create a custom module with configuration for a block that will allow a block to have custom fields. I'm having problems allowing the upload of an image and then rendering this in the block on the site.
Currently this is what my block file looks like;
use Drupal\Core\Block\BlockBase;
use Drupal\Core\Form\FormStateInterface;
/**
* Provides a 'hello' block.
*
* #Block(
* id = "hello_block",
* admin_label = #Translation("Hello"),
* category = #Translation("Hello world block")
* )
*/
class HelloBlock extends BlockBase
{
/**
* {#inheritdoc}
*/
public function blockForm($form, FormStateInterface $formState)
{
$form['heading'] = array(
'#type' => 'textfield',
'#title' => t('Heading'),
'#description' => t('Enter the main heading'),
'#default_value' => 'Main heading'
);
$form['sub_heading'] = array(
'#type' => 'textfield',
'#title' => t('Sub heading'),
'#description' => t('Enter the sub heading'),
'#default_value' => 'Sub heading'
);
$form['body'] = array(
'#type' => 'text_format',
'#title' => t('Body'),
'#description' => t('Main body'),
'#format' => 'full_html',
'#rows' => 50,
'#default_value' => ''
);
$form['image'] = array(
'#type' => 'managed_file',
'#upload_location' => 'public://upload/hello',
'#title' => t('Image'),
'#upload_validators' => [
'file_validate_extensions' => ['jpg', 'jpeg', 'png', 'gif']
],
'#default_value' => isset($this->configuration['image']) ? $this->configuration['image'] : '',
'#description' => t('The image to display'),
'#required' => true
);
return $form;
}
/**
* {#inheritdoc}
*/
public function blockSubmit($form, FormStateInterface $formState)
{
$this->configuration['heading'] = $formState->getValue('heading');
$this->configuration['sub_heading'] = $formState->getValue('sub_heading');
$this->configuration['body'] = $formState->getValue('body');
$this->configuration['image'] = $formState->getValue('image');
}
/**
* {#inheritdoc}
*/
public function build()
{
$markup = '<h1>'.$this->configuration['heading'].'</h1>';
$markup .= '<h2>'.$this->configuration['sub_heading'].'</h2>';
$markup .= '<img src="'.$this->configuration['image']['value'].'">';
$markup .= '<div>' . $this->configuration['body'] . '</div>';
return array(
'#type' => 'markup',
'#markup' => $markup,
);
}
}
Can anyone provide some pointers as to why the image isn't appearing? I'm assuming I'm missing something.
The text saved in the body (text_format) also appears in the block on the website as 'array', if anyone can help with that too it would be good, other wise I'll raise another question.

Answer 1

When you save that form, the value from the image field is the File ID.
Therefore, you can get the file object and the path by using:
$image = \Drupal\file\Entity\File::load($fid);
$path = file_create_url($image->getFileUri());
Then you would output the image using that path in your markup variable. There's probably a more semantic way to output the formatted image in a 'Drupal-ish' form, but this will get you started.
Oh, and the body field, use
$form_state->getValue('body')['value'];
in your markup.
BTW, I love using Devel and the ksm() function!