0

Estoy intentando hacer una pequeña función con JavaScript que consiste en que con una ruta estática que ya tengo en una variable, se muestre el nombre de los archivos y carpetas que contiene ese directorio. Creo que existe algo como un FileReader, pero no sé cómo se usa ni sí se puede usar en Angular o si habría que integrarlo de alguna manera en concreto al estar usando Angular.

Luego claro, los nombres de los archivos del directorio los tendría almacenado en un array para luego mostrarlos en pantalla con un bucle.

¿Alguna idea de cómo poder hacer esto?

1
  • 1
    No se puede hacer eso por seguridad, es el usuario el que tiene que proporcionar activamente el acceso al sistema de ficheros usando un input de tipo file. Commented el 15 sept. 2020 a las 10:40

1 respuesta 1

0

Cuando se trata del lado del cliente no puedes utilizar módulos como 'fs' ya que estos son exclusivos para la parte del servidor. Lo que puedes realizar es la carga de un archivo o ZIP y mostrar el listado en el navegador.

Usando la librería JSZip.

npm install jszip --save

Por ejemplo:

import * as JSZip from 'jszip/dist/jszip';

export interface ZipFile {
  readonly name: string;
  readonly dir: boolean;
  readonly date: Date;
  readonly data: any;
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  $zipFiles: Observable<ZipFile[]>;
  constructor() {
  }
  
  ngOnFile(event: any): void {
    const fileList = event.target.files;
    const zipLoaded = new JSZip.default();
    this.$zipFiles = from(zipLoaded.loadAsync(fileList[0])).pipe(
      switchMap((zip: any):Observable<ZipFile[]> => {
        return of(Object.keys(zip.files).map((key)=>zip.files[key]))
      })
    )
  }

  ngOnUpload(data: any) {}
}

HTML

<p>Selecciona un ZIP</p>

<input type="file"(change)="ngOnFile($event)" placeholder="Cargar" accept=".zip">

<ul>
  <ng-container *ngFor="let file of $zipFiles | async">
    <li>
      <h5>
        {{file.name}} 
        <small>
          <a *ngIf="!file.dir" href="" (click)="ngOnUpload(file.data)"> 
            Subir
          </a>
        </small>
      </h5> 
      <small>{{file.date | date}}</small>
    </li>
  </ng-container>
</ul>

Te comparto el ejemplo.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.