https://github.com/bobbyg603/file-uploads-with-angular-and-rxjs
đđâī¸ Powerful, elegant file uploads for Angular applications with RxJS
https://github.com/bobbyg603/file-uploads-with-angular-and-rxjs
angular article bindcallback bobbyg603 mergemap observable observables rxjs scan switchmap tutorial
Last synced: 12 months ago
JSON representation
đđâī¸ Powerful, elegant file uploads for Angular applications with RxJS
- Host: GitHub
- URL: https://github.com/bobbyg603/file-uploads-with-angular-and-rxjs
- Owner: bobbyg603
- Created: 2022-05-09T19:59:11.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2023-08-11T01:07:18.000Z (almost 3 years ago)
- Last Synced: 2025-04-12T23:14:33.084Z (about 1 year ago)
- Topics: angular, article, bindcallback, bobbyg603, mergemap, observable, observables, rxjs, scan, switchmap, tutorial
- Language: TypeScript
- Homepage: https://betterprogramming.pub/file-uploads-with-angular-and-rxjs-34262b3450ae
- Size: 521 KB
- Stars: 6
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## đđâī¸ File Uploads with Angular and RxJS
[](https://medium.com/better-programming/file-uploads-with-angular-and-rxjs-34262b3450ae)
[](https://twitter.com/bobbyg603/status/1524465334522195968)
[]([https://stackblitz.com/edit/github-ktbxdp-ftgv1g](https://stackblitz.com/github/bobbyg603/file-uploads-with-angular-and-rxjs))
This is is a companion repo for [File Uploads with Angular and RxJS](https://betterprogramming.pub/file-uploads-with-angular-and-rxjs-34262b3450ae) that demonstrates how to build a drag and drop file upload control. Topics in this article include the uploading files with Angular HttpClient, using Bootstrap to display progress bars, and leveraging RxJS observables with subscriptions that complete automatically.
## âī¸ TL;DR
Clone this repo to your workspace:
```sh
git clone https://github.com/bobbyg603/file-uploads-with-angular-and-rxjs
```
Install the dependencies and start the application:
```sh
cd file-uploads-with-angular-and-rxjs && npm i && npm start
```
You will also need to clone the companion Express server:
```sh
git clone https://github.com/bobbyg603/upload-server
```
Install the dependencies and start the server:
```sh
cd upload-server && npm i && npm start
```
Use the drag and drop control or click "Browse Files" to select files to upload.
## đĩī¸ Inspecting the Code
This project requires a separate server for testing file uploads. Follow the instructions in the [bobbyg603/upload-server](https://github.com/bobbyg603/upload-server) repo to configure your system for testing file uploads.
> âšī¸ The upload server should only be run on your local system while you're actively testing.
We use Angular's HttpClient to make a GET to our server so that we can display a list of files. The `getFilesSubject` will emit an event that triggers another GET to the server:
[app.component.ts](https://github.com/bobbyg603/file-uploads-with-angular-and-rxjs/blob/c327f1c833d0de4d8b09d5a2a5012b8670b2c2d3/src/app/app.component.ts#L21-L26)
```ts
files$?: Observable;
constructor(private httpClient: HttpClient) {
this.files$ = this.getFilesSubject.asObservable()
.pipe(
switchMap(() => this.httpClient.get('http://localhost:8080/files'))
);
}
```
The `files$` property is an observable that emits the list of files and is subscribed to in the template via the AsyncPipe:
[app.component.html](https://github.com/bobbyg603/file-uploads-with-angular-and-rxjs/blob/c327f1c833d0de4d8b09d5a2a5012b8670b2c2d3/src/app/app.component.html#L3)
```html
```
For file uploads, we start with a drag and drop control in the component template:
[app.component.html](https://github.com/bobbyg603/file-uploads-with-angular-and-rxjs/blob/c327f1c833d0de4d8b09d5a2a5012b8670b2c2d3/src/app/app.component.html#L1)
```html
```
We handle the `filesDropped` event in the component code. In the event handler we transform the `NgxFileDropEntry` array into an observable array of type `File`. For each file in the collection we call `uploadFile` and take all of the progress events until we see `HttpEventType.Response` which is the indication that the file has been uploaded successfully. We take all of the events and add them to a collection containing `FileUploadProgress` objects that describe the current upload progress for each of the files. Finally, the function passed to the `finalize` operator gets called and we instruct the `getFilesSubject` to emit so that the table of uploaded files is refreshed:
[app.component.ts](https://github.com/bobbyg603/file-uploads-with-angular-and-rxjs/blob/c327f1c833d0de4d8b09d5a2a5012b8670b2c2d3/src/app/app.component.ts#L28-L70)
```ts
uploads$?: Observable;
onFilesDropped(files: NgxFileDropEntry[]): void {
this.uploads$ = from(files)
.pipe(
mergeMap(selectedFile => {
const id = uuid();
const fileEntry = selectedFile.fileEntry as FileSystemFileEntry;
const observableFactory = bindCallback(fileEntry.file) as any;
const file$ = observableFactory.call(fileEntry) as Observable;
return file$
.pipe(
switchMap(file => this.uploadFile(file)
.pipe(
takeWhile(event => event.type !== HttpEventType.Response),
filter(isHttpProgressEvent),
map(event => {
const name = file.name;
const loaded = event.loaded ?? 0;
const total = event.total ?? 1;
const progress = Math.round(loaded / total * 100);
const failed = false;
const done = progress === 100;
return {
id,
name,
progress,
failed,
done
};
}),
)
)
);
}),
scan((acc, next) => {
acc[next.id] = next;
return {
...acc
};
}, {} as Record),
map(progress => Object.values(progress)),
finalize(() => this.getFilesSubject.next(null))
);
}
```
The `uploads$` property contains an observable collection of `FileUploadProgress` objects and is in the template to create a progress bar for each of the files being uploaded:
[app.component.html](https://github.com/bobbyg603/file-uploads-with-angular-and-rxjs/blob/c327f1c833d0de4d8b09d5a2a5012b8670b2c2d3/src/app/app.component.html#L2)
```html
```
## đ§âđ Further Exploration
Want to use this component in a production scenario? Take a look the [upload-client](https://github.com/bobbyg603/upload-client) repo.
The upload client repository takes this example and adds a Navbar, a modal, a loading wheel, error handling, and more!
## đ§âđģ Next Steps
If you liked this example, please follow me on [Medium](https://bobbyg603.medium.com/) and [X](https://twitter.com/bobbyg603), where I post programming tutorials and discuss tips and tricks that have helped make me a better programmer.
**Thank you for your support â¤ī¸**