Network Error: Could not connect or retrieve data.
Check console for details.
`;
console.error('Error during file fetch:', error);
}
}
function renderFiles(files) {
files.forEach(file => {
fileTableBody.appendChild(createFileRow(file));
});
}
async function downloadFile(fileName) {
showMessage(`Preparing to download "${fileName}"...`, false);
try {
const bucket = catalyst.stratus.bucket(bucket_name);
const getObject = await bucket.getObject(fileName);
const getObjectResponse = await getObject.start();
const fileBlob = getObjectResponse.content;
if (fileBlob) {
const blobUrl = URL.createObjectURL(fileBlob);
const a = document.createElement('a');
a.href = blobUrl;
a.download = fileName;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(blobUrl);
hideMessage();
} else {
showMessage(`Failed to retrieve file content for "${fileName}".`, true);
setTimeout(hideMessage, 2000);
}
} catch (error) {
console.error('Error during file download:', error);
let errorMessage = `Error downloading "${fileName}". Please try again.`;
if (error && error.message && error.message.includes("404")) {
errorMessage = `File "${fileName}" not found in Stratus.`;
}
showMessage(errorMessage, true);
setTimeout(hideMessage, 3000);
}
}
async function deleteFile(rowId, fileName) {
showMessage(`Are you sure you want to delete "${fileName}"? This will remove it from storage and mark it as deleted.`, false);
messageCloseButton.textContent = 'Cancel';
const confirmDeleteButton = document.createElement('button');
confirmDeleteButton.textContent = 'Delete';
confirmDeleteButton.className = 'ml-4 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600';
const originalCloseHandler = messageCloseButton.onclick;
messageCloseButton.onclick = () => {
hideMessage();
messageCloseButton.textContent = 'Close';
messageCloseButton.onclick = originalCloseHandler;
confirmDeleteButton.remove();
};
messageCloseButton.parentNode.appendChild(confirmDeleteButton);
confirmDeleteButton.onclick = async () => {
hideMessage();
messageCloseButton.textContent = 'Close';
messageCloseButton.onclick = originalCloseHandler;
confirmDeleteButton.remove();
showMessage(`Processing deletion for "${fileName}"...`, false);
console.log(`Attempting to delete file from Stratus (Name: ${fileName}) and update DB (ROWID: ${rowId})`);
let dbUpdateSuccess = false;
let stratusDeleteSuccess = false;
try {
const bucket = catalyst.stratus.bucket(bucket_name);
await bucket.deleteObject(fileName);
stratusDeleteSuccess = true;
} catch (error) {
console.error('Error deleting file from Stratus:', error);
showMessage(`Failed to remove "${fileName}" from storage.`, true);
}
try {
const table = catalyst.table.tableId('FileVault');
const updateDetails = [
{
"ROWID": rowId,
"StratusUpload": "Deleted"
}
];
await table.updateRow(updateDetails);
dbUpdateSuccess = true;
} catch (error) {
console.error('Error updating Data Store row to "Deleted":', error);
if (stratusDeleteSuccess) {
showMessage(`File "${fileName}" removed from storage, but failed to mark as deleted in database.`, true);
} else {
showMessage(`Failed to mark "${fileName}" as deleted in database.`, true);
}
}
if (dbUpdateSuccess && stratusDeleteSuccess) {
showMessage(`"${fileName}" removed from storage!`, false);
fetchFiles();
setTimeout(hideMessage, 1500);
} else {
fetchFiles();
setTimeout(hideMessage, 3000);
}
};
}
fileTableBody.addEventListener('click', (event) => {
const targetButton = event.target.closest('.download-btn, .delete-btn');
if (!targetButton || targetButton.disabled) return;
const row = targetButton.closest('tr');
if (!row) return;
const rowId = row.dataset.rowId;
const fileName = row.dataset.fileName;
if (targetButton.classList.contains('download-btn')) {
downloadFile(fileName);
} else if (targetButton.classList.contains('delete-btn')) {
deleteFile(rowId, fileName);
}
});
await checkSignInStatus();
fetchFiles();
});
```
A continuación, actualice su `client-package.json` con el código siguiente.
**client-package.json**
```json
{
"name": "WorkDriveSyncApp",
"version": "0.0.1",
"homepage" : "/__catalyst/auth/login",
"login_redirect" : "index.html"
}
```
El directorio del client está ahora configurado.
Repasemos rápidamente el funcionamiento de las funciones y el client de la aplicación:
* `index.html` contiene el código para el front-end del client. El CSS está definido en `main.css`.
* `main.js`: La función JavaScript en el componente del client que maneja las diversas acciones realizadas en el client a través de estas funciones:
* **`checkSignInStatus()`:** Verifica si el usuario está autenticado o no; si está autenticado, permite al usuario acceder a la aplicación; de lo contrario, muestra un error y redirige al usuario a la página de inicio de sesión.
* **`fetchFiles()`:** Obtiene todos los registros de archivos de la tabla de Data Store de Catalyst.
* **`uploadFile (triggered via file input)`:** Maneja la carga de archivos a Catalyst Stratus y actualiza los metadatos en Data Store.
* **`downloadFile(fileName)`:** Descarga un archivo del Stratus Bucket.
* **`deleteFile(rowId, fileName)`:** Elimina un archivo tanto de Stratus como de Data Store.
* **`logout()`**: Cierra la sesión del usuario en la aplicación
* La **Event function** se activa cada vez que el event listener se ejecuta. Esta función realiza las siguientes acciones:
* Descarga el archivo que fue enviado como datos del evento por el event listener usando un flujo de archivo
* Carga el archivo y sus metadatos a WorkDrive a través de una API con el método POST. Las credenciales OAuth se pasan para autorizar esta acción.
* Si la acción es exitosa, el estado de sincronización de WorkDrive se establece en "Completed". El registro en Data Store se actualiza con el ID de archivo de WorkDrive y el estado de sincronización.