Adicionando Imagens de Upload em um Rich Text Editor no Oracle APEX

Quando trabalhamos com formulários ricos no Oracle APEX, muitas vezes queremos permitir o upload de imagens e inseri-las dinamicamente em um editor de texto enriquecido (Rich Text Editor). Neste artigo, vamos demonstrar como fazer isso usando a tabela temporária APEX_APPLICATION_TEMP_FILES.

📌 Cenário

Criamos uma aplicação APEX onde os usuários podem:

• Fazer upload de uma ou mais imagens usando um item do tipo File Upload.

• Exibir as imagens enviadas em um relatório clássico.

• Inserir dinamicamente uma imagem no Rich Text Editor com um clique.

---

🚀 Configuração Passo a Passo

1️⃣ Criando o Item de Upload

Na sua página do APEX:

• Adicione um item do tipo File Upload.

• Configure o Display As para Inline Dropzone (para permitir arrastar e soltar imagens).

• Defina Storage como APEX_APPLICATION_TEMP_FILES.

• Habilite a opção Allow Multiple Files.

2️⃣ Criando o Botão de Gravação

• Crie um botão Salvar, que faz um Submit na página.

• Isso grava os arquivos na tabela temporária APEX_APPLICATION_TEMP_FILES, onde o APEX armazena arquivos temporários enviados.

3️⃣ Criando o Relatório Clássico

Adicione um Relatório Clássico com a seguinte query:

SELECT ID,
       APPLICATION_ID,
       NAME,
       FILENAME,
       MIME_TYPE,
       CREATED_ON,
       DBMS_LOB.GETLENGTH(BLOB_CONTENT) BLOB_CONTENT
  FROM APEX_APPLICATION_TEMP_FILES;

• Altere o tipo da coluna BLOB_CONTENT para Download BLOB.

• No Texto do Link, coloque "Inserir no texto".

4️⃣ Criando um Item de Editor de Texto

Adicione um Item do tipo Rich Text Editor chamado P23_RTE.

5️⃣ Adicionando o JavaScript para Inserção de Imagem

No atributo "Execute when Page Loads" da página, insira o seguinte código:

$(document).on('click', 'td[headers="BLOB_CONTENT"] a', function(event) {
    event.preventDefault(); // Impede o redirecionamento do link

    var imageUrl = $(this).attr('href'); // Obtém a URL da imagem

    if (imageUrl) {
        updateRichText(imageUrl);
    }
});

function updateRichText(imageUrl) {
    var richTextItem = $v('P23_RTE'); // Obtém o conteúdo atual do Rich Text
    var newContent = richTextItem + '\n' + '<img src="' + imageUrl + '" style="max-width:100%; height:auto;" />';
    $s('P23_RTE', newContent);
}

🔎 Explicação do Código JavaScript

• td[headers="BLOB_CONTENT"]: Está sendo utilizado "BLOB_CONTENT" porque é o cabeçalho da coluna do relatório clássico que contém o link. Se o nome da coluna for alterado, esse seletor no JavaScript também precisará ser atualizado.

• $v('P23_RTE'): Está sendo utilizado "P23_RTE" porque é o nome do item Rich Text Editor criado. Caso o nome do item seja diferente, essa referência no código JavaScript deve ser alterada.

🔥 Como Funciona?

1. O usuário faz upload das imagens.

2. As imagens são armazenadas temporariamente na APEX_APPLICATION_TEMP_FILES.

3. O relatório exibe as imagens carregadas com um link "Inserir no texto".

4. O clique no link chama o JavaScript, que adiciona a imagem ao Rich Text Editor.

📷 Exemplo com Prints

Ao clicar no link “Inserir no texto”, a imagem selecionada é inserida no item P23_RTE (Rich Text). É possível adicionar mais de uma imagem no item.

✅ Conclusão

Essa abordagem permite que os usuários insiram facilmente imagens no Rich Text Editor sem a necessidade de armazená-las permanentemente no banco de dados. Para um uso mais robusto, você pode mover as imagens para uma tabela definitiva e gerar URLs permanentes.

Gostou do artigo? Deixe seu comentário e compartilhe! 🚀