MAD Lab
/
Tutor > Campos de formulário > Mídia

Mídia

Campos de formulário

mad-avatar-field mad-image-field mad-signature-field mad-html-editor-field
Avatar

mad-avatar-field: foto de perfil compacta, em círculo.

Foto de perfil
PNG ou JPEG · máx. 2MB
resources/views/tutor/examples/forms-midia/avatar.blade.php 
<mad-avatar-field name="foto_perfil" label="Foto de perfil"
    storage="disk" folder="uploads/tutor-midia" name-column="foto_perfil_nome"
    size="96px" accept="image/png,image/jpeg" maxSize="2MB"
    hint="Círculo compacto para foto de perfil. Atenção: aqui o prop de tamanho máximo é maxSize (camelCase) — file/image/multi-file usam grafias diferentes (ver página Uploads)." />
Imagem

mad-image-field com crop/rotate/zoom (Cropper.js) e proporção fixa.

Arraste uma imagem
ou clique para selecionar
IMAGE/PNG, IMAGE/JPEG • Máx 5MB
Preview

Cropper.js embutido (crop/rotate/zoom). Atenção: aspect_ratio e max_size usam UNDERSCORE — a forma kebab (aspect-ratio) não é lida pelo componente.

resources/views/tutor/examples/forms-midia/imagem.blade.php 
<mad-image-field name="foto_capa" label="Foto de capa"
    storage="disk" folder="uploads/tutor-midia" name-column="foto_capa_nome"
    crop aspect_ratio="16:9" width="320px" height="180px"
    accept="image/png,image/jpeg" max_size="5MB"
    hint="Cropper.js embutido (crop/rotate/zoom). Atenção: aspect_ratio e max_size usam UNDERSCORE — a forma kebab (aspect-ratio) não é lida pelo componente." />
Assinatura

mad-signature-field: desenhar com o mouse/dedo ou digitar em cursiva.

Assinatura
Dancing Script
Great Vibes
Courier Prime
Clique para assinar

modes=draw,type habilita desenhar (mouse/dedo) ou digitar em cursiva — omita 'upload' pra não aceitar imagem pronta.

resources/views/tutor/examples/forms-midia/assinatura.blade.php 
<mad-signature-field name="assinatura_demo" label="Assinatura"
    modes="draw,type" pen-color="#1d4ed8"
    storage="disk" folder="uploads/tutor-midia" name-column="assinatura_demo_nome"
    hint="modes=draw,type habilita desenhar (mouse/dedo) ou digitar em cursiva — omita 'upload' pra não aceitar imagem pronta." />
Editor HTML

mad-html-editor-field: rich text (negrito, listas, links) salvo como HTML.

Editor rico (negrito, listas, links) — o valor salvo é HTML puro.

resources/views/tutor/examples/forms-midia/editor-html.blade.php 
<mad-html-editor-field name="conteudo_demo" label="Conteúdo" :height="220"
    placeholder="Escreva algo..."
    hint="Editor rico (negrito, listas, links) — o valor salvo é HTML puro." />
Ação wire

mad-form com submit real — dispara TutorFormsMidia::onSubmitDemo.

resources/views/tutor/examples/forms-midia/wire-submit.blade.php 
<mad-form submit="onSubmitDemo">
    <mad-html-editor-field name="bio_wire" label="Bio" :height="160"
        placeholder="Fale um pouco sobre você..." />
    <mad-form-actions align="right">
        <mad-btn type="submit" variant="primary" icon="send">Enviar (onSubmitDemo)</mad-btn>
    </mad-form-actions>
</mad-form>
app/control/Tutor/TutorFormsMidia.php 
/**
 * Submit do exemplo "Ação wire" — mad-html-editor-field é o único campo
 * desta página com valor de texto simples em getData() (avatar/imagem/
 * assinatura são campos de arquivo — não passam por getData(); ver
 * página Uploads para o padrão de leitura de arquivo cru).
 */
public function onSubmitDemo(): MadResponse
{
    $data   = $this->form->getData();
    $texto  = trim(strip_tags((string) ($data->bio_wire ?? '')));
    $chars  = mb_strlen($texto);
    $preview = $chars > 0 ? mb_substr($texto, 0, 80) : '(vazio)';

    return (new MadResponse())
        ->toast("Conteúdo recebido ({$chars} caracteres): {$preview}", 'success', 'onSubmitDemo');
}
← AnteriorSeleção Próxima →Uploads
Código-fonte completo da página
app/control/Tutor/TutorFormsMidia.php 
<?php

namespace App\Control\Tutor;

use App\Support\Tutor\TutorPage;
use Mad\Form\MadForm;
use Mad\Http\MadResponse;

/**
 * TutorFormsMidia — página "Mídia" do catálogo (grupo forms).
 *
 * Cobre os 4 campos de mídia do catálogo: mad-avatar-field, mad-image-field,
 * mad-signature-field e mad-html-editor-field.
 */
class TutorFormsMidia extends TutorPage
{
    protected string $catalogKey = 'forms_midia';

    public MadForm $form;

    public function mount(array $params = []): void
    {
        $this->form = new MadForm('tutor_forms_midia');
    }

    /**
     * Submit do exemplo "Ação wire" — mad-html-editor-field é o único campo
     * desta página com valor de texto simples em getData() (avatar/imagem/
     * assinatura são campos de arquivo — não passam por getData(); ver
     * página Uploads para o padrão de leitura de arquivo cru).
     */
    public function onSubmitDemo(): MadResponse
    {
        $data   = $this->form->getData();
        $texto  = trim(strip_tags((string) ($data->bio_wire ?? '')));
        $chars  = mb_strlen($texto);
        $preview = $chars > 0 ? mb_substr($texto, 0, 80) : '(vazio)';

        return (new MadResponse())
            ->toast("Conteúdo recebido ({$chars} caracteres): {$preview}", 'success', 'onSubmitDemo');
    }
}
resources/views/tutor/forms/midia.blade.php 
<x-tutor-page page="forms_midia">
    <x-tutor-demo demo="tutor.examples.forms-midia.avatar"
        title="Avatar" desc="mad-avatar-field: foto de perfil compacta, em círculo." />

    <x-tutor-demo demo="tutor.examples.forms-midia.imagem"
        title="Imagem" desc="mad-image-field com crop/rotate/zoom (Cropper.js) e proporção fixa." />

    <x-tutor-demo demo="tutor.examples.forms-midia.assinatura"
        title="Assinatura" desc="mad-signature-field: desenhar com o mouse/dedo ou digitar em cursiva." />

    <x-tutor-demo demo="tutor.examples.forms-midia.editor-html"
        title="Editor HTML" desc="mad-html-editor-field: rich text (negrito, listas, links) salvo como HTML." />

    <x-tutor-demo demo="tutor.examples.forms-midia.wire-submit"
        title="Ação wire" desc="mad-form com submit real — dispara TutorFormsMidia::onSubmitDemo."
        php="TutorFormsMidia::onSubmitDemo" />
</x-tutor-page>