El manejo de imágenes en aplicaciones web es fundamental en una amplia variedad de sectores y aunque usemos Oracle como base datos, muchas veces preferimos almacenar archivos de imagenes en directorios para evitar el crecimiento exponencial en volumen de datos que mas temprano que tarde afectara el rendimiento de nuestra bd.

En este caso he utilizado el servicio de Cloudinary que es una empresa de tecnología que ofrece un servicio de gestión de imágenes y videos basado en la nube, que me permite "subir" imagenes a su nube y devolverme una url la cual yo puedo usar para mostrar dicha imagene en mi aplicacion.

Paso a Paso: Subir Imágenes a Cloudinary desde Oracle APEX

1. Configurar una cuenta en Cloudinary

Primero, debes crear una cuenta en Cloudinary, has clic aqui para ir a la web, que entre sus planes hay uno FREE que es el que yo utilizo. Una vez registrado, tendrás acceso a las credenciales de la API: tu "cloud name", "API key" y "API secret". No necesitarás utilizar el API secret si usas el método de upload_preset, que facilita la carga de archivos de manera segura sin exponer información sensible.

Al crear una cuenta se le dara un cloud name que podes encontrar aqui lo utilizaremos mas adelante.

2. Crear un Upload Preset en Cloudinary

El upload_preset es una configuración de subida predefinida que permite realizar cargas de archivos de forma segura sin requerir el uso de tu API secreta. Para crear uno:

• Ve a la consola de Cloudinary.

• Dirígete a Settings > Upload y selecciona Add upload preset.

• Configura los parámetros según tus necesidades. Por ejemplo, puedes definir una carpeta específica donde se subirán las imágenes y las reglas de acceso, en mi caso defini Signing Mode: Unsigned para hacer el upload sin firmar.

• y le das SAVE.

Es importante que no se olviden del nombre de su upload_preset que aparece ahi por que lo usaremos mas adelante.

3. Crear una Interfaz de Subida en Oracle APEX.

   La interfaz debera tener un elemento tipo "Carga de Archivo" y otro que sea un campo de texto para mostrar la url de la imagen.

Tambien debera tener un boton que hara que tendra una accion dinamica con nuestro codigo en javascript para enviar la imagen.

La accion dinamica tendra el siguiente codigo en javascript.

var fileInput = document.querySelector('#P10_IMAGEN');//obtenemos el archivo
var formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('upload_preset', 'aabigm5y');//aqui colocamos en "name" que
                                            //obtivimos al crear el upload_preset
//formData.append('public_id', 'prueba_cloud');//pruedes cambiar 
                                               //el nombre al archivo
                                               //dinamicamente si lo deseas
//formData.append('folder', 'camion');//pueden crear una folder en el cloudinary 
                                      //y asi la usan

//https://api.cloudinary.com/v1_1/(cloud_name)/image/upload
//en vez de dc7zgzj2h debe ir su propio cloud name
fetch('https://api.cloudinary.com/v1_1/dc7zgzj2h/image/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log(data.url);
        apex.item('P10_URL').setValue(data.url);
    })
    .catch(error => {
        console.error('Error al subir archivo:', error);
    });

La interzas quedaria algo asi .

Pero al usar la funcionalidad seria algo como el siguiente video, si quieres probar la demo, podes hacer clic aqui

La URL pueden guardarla en una tabla en su base de datos y asi la haces mas lijera.

Conclusión

Integrar Cloudinary con Oracle APEX es una solución efectiva para manejar imágenes de manera eficiente en aplicaciones empresariales. Proporciona almacenamiento seguro, optimización de imágenes, y mejora la experiencia del usuario. Con una configuración sencilla de upload_preset y un poco de javascript, puedes hacer que tu aplicación sea más ligera y rápida, manteniendo una experiencia óptima para los usuarios finales.