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.
file
.