Bestandssysteem in javascript
Crowl.filesystem.js
Crowl.filesystem.js simuleert een bestandssysteem in een webbrowser met behulp van IndexedDB. Dit is een krachtige interface in webbrowsers waarmee data structureel en permanent opgeslagen kan worden. De javascript-class vergemakkelijkt het beheer van bestanden zoals het aanmaken, lezen, verwijderen en opslaan van zowel tekstuele als binaire bestanden. Deze benadering maakt het mogelijk om een complexe file management applicatie direct binnen een browseromgeving te draaien.
Terwijl cookies zijn gelimiteerd in opslagcapaciteit (4kb) is CrowlFileSystem niet gelimiteerd. Het kan gigabytes aan data bewaren binnen een webpagina in de browser. Via CrowlServer kan het die bestanden ook eenvoudig uitwisselen met een online databank.
Waarom IndexedDB voor de simulatie van bestandssysteem?
IndexedDB is een uitstekende keuze voor het simuleren van een bestandssysteem in een browser om meerdere redenen:
- Opslagcapaciteit: Het biedt aanzienlijke opslagruimte vergeleken met andere client-side opslagopties zoals LocalStorage, wat essentieel is voor bestandsbeheer.
- Asynchrone Interface: Het biedt een asynchrone API, die voorkomt dat UI-blocking optreedt bij het lezen of schrijven van grote bestanden.
- Structuur: Het ondersteunt het opslaan van gegevens in object stores en het indexeren van deze gegevens, wat helpt bij het efficiënt opvragen en organiseren van bestandsgegevens.
- Flexibiliteit: Het ondersteunt het werken met verschillende datatypes, inclusief blobs en typed arrays, wat ideaal is voor het hanteren van zowel tekstuele als binaire bestanden.
Mogelijkheden en functies van de class
- Bestanden aanmaken: Het script biedt functies om zowel tekstuele als binaire bestanden aan te maken.
- Bestanden lezen: Functies om zowel tekstuele als binaire bestanden te lezen en de inhoud weer te geven.
- Bestanden verwijderen: Mogelijkheid om bestanden te verwijderen uit de database.
- Bestanden opsommen: Een functie om alle opgeslagen bestanden op te halen en te sorteren op verschillende criteria zoals naam, datum, grootte, en MIME-type.
- Mappen aanmaken: Je kan mappen aanmaken en daar bestanden aan toevoegen, net zoals in Windows verkenner of Mac OS Finder.
- Hernoemen: je kan bestanden en mappen hernoemen.
- Verwijderen: je kan bestanden en mappen verwijderen.
- Kopiëren en plakken: je kan bestanden kopiëren en plakken in een andere map.
- Ruimtebeheer: Het script bevat functionaliteit om de beschikbare en gebruikte opslagruimte te schatten.
- Bestandsdownload: Het faciliteert het downloaden van bestanden door het creëren van een URL naar de blob-data.
- Bestandsencodering en -decodering: Voor binaire bestanden biedt het script mogelijkheden om deze te encoderen naar een Uint8Array en te decoderen vanuit deze array.
- Exporteren: je kan alle bestanden en mappen exporteren als CSV en SQL
- ZIP en download: Je kan individuele bestanden downloaden en mappen met inhoud downloaden als ZIP.
- ...
Voorbeeldgebruik
- Constructor: Initialiseert een IndexedDB database genaamd "Crowl SimOS 13" en maakt twee object stores aan: "folders" en "files".
- exportToCsv: Exporteert alle records van een gegeven object store naar een CSV-bestand.
- exportToSql: Exporteert alle records van een gegeven object store naar SQL-insert statements.
- loadFileSaver: Laadt de FileSaver.js-bibliotheek dynamisch in de pagina.
- loadJsZip: Laadt de JSZip-bibliotheek dynamisch in de pagina (na het laden van FileSaver.js).
- getFolderIdByName: Haalt de ID op van een folder op basis van de naam.
- listFilesInFolder: Lijst alle bestanden in een opgegeven folder, gesorteerd op een attribuut.
- createBinaryFile: Maakt een binair bestand aan in een opgegeven folder.
- encodeBinaryFile: Converteert een bestand naar een Uint8Array.
- decodeTextFile: Decodeert tekstgegevens naar een downloadbaar bestand.
- decodeBinaryFile: Decodeert binaire gegevens naar een downloadbaar bestand.
- readBinaryFile: Leest een binair bestand uit de database.
- readAndDecodeBinaryFile: Leest en decodeert een binair bestand uit de database.
- listAllFiles: Lijst alle bestanden in de database, gesorteerd op een attribuut.
- listAllFolders: Lijst alle folders in de database, gesorteerd op een attribuut en optioneel gefilterd op een ouder folder ID.
- getAllFilesWithMime: Haalt alle bestanden met hun MIME-types op.
- formatFileSystem: Verwijdert en herinitialiseert de database.
- createFolder: Maakt een nieuwe folder aan.
- createFile: Maakt een nieuw bestand aan in een opgegeven folder.
- moveFolder: Verplaatst een folder naar een nieuwe ouder folder.
- moveFile: Verplaatst een bestand naar een nieuwe folder.
- renameFolder: Hernoemt een folder.
- renameFile: Hernoemt een bestand.
- copyAndPasteFile: Kopieert een bestand naar een nieuwe folder.
- deleteFolder: Verwijdert een folder.
- deleteFile: Verwijdert een bestand.
- listSubfolders: Lijst alle subfolders van een gegeven ouder folder.
- openFolder: Haalt alle bestanden en subfolders van een gegeven folder op.
- downloadFile: Downloadt een bestand door het te decoderen.
- downloadFolderAsZip: Downloadt alle bestanden in een folder als een zip-bestand.
- openFile: Opent een bestand en toont de inhoud.
- openSpecificFile: Opent een specifiek bestand en toont de inhoud.
- executeSQL: Voert een SQL-opdracht uit op de database.
- handleInsert: Verwerkt een SQL-insert statement.
- handleUpdate: Verwerkt een SQL-update statement.
- handleSelect: Verwerkt een SQL-select statement.
- handleDelete: Verwerkt een SQL-delete statement.
- searchFiles: Zoekt naar bestanden op basis van een zoekterm.
- exportDatabase: exporteert de volledige structuur en inhoud van de databank naar een JSON-bestand
- importDatabase: importeert een eerder geëxporteerd JSON-bestand.
Initialisatie
const fs = new CrowlFileSystem();
Voorbeeldcode functies
/*
copyAndPasteFile(fileId, newFolderId)
bestand kopiëren en plakken in een andere map
*/
cpf.addEventListener("click", async function(data) {
try {
var d = await fs.copyAndPasteFile(18, 1);
console.log(d);
} catch (error) {
console.error("Er is een fout opgetreden:", error);
}
});
/*
Een bestand verhuizen naar een andere map
moveFile(fileId, newFolderId)
*/
mofi.addEventListener("click", async function(data) {
try {
var d = await fs.moveFile(18, 2);
console.log(d);
} catch (error) {
console.error("Er is een fout opgetreden:", error);
}
});
/*
Een bestand zoeken op basis van een zoekterm.
Zoekt op naam en inhoud.
*/
buttonq.addEventListener("click", async function(data) {
try {
var q = document.getElementById("fquery").value;
var d = await fs.searchFiles(q);
console.log(d);
} catch (error) {
console.error("Er is een fout opgetreden:", error);
}
});
/*
Een map verhuizen naar een andere map (als submap)
moveFolder(idmap,idbestemmingsmap)
*/
moveme.addEventListener("click", async function(data) {
try {
var d = await fs.moveFolder(2, 1);
console.log(d);
} catch (error) {
console.error("Er is een fout opgetreden:", error);
}
});
/*
Bestand downloaden op id
*/
down.addEventListener("click", async function(data) {
try {
await fs.downloadFile(17);
} catch (error) {
console.error("Er is een fout opgetreden:", error);
}
});
/*
Een map verwijderen op id
*/
dfo.addEventListener("click", async function(data) {
try {
var d = await fs.deleteFolder(3);
console.log(d);
} catch (error) {
console.error("Er is een fout opgetreden:", error);
}
});
/*
Een map hernoemen
renameFolder(folderID, nieuweNaam);
*/
rf.addEventListener("click", async function(data) {
try {
var d = await fs.renameFolder(2, "Een map met prentjes");
console.log(d);
} catch (error) {
console.error("Er is een fout opgetreden:", error);
}
});
/*
Een lijst van alle bestanden in de databank
listAllFiles(order);
Je kan ordenen op name,id of aanmaakdatum
*/
explorer.addEventListener("click", async function(data) {
try {
var d = await fs.listAllFiles("name");
console.log(d);
} catch (error) {
console.error("Er is een fout opgetreden:", error);
}
});
/*
Lijst van alle bestanden in een map
listFilesInFolder(folderId);
*/
filesinfolder.addEventListener("click", async function(data) {
try {
var d = await fs.listFilesInFolder(2);
console.log(d);
} catch (error) {
console.error("Er is een fout opgetreden:", error);
}
});
/*
Lijst van alle mappen
*/
allfolders.addEventListener("click", async function(data) {
try {
var d = await fs.listAllFolders();
console.log(d);
} catch (error) {
console.error("Er is een fout opgetreden:", error);
}
});
/*
Een map maken met een specifieke naam.
*/
document.getElementById('createFolder').addEventListener('click', async() => {
try {
const folderId = await fs.createFolder('Nieuwe Map');
console.log(`Map gecreëerd met ID: ${folderId}`);
} catch (error) {
console.error('Fout bij het maken van de map:', error);
}
});
/*
Een (tekst)bestand maken
createFile(bestandsnaam,inhoud,folderId);
*/
document.getElementById('createFile').addEventListener('click', async() => {
try {
// Voeg een tekstbestand toe aan de eerder gecreëerde map (folderId moet bekend zijn)
const fileId = await fs.createFile('Voorbeeld' + fi + '.txt', 'Dit is de inhoud van het bestand', 2);
console.log(`Bestand gecreëerd met ID: ${fileId}`);
fi++;
} catch (error) {
console.error('Fout bij het maken van het bestand:', error);
}
});
/*
Een map zippen en downloaden
loadJsZip(). Zip-bibliotheek laden (eenmalig)
downloadFolderAsZip(folderId);
*/
document.getElementById('downloadZip').addEventListener('click', async() => {
try {
await fs.loadJsZip();
await fs.downloadFolderAsZip(2);
console.log('Zip-bestand succesvol gedownload.');
} catch (error) {
console.error('Fout bij het downloaden van de zip:', error);
}
});
/*
Databank/bestandssysteem formatteren en wissen
*/
format.addEventListener("click", function() {
console.log("db verwijderen?");
fs.formatFileSystem();
})
/*
files of folders exporteren naar CSV of SQL
exportToSql("files")
exportToCsv("files")
*/
sql.addEventListener("click", function() {
fs.exportToSql("files").then(sql => {
console.log("SQL Statements: ", sql);
}).catch(error => {
console.error("Er is een fout opgetreden:", error);
});
fs.exportToCsv("files").then(csv => {
console.log("CSV Data: ", csv);
}).catch(error => {
console.error("Er is een fout opgetreden bij het exporteren naar CSV:", error);
});
});
SQL-statements
fs.executeSQL(SQL-query).then(result => console.log(result)).catch(error => console.error(error));
De databank exporteren als backup
Bij fs.exportDatase(false) krijg je een uitvoer van de json-databank. Plaats je de parameter op "true" dan wordt de json automatisch gedownload.
document.getElementById('exportButton').addEventListener('click', async() => {
try {
const data = await fs.exportDatabase;
console.log(data);
} catch (error) {
console.error("Fout bij het ophalen van de database data:", error);
}
});