Bonjour,

J'essaie de lister les dossiers contenant des fichiers mp3 en utilisant le plugin Capacitor Filesystem dans un projet Ionic. Cependant, je rencontre des problèmes avec l'utilisation de 'path' et 'endsWith', car il semble renvoyer un mélange de types string et FileInfo.
Quelqu'un pourrait-il m'aider à comprendre pourquoi cette approche ne fonctionne pas et comment je pourrais résoudre ce problème ?
Je vous remercie de votre aide.

Voici mon service :

import { Injectable } from '@angular/core';
import { Directory, Filesystem } from '@capacitor/filesystem';

@Injectable({
  providedIn: 'root'
})
export class MusicScannerService {
  constructor() { }

  public async scanFoldersWithMp3(directory: string = ''): Promise<string[]> {
    let foldersWithMp3: string[] = [];
    await this.scanDirectory(directory, foldersWithMp3);
    return foldersWithMp3.filter((value, index, self) => self.indexOf(value) === index); // Filtrer les doublons
  }

  private async scanDirectory(path: string, foldersWithMp3: string[]): Promise<void> {
    try {
      const result = await Filesystem.readdir({
        directory: Directory.ExternalStorage,
        path: path
      });

      for (const fileName of result.files) {
        const fullPath = path ? `${path}/${fileName}` : fileName;
        const stat = await Filesystem.stat({
          directory: Directory.ExternalStorage,
          path: fullPath
        });

        if (stat.type === 'directory') {
          // Si c'est un dossier, continuer le scan récursivement
          await this.scanDirectory(fullPath, foldersWithMp3);
        } else if (fileName.endsWith('.mp3')) {
          // Si un fichier MP3 est trouvé, ajouter le dossier parent à la liste
          if (!foldersWithMp3.includes(path)) {
            foldersWithMp3.push(path);
          }
        }
      }
    } catch (error) {
      console.error(`Erreur lors du scan du dossier ${path}:`, error);
    }
  }
}

Avec les erreurs :

Error: src/app/services/MusicScannerService.service.ts:27:11 - error TS2322: Type 'string | FileInfo' is not assignable to type 'string'.
  Type 'FileInfo' is not assignable to type 'string'.

27           path: fullPath
             ~~~~

  node_modules/@capacitor/filesystem/dist/esm/definitions.d.ts:274:5
    274     path: string;
            ~~~~
    The expected type comes from property 'path' which is declared here on type 'StatOptions'

Error: src/app/services/MusicScannerService.service.ts:32:36 - error TS2345: Argument of type 'string | FileInfo' is not assignable to parameter of type 'string'.
  Type 'FileInfo' is not assignable to type 'string'.

32           await this.scanDirectory(fullPath, foldersWithMp3);
                                      ~~~~~~~~

Error: src/app/services/MusicScannerService.service.ts:33:29 - error TS2339: Property 'endsWith' does not exist on type 'FileInfo'.

33         } else if (fileName.endsWith('.mp3')) {

Alors je fais comme ça et c'est beaucoup mieux mais (voir mon message plus bas)

import { Component, OnInit } from '@angular/core';
import { MusicScannerService } from '../services/MusicScannerService.service';

@Component({
  selector: 'app-tab3',
  templateUrl: './tab3.page.html',
  styleUrls: ['./tab3.page.scss'],
})
export class Tab3Page implements OnInit {
  public foldersWithMp3: string[] = [];
  public musicFiles: string[] = [];
  public loading: boolean = false;
  public errorMessage: string = '';

  constructor(private musicScannerService: MusicScannerService) {}

  ngOnInit() {}

  ionViewWillEnter() {
    this.loadFoldersWithMp3();
  }

  async loadFoldersWithMp3() {
    try {
      const folders = await this.musicScannerService.scanFoldersWithMp3();
      console.log(folders);
      this.foldersWithMp3 = Array.from(folders); // Convertir l'ensemble en tableau
    } catch (error) {
      console.error("Erreur lors du chargement des dossiers", error);
    }
  }
}

Dans mon .ts :

import { Component, OnInit } from '@angular/core';
import { MusicScannerService } from '../services/MusicScannerService.service';

@Component({
  selector: 'app-tab3',
  templateUrl: './tab3.page.html',
  styleUrls: ['./tab3.page.scss'],
})
export class Tab3Page implements OnInit {
  public foldersWithMp3: string[] = [];
  public musicFiles: string[] = [];
  public loading: boolean = false;
  public errorMessage: string = '';

  constructor(private musicScannerService: MusicScannerService) {}

  ngOnInit() {}

  ionViewWillEnter() {
    this.loadFoldersWithMp3();
  }

  async loadFoldersWithMp3() {
    try {
      const folders = await this.musicScannerService.scanFoldersWithMp3();
      console.log(folders);
      this.foldersWithMp3 = Array.from(folders); // Convertir l'ensemble en tableau
    } catch (error) {
      console.error("Erreur lors du chargement des dossiers", error);
    }
  }
}

1 réponse


Hello :)

Alors d'après l'erreur je dirais que le problème vien de cette ligne:

const fullPath = path ? `${path}/${fileName}` : fileName;

Si le Fileinfo est de même type qu'un fichier uploadé alors il faudrait essayer avec const fullPath = path ? `${path}/${fileName.name}` : fileName.name;

barpoi78
Auteur

Bonjour,

J'ai fait comme ça (voir mon code mis à jour plus haut) mais cela n'affiche pas les dossiers dans Android studio avec comme device mon smartphone. C'est une avancée mais le problème, c'est que je ne peux pas voir dans logcat mes "console.log(folders);"