Plugin WordPress que adiciona um campo customizado de upload de imagens ao Fluent Forms (versão gratuita). Permite que os usuários enviem até 3 imagens por formulário, com validação de tamanho e tipo, e grava as URLs na entrada do formulário.

---

Requisitos

• WordPress 5.0 ou superior
• Fluent Forms (versão gratuita) instalado e ativo
• PHP 7.4+

---

Instalação

1. Faça o download do plugin (ZIP ou clone do repositório).
2. Envie a pasta fluentforms-image-upload-field para /wp-content/plugins/ ou instale via Plugins → Adicionar novo → Enviar plugin.
3. Ative o plugin em Plugins no painel do WordPress.
4. Em Fluent Forms → Editor do seu formulário, o campo "Image Upload" aparecerá em Campos avançados. Arraste-o para o formulário.

---

Funcionalidades

• Upload de até 3 imagens por envio.
• Limite de 2 MB por arquivo.
• Tipos permitidos: JPG, PNG, WEBP, GIF.
• Esses limites são definidos em código e podem ser ajustados facilmente por desenvolvedores.
• Arquivos salvos em /wp-content/uploads (padrão WordPress).
• URLs gravadas na coluna response da entrada (Fluent Forms → Entradas).
• Na tela de detalhes da entrada, as URLs são exibidas como links clicáveis (abrem em nova aba).

---

Uso

1. Edite um formulário no Fluent Forms.
2. Em Campos avançados, arraste "Image Upload" (ou "Upload de imagens") para o layout.
3. Ajuste o rótulo e as opções do campo no painel lateral, se desejar.
4. No front-end, o visitante verá um campo de arquivo com a dica: Máximo 3 imagens - 2MB cada. Ao selecionar arquivos, o upload é feito via AJAX antes do envio do formulário; as URLs são anexadas à submissão automaticamente.

Nota: No editor visual do Fluent Forms, o campo pode aparecer como um espaço em branco (o builder é renderizado em Vue e não possui componente nativo para este campo customizado). O campo funciona normalmente no front-end e nas entradas.

Personalização via código

Para alterar limites padrão:

• Quantidade máxima de imagens / tamanho máximo / tipos permitidos
  • Veja ff_image_upload_field_handle_ajax_upload() em fluentforms-image-upload-field.php (variáveis $max_files, $max_size e $allowed_mime).
  • Veja handleImageUploadChange() em assets/js/frontend.js (maxFiles, maxSize e allowedMime).
  • Mantenha os valores de PHP e JS em sincronia.

---

Estrutura do plugin

fluentforms-image-upload-field/
├── fluentforms-image-upload-field.php   # Bootstrap e AJAX
├── src/
│   └── ImageUploadField.php             # Definição e renderização do campo
├── assets/
│   └── js/
│       ├── frontend.js                  # Upload AJAX no formulário
│       └── admin-entries-links.js       # Links clicáveis nas entradas
├── README.md
├── LICENSE
└── .phpcs.xml.dist                      # Padrões de código (WordPress)

---

Segurança e compatibilidade

• Upload via AJAX com uso de nonce quando disponível no contexto do Fluent Forms.
• Validação de tipo MIME e tamanho no servidor.
• Uso de wp_handle_upload() para armazenar arquivos de forma segura.
• Compatível com o fluxo de submissão do Fluent Forms Free (campo integrado ao FormData/response).

---

Licença

Este projeto está sob a licença GPL-2.0-or-later. Veja o arquivo LICENSE.

---

Padrões de código

O plugin segue as WordPress Coding Standards. Se você usa PHP_CodeSniffer com o ruleset WordPress, pode apontar para o arquivo .phpcs.xml.dist incluído no projeto.

Contribuição

Sugestões e melhorias são bem-vindas. Abra uma issue ou pull request no repositório.

---

Fluent Forms Image Upload Field (English)

WordPress plugin that adds a custom image upload field to Fluent Forms (free version). Lets users submit up to 3 images per form with size and type validation, and stores the file URLs in the form entry.

Requirements

• WordPress 5.0+
• Fluent Forms (free) installed and active
• PHP 7.4+

Installation

1. Download the plugin (ZIP or clone this repo).
2. Upload the fluentforms-image-upload-field folder to /wp-content/plugins/ or install via Plugins → Add New → Upload Plugin.
3. Activate the plugin under Plugins in the WordPress admin.
4. In Fluent Forms → Editor, the "Image Upload" field will appear under Advanced fields. Drag it into your form.

Features

• Up to 3 images per submission.
• 2 MB max per file.
• Allowed types: JPG, PNG, WEBP, GIF.
• These limits are defined in code and can be adjusted easily by developers.
• Files saved under /wp-content/uploads.
• URLs stored in the entry response (Fluent Forms → Entries).
• In entry details, URLs are shown as clickable links (open in new tab).

Usage

1. Edit a form in Fluent Forms.
2. Under Advanced fields, drag "Image Upload" into the layout.
3. Adjust the label and options in the sidebar if needed.
4. On the front-end, users see a file input with the hint “Max 3 images - 2MB each”. Selecting files triggers an AJAX upload before form submit; URLs are attached to the submission automatically.

Note: In the Fluent Forms visual editor, the field may appear as a blank space (the builder is Vue-based and has no native component for this custom field). The field works as expected on the front-end and in entries.

Customization (for developers)

To change default limits:

• Max images / max size / allowed types
  • See ff_image_upload_field_handle_ajax_upload() in fluentforms-image-upload-field.php ($max_files, $max_size, $allowed_mime).
  • See handleImageUploadChange() in assets/js/frontend.js (maxFiles, maxSize, allowedMime).
  • Keep PHP and JS values in sync.

License

GPL-2.0-or-later. See LICENSE.