Het maken van een bestandsbeheerfunctie in je Capacitor-app die werkt op iOS en Android vereist het gebruik van plugins en best practices voor bestandsbeheer en gebruikerservaring. Hier is een overzicht van de aanpak, inclusief voorbeeldcode en tips: 1. Gebruik de juiste plugins: - `@capacitor/filesystem` voor bestandsbeheer ( lezen, schrijven, verwijderen ). - `@capacitor/share` of `@capacitor/browser` indien je bestanden wilt delen of downloaden. - (optioneel) `@capacitor/haptics` voor feedback, en andere plugins voor een vloeiende gebruikerservaring. 2. Voorbeeld: Basis functies voor uploaden, downloaden en organiseren **a. Bestanden opslaan (Uploaden)** ```typescript import { Filesystem, Directory, Encoding } from '@capacitor/filesystem'; async function saveFile(fileName: string, data: string | Blob) { try { const result = await Filesystem.writeFile({ path: fileName, data: typeof data === 'string' ? data : await blobToBase64(data), directory: Directory.Documents, encoding: Encoding.UTF8, }); console.log('Bestand opgeslagen:', result.uri); } catch (e) { console.error('Fout bij opslaan:', e); } } // Helper functie om Blob naar Base64 te converteren async function blobToBase64(blob: Blob): Promise<string> { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onloadend = () => { const base64data = (reader.result as string).split(',')[1]; resolve(base64data); }; reader.onerror = reject; reader.readAsDataURL(blob); }); } ``` **b. Bestanden lezen (Downloaden)** ```typescript async function readFile(fileName: string): Promise<string | null> { try { const contents = await Filesystem.readFile({ path: fileName, directory: Directory.Documents, }); return contents.data; // Base64-string } catch (e) { console.error('Fout bij lezen:', e); return null; } } ``` **c. Bestanden organiseren (bijvoorbeeld in mappen)** ```typescript async function createFolder(folderName: string) { try { await Filesystem.mkdir({ path: folderName, directory: Directory.Documents, recursive: true, }); } catch (e) { console.error('Fout bij maken map:', e); } } ``` 3. Best practices voor een naadloze gebruikerservaring - **Toestemmingen**: Vraag de juiste toestemmingen voor toegang tot opslag en bestanden, vooral op Android (bijv. `READ_EXTERNAL_STORAGE`, `WRITE_EXTERNAL_STORAGE`). - **UI/UX**: Laat gebruikers duidelijke keuzes maken en geef voortgangsindicatoren bij grote bestanden. - **Platform-specifieke optimalisaties**: - Op iOS: gebruik het Filesystem in `Directory.Documents`. - Op Android: overweeg gebruik te maken van `Directory.External` of `Directory.Data` afhankelijk van behoefte. - **Bestandsselectie**: Gebruik een bestandskiezer plugin zoals `@ionic-native/file-open` of een native plugin om bestanden te selecteren. 4. Bestands downloaden en delen ```typescript import { Share } from '@capacitor/share'; async function downloadAndShareFile(fileName: string) { const base64Data = await readFile(fileName); if (base64Data) { const blob = base64ToBlob(base64Data, 'application/octet-stream'); const url = URL.createObjectURL(blob); await Share.share({ title: 'Delen bestand', url: url, }); } } function base64ToBlob(base64: string, mimeType: string): Blob { const byteCharacters = atob(base64); const byteNumbers = new Array(byteCharacters.length); for (let i = 0; i < byteCharacters.length; i++) { byteNumbers[i] = byteCharacters.charCodeAt(i); } const byteArray = new Uint8Array(byteNumbers); return new Blob([byteArray], { type: mimeType }); } ``` 5. Extra tips - Test op beide platformen uitgebreid. - Gebruik async/await voor betere leesbaarheid. - Behandel foutmeldingen en geef gebruikers feedback. - Overweeg het gebruik van native bestandsbeheerplugins voor meer functionaliteit. Door deze aanpak te volgen, kun je een robuuste en gebruiksvriendelijke bestandsbeheerfunctie maken die naadloos werkt op iOS en Android.

Hier is een uitgebreide beschrijving voor het implementeren van bestandsbeheer in je Capacitor-app voor iOS en Android: ## 1. Installatie vereiste plugins ```bash npm install @capacitor/filesystem npm install @capacitor/preferences npm install @capacitor/camera npm install @capacitor/share ``` ## 2. Basis bestandsbeheer service ```typescript // services/file-manager.service.ts import { Filesystem, Directory, Encoding } from '@capacitor/filesystem'; import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'; import { Share } from '@capacitor/share'; import { Preferences } from '@capacitor/preferences'; export class FileManagerService { // Bestand uploaden vanaf apparaat async uploadFile(): Promise<string> { try { const image = await Camera.getPhoto({ quality: 90, allowEditing: false, resultType: CameraResultType.Uri, source: CameraSource.Photos }); if (image.webPath) { const savedFile = await this.saveFile(image.webPath, 'uploaded_image.jpg'); return savedFile.uri; } throw new Error('Kon bestand niet ophalen'); } catch (error) { console.error('Upload fout:', error); throw error; } } // Bestand opslaan in app directory async saveFile(fileUri: string, fileName: string) { const response = await fetch(fileUri); const blob = await response.blob(); const base64Data = await this.blobToBase64(blob); return await Filesystem.writeFile({ path: `documents/${fileName}`, data: base64Data, directory: Directory.Data, encoding: Encoding.UTF8 }); } // Bestand downloaden async downloadFile(fileUrl: string, fileName: string): Promise<string> { try { const response = await fetch(fileUrl); const blob = await response.blob(); const base64Data = await this.blobToBase64(blob); const result = await Filesystem.writeFile({ path: `downloads/${fileName}`, data: base64Data, directory: Directory.Data }); return result.uri; } catch (error) { console.error('Download fout:', error); throw error; } } // Bestanden ophalen uit directory async listFiles(directoryPath: string = 'documents') { try { const result = await Filesystem.readdir({ path: directoryPath, directory: Directory.Data }); return result.files; } catch (error) { console.error('Lijst fout:', error); return []; } } // Bestand verwijderen async deleteFile(filePath: string): Promise<void> { try { await Filesystem.deleteFile({ path: filePath, directory: Directory.Data }); } catch (error) { console.error('Verwijder fout:', error); throw error; } } // Bestand delen async shareFile(fileUri: string, title: string = 'Bestand delen') { try { await Share.share({ title: title, url: fileUri }); } catch (error) { console.error('Deel fout:', error); } } // Helper: blob naar base64 private blobToBase64(blob: Blob): Promise<string> { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { if (typeof reader.result === 'string') { resolve(reader.result.split(',')[1]); } else { reject(new Error('Kon blob niet converteren')); } }; reader.readAsDataURL(blob); }); } } ``` ## 3. Bestandsorganisatie service ```typescript // services/file-organizer.service.ts import { Preferences } from '@capacitor/preferences'; export class FileOrganizerService { private readonly CATEGORIES_KEY = 'file_categories'; // Categorieën aanmaken async createCategory(categoryName: string): Promise<void> { const categories = await this.getCategories(); categories.push(categoryName); await Preferences.set({ key: this.CATEGORIES_KEY, value: JSON.stringify(categories) }); } // Categorieën ophalen async getCategories(): Promise<string[]> { const result = await Preferences.get({ key: this.CATEGORIES_KEY }); return result.value ? JSON.parse(result.value) : []; } // Bestand categoriseren async categorizeFile(fileName: string, category: string): Promise<void> { const fileCategories = await this.getFileCategories(); fileCategories[fileName] = category; await Preferences.set({ key: 'file_categorization', value: JSON.stringify(fileCategories) }); } private async getFileCategories(): Promise<{ [key: string]: string }> { const result = await Preferences.get({ key: 'file_categorization' }); return result.value ? JSON.parse(result.value) : {}; } } ``` ## 4. Gebruik in component ```typescript // components/file-manager.component.ts import { Component } from '@angular/core'; // of React/Vue import { FileManagerService } from '../services/file-manager.service'; import { FileOrganizerService } from '../services/file-organizer.service'; @Component({ selector: 'app-file-manager', template: ` <button (click)="uploadFile()">Bestand uploaden</button> <button (click)="listFiles()">Bestanden tonen</button> <div *ngFor="let file of files"> <span>{{ file.name }}</span> <button (click)="downloadFile(file)">Downloaden</button> <button (click)="shareFile(file)">Delen</button> <button (click)="deleteFile(file)">Verwijderen</button> </div> ` }) export class FileManagerComponent { files: any[] = []; constructor( private fileManager: FileManagerService, private organizer: FileOrganizerService ) {} async uploadFile() { try { const fileUri = await this.fileManager.uploadFile(); console.log('Bestand opgeslagen:', fileUri); await this.listFiles(); } catch (error) { this.showError('Upload mislukt'); } } async listFiles() { this.files = await this.fileManager.listFiles(); } async downloadFile(file: any) { try { // Voorbeeld: download vanaf externe URL const localUri = await this.fileManager.downloadFile( 'https://example.com/file.pdf', 'downloaded_file.pdf' ); console.log('Gedownload naar:', localUri); } catch (error) { this.showError('Download mislukt'); } } async shareFile(file: any) { await this.fileManager.shareFile(file.uri, file.name); } async deleteFile(file: any) { if (confirm('Bestand verwijderen?')) { await this.fileManager.deleteFile(file.path); await this.listFiles(); } } private showError(message: string) { // Toon gebruikersvriendelijke foutmelding alert(message); } } ``` ## 5. Best practices voor naadloze ervaring ### Platform-specifieke configuratie ```json // capacitor.config.ts import { CapacitorConfig } from '@capacitor/cli'; const config: CapacitorConfig = { appId: 'com.jouwhapp.bestandsbeheer', appName: 'Bestandsbeheer App', webDir: 'www', plugins: { Filesystem: { // Android permissies androidPermissions: ['READ_EXTERNAL_STORAGE', 'WRITE_EXTERNAL_STORAGE'] }, Camera: { // iOS permissies iOSPhotoLibraryUsageDescription: 'Deze app heeft toegang nodig tot je foto\'s voor bestandsuploads.' } } }; export default config; ``` ### Foutafhandeling verbeteren ```typescript // services/error-handler.service.ts export class ErrorHandlerService { static handleFileError(error: any): string { if (error.message.includes('permission')) { return 'Toestemming geweigerd. Controleer app-instellingen.'; } else if (error.message.includes('network')) { return 'Netwerkfout. Controleer je verbinding.'; } else if (error.message.includes('storage')) { return 'Onvoldoende opslagruimte. Maak ruimte vrij.'; } else { return 'Er ging iets mis. Probeer opnieuw.'; } } } ``` ### Performance optimalisaties ```typescript // Large file handling async uploadLargeFile(fileUri: string, onProgress?: (progress: number) => void) { // Implementeer chunk-gebaseerde upload voor grote bestanden // Toon voortgangsindicator // Gebruik background processing waar mogelijk } // Cache management async clearTempFiles() { const tempFiles = await this.fileManager.listFiles('temp'); for (const file of tempFiles) { await this.fileManager.deleteFile(`temp/${file.name}`); } } ``` ## 6. Platform-specifieke overwegingen ### iOS: - Info.plist permissies toevoegen voor foto-bibliotheek - Document picker overwegen voor bestandsselectie - iCloud integratie mogelijkheden onderzoeken ### Android: - Runtime permissies aanvragen - Scoped storage respecteren (Android 10+) - MANAGE_EXTERNAL_STORAGE permission vermijden tenzij noodzakelijk Deze implementatie biedt een solide basis voor cross-platform bestandsbeheer met goede gebruikerservaring en robuuste foutafhandeling.