Sub folder that does not import with my folder

Question

I am making an application where you can import a folder from your PC and it will put it in my Angular application, except that my problem is that when I want to import a folder which includes sub-folders these sub-folders folder does not import and I only end up with files

my import folder button :

<button pButton type="button" label="Importer un dossier" (click)="openFolderPicker()" webkitdirectory multiple ></button>

and my handleFolderSelect

handleFolderSelect(event: Event): void {
    const input = event.target as HTMLInputElement;
    if (!input.files || input.files.length === 0) {
      console.error('No files selected');
      return;
    }
  
    console.log('Files selected:', input.files.length);
    const files = Array.from(input.files);
    console.log('Selected files:', files);
  
    let folderName = 'New Folder';
    if (files.length > 0 && files[0].webkitRelativePath) {
      const fullPath = files[0].webkitRelativePath;
      folderName = fullPath.substring(0, fullPath.indexOf('/'));
    }
    
    this.processFolder(files, folderName);
  
    input.value = ''; 
  }

I have the impression that it is this function which is causing me a problem, I think that it only selects files and not folders

Answer 1

You are using the following property webkitdirectory which is strictly refers to upload a file only refer probably need to apply some trick to generate the same folder structure which can be achieved. Though you got the complete directory. To create folder using JS you check here