Tengo el siguiente código:
public upload(): void { const fileinput = document.getElementById('file'); fileinput.click(); fileinput.addEventListener('change', this.handleFileInput.bind(this)); } private handleFileInput(event) { try { const input = event.target as HTMLInputElement; const reader = new FileReader(); const { objectId } = this.object; const file = input.files[0]; reader.onload = () => { event.target.value = null; this.objectDetailsService .upload(file, objectId) .subscribe( () => //, () => //, ); }; reader.readAsArrayBuffer(file); } catch (e) { console.log(e); } }Debería permitir cargar el mismo archivo a veces. Cuando el usuario selecciona otro, este código se crea como una nueva transmisión. ¿Cómo evitarlo?
Tienes razón al preguntar cómo aplicar switchMap . Una forma es crear un observable para manejar la carga de devolución de llamada onload . Luego, podría aplicar operadores como switchMap para llamar a otras funciones asíncronas.
También sugeriría adjuntar el controlador de eventos directamente en la plantilla en lugar de usar document.getElementById('file'); en el controlador.
Prueba lo siguiente
* .ts
import { Observable, Observer, timer } from 'rxjs'; import { switchMap } from 'rxjs/operators'; public handleFileInput(event) { const input = event.target as HTMLInputElement; const file = input.files[0]; this.readFile(file).pipe( switchMap((file: any) => { const { objectId } = this.object; return this.objectDetailsService.upload(file, objectId); }) ).subscribe({ next: () => console.log('File uploaded'), error: (error: any) => console.log('Error:', error), }); } readFile(file): Observable<any> { const reader = new FileReader(); reader.readAsArrayBuffer(file); return new Observable((observer: Observer<any>) => { reader.onload = (ev: ProgressEvent) => { observer.next(file); observer.complete(); }; reader.onerror = (error: any) => { observer.error(error); }; }); }* .html
Select file: <input type="file" (change)="handleFileInput($event)" />Ejemplo de trabajo: Stackblitz