Este ejercicio hecho con Javascript recupera imagen de una sub-carpeta que tiene una carpeta padre en google drive y las despliega.
Pomite manejar de una forma sencilla por ejemplo un catalogo de productos o un albun por ejemplo.
En este caso utilizo imágenes pero en general podría ser cualquier contenido que google drive acepte.
Observar que la la carpeta se identifica con el valor del iD qe le asigna google drive a la carpeta Padre, en tanto que a sub-carpeta de interés bajo la carpeta padre se identifica con el nombre real de la carpeta, tener presente que el nombre de la sub-carpeta es case sensitive y por lo tanto debe corresponder al nombre que tenga en google drive
Para mostrar la imagen utilizo
img.src = "https://lh3.googleusercontent.com/d/"+ imagenId + "=s220?authuser=0"
para mostrar las imágenes, porque google content tiene un enlace dinámico a google drive que permite hacer publico el contenido y no requiere muchas condiciones de autenticaciones salvo el ApiKey que se consigue en google console bajo el proyecto que este desarrollando
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Drive Images</title>
</head>
<body>
<h3>Imagenes de Google Drive (Chryso Joyeria https://www.chrysojoyeria.com/)</h3>
<label for="subfolder-input">Ingrese el nombre de la subcarpeta:</label>
<input type="text" placeholder="ingrese el nombre de la sub carpeta" id="subCarpeta">
<button onclick="getImages()">Mostrar imagenes</button>
<div id="images"></div>
<script>
// Función para obtener el ID de la subcarpeta
async function getSubFolderId()
{
try {
const response = await fetch(API_URL);
const data = await response.json();
return data.files[0].id;
}
catch (error)
{
console.error('Error al obtener el ID de la sub-carpeta:', error);
throw error;
}
}
// Función para obtener las imágenes de la sub-carpeta
async function getImages()
{
//Dar permisos de publico a la carpeta padre para poder mostrar todas las imágenes contenidas en la carpeta padre.
//Tener mucho cuidado con las comillas en API_URL y la separación de variables. pues en ocasiones al cortar el código y pegarlo pueden ser cambiadas. la buena conformación es critica.
FOLDER_ID = '1jnqMtehxW6RhtICAMYdmd2HTREShEGcX3P3'; // Reemplaza esto con el ID de tu carpeta padre en Google Drive
SUBFOLDER = document.getElementById('subCarpeta').value;
API_KEY = 'AIzaSyAChC8i33d15uPeBkjQDGRFESweh03vAY'; //Usa api key de tu sistema
API_URL = `https://www.googleapis.com/drive/v3/files?q='${FOLDER_ID}'+in+parents+and+mimeType='application/vnd.google-apps.folder'+and+name='${SUBFOLDER}'&key=${API_KEY}`;
try {
const subFolderId = await getSubFolderId();
const response = await fetch(`https://www.googleapis.com/drive/v3/files?q='${subFolderId}'+in+parents&key=${API_KEY}`);
const data = await response.json();
const imagesDiv = document.getElementById('images');
data.files.forEach(file => {
// Crea un elemento de imagen y lo añade al div
const img = document.createElement('img');
imagenId = file.id
img.src = "https://lh3.googleusercontent.com/d/"+ imagenId + "=s220?authuser=0"
img.alt = file.name;
imagesDiv.appendChild(img);
});
}
catch (error)
{
console.error('Error al obtener las imágenes de la subcarpeta:', error);
}
}
</script>
</body>
</html>
Comentarios
Publicar un comentario