📄 Exibindo PDFs e Imagens em um Modal no Oracle APEX

🚀 Introdução

Neste artigo, vou demonstrar como criar uma funcionalidade no Oracle APEX que permite o upload de arquivos PDF e imagens, armazenando-os temporariamente e exibindo-os em um modal sem a necessidade de download. O objetivo é proporcionar uma experiência mais fluida para o usuário ao visualizar os arquivos diretamente na interface da aplicação.

📌 O exemplo utiliza a tabela temporária APEX_APPLICATION_TEMP_FILES, mas a mesma abordagem pode ser aplicada a uma tabela já existente na aplicação.

🏗️ Estrutura da Solução

A solução é composta por duas páginas:

1. 📤 Página de Upload: Permite ao usuário fazer upload de arquivos PDF e imagens, armazenando-os na tabela APEX_APPLICATION_TEMP_FILES.

2. 👁️ Página Modal de Exibição: Exibe o arquivo selecionado em um iframe.

📤 Página de Upload

✅ Criar um item de upload de arquivos configurado para aceitar PDFs e imagens.

✅ Criar um botão “Salvar” para dar submit na página e salver os arquivos na tabela.

✅ Criar um Relatório Clássico que exibe os arquivos enviados na sessão atual.

select ID,
       FILENAME,
       MIME_TYPE
  from APEX_APPLICATION_TEMP_FILES

✅ Criar uma coluna virtual com um link para abrir a página modal e exibir o arquivo. O link deve passar o ID do arquivo para um item P32_FILE_ID na página modal.

✅ Na propriedade Link Text da coluna virtual, inserir o seguinte código para exibir um ícone de visualização ao invés de um texto:

<i class="fa fa-search-plus fa-lg text-danger"></i>

📸 Página de Upload:

👁️ Página Modal de Exibição

1️⃣ Criar um item hidden P32_FILE_ID para receber o ID do arquivo enviado pelo link. O item é “P32_FILE_ID” porque está na página 32. Quando você criar sua página, substituir pelo nome do seu campo.

2️⃣ Criar uma região Static Content com o seguinte código:

<iframe id="pdfViewer" src="" width="100%" height="100%" style="min-height: 700px; border: none;"></iframe>

3️⃣ Criar um processo Before Header para buscar e exibir o arquivo:

DECLARE
    l_blob  BLOB;
    l_mime  VARCHAR2(100);
BEGIN
    SELECT blob_content, mime_type
    INTO l_blob, l_mime
    FROM apex_application_temp_files
    WHERE id = :P32_FILE_ID;

    owa_util.mime_header(l_mime, FALSE);
    htp.p('Content-Disposition: inline; filename="documento.pdf"'); 
    htp.p('Content-Length: ' || dbms_lob.getlength(l_blob));
    owa_util.http_header_close;

    wpg_docload.download_file(l_blob);
    APEX_APPLICATION.STOP_APEX_ENGINE;
EXCEPTION
    WHEN no_data_found THEN
        htp.p('Erro: Arquivo não encontrado.');
END;

4️⃣ Criar uma Dynamic Action no evento Page Load com ação Executar JavaScript Code, utilizando o seguinte código para carregar o arquivo no iframe:

var fileId = $v("P32_FILE_ID"); // Obtém o ID do PDF
var pdfUrl = "f?p=&APP_ID.:100:&SESSION.::NO::P32_FILE_ID:" + fileId;
document.getElementById("pdfViewer").setAttribute("src", pdfUrl);

📸 Dynamic Action

📸 Modal com o PDF

Se quiser aumentar ou diminuir o tamanho da janela Modal, pode alterar as propriedades da página:

🎯 Conclusão

Com essa implementação, conseguimos exibir arquivos PDF e imagens em um modal sem necessidade de download, proporcionando uma experiência mais integrada e eficiente para os usuários da aplicação Oracle APEX. Essa abordagem pode ser útil para diversas aplicações que necessitam de visualização de documentos diretamente na interface sem depender de downloads ou plugins externos.

💡 Dica: Se quiser armazenar os arquivos em uma tabela própria, basta adaptar a consulta no processo Before Header.