Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/bezkoder/angular-17-multiple-image-upload-preview

Angular 17 multiple Image upload with preview example to Rest API - Bootstrap, FormData, multipart file
https://github.com/bezkoder/angular-17-multiple-image-upload-preview

angular angular-17 angular17 bootstrap bootstrap-4 bootstrap4 file-upload image-upload image-uploading multipart multipart-formdata multipart-uploads multiple-file-upload multiple-files multiple-files-upload multiple-image-upload upload-file upload-image upload-images

Last synced: 10 days ago
JSON representation

Angular 17 multiple Image upload with preview example to Rest API - Bootstrap, FormData, multipart file

Awesome Lists containing this project

README

        

# Angular 17 Multiple Image upload with Preview example

Build an Angular 17 Multiple Images upload with Preview example using Bootstrap, Multipart File, FormData.

![angular-17-multiple-image-upload-preview-example](angular-17-multiple-image-upload-preview-example.png)

Build Multiple Images upload with Preview example using Angular 17, Bootstrap and FormData.
- upload only Images
- see the preview of multiple images that will be uploaded
- see the upload process (percentage) of uploading images
- view all uploaded images
- download image by clicking on the file name

For more detail, please visit:
> [Angular 17 Multiple Images upload with Preview example](https://www.bezkoder.com/angular-17-multiple-image-upload-preview/)

## Run
Run `ng serve --port 8081` for a dev server. Navigate to `http://localhost:8081/`. The app will automatically reload if you change any of the source files.

Rest APIs server for this Angular Client:
> [Node Express File Upload Rest API example](https://www.bezkoder.com/node-js-express-file-upload/)

> [Node Express File Upload with Google Cloud Storage example](https://www.bezkoder.com/google-cloud-storage-nodejs-upload-file/)

> [Node Express File Upload to MongoDB example](https://www.bezkoder.com/node-js-upload-store-images-mongodb/)

> [Spring Boot Multipart File upload (to static folder) example](https://www.bezkoder.com/spring-boot-file-upload/)

> [Spring Boot Multipart File upload (to database) example](https://www.bezkoder.com/spring-boot-upload-file-database/)

## More practice
> [Angular 17 Firebase Storage: File Upload/Display/Delete example](https://www.bezkoder.com/angular-17-firebase-storage/)

> [Angular 17 CRUD example with Web API](https://www.bezkoder.com/angular-17-crud-example/)

> [Angular 17 Pagination example | ngx-pagination](https://www.bezkoder.com/angular-17-pagination-ngx/)

> [Angular 17 JWT Authentication & Authorization with Web API](https://www.bezkoder.com/angular-17-jwt-auth/)

> [Angular 17 Form Validation example (Reactive Forms)](https://www.bezkoder.com/angular-17-form-validation/)

Fullstack with Node:

> [Angular 17 + Node Express + MySQL example](https://www.bezkoder.com/angular-17-node-js-express-mysql/)

> [Angular 17 + Node Express + PostgreSQL example](https://www.bezkoder.com/angular-17-node-js-express-postgresql/)

> [Angular 17 + Node Express + MongoDB example](https://www.bezkoder.com/angular-17-node-js-express-mongodb/)

> [Angular 17 + Node Express: File upload example](https://www.bezkoder.com/angular-17-node-express-file-upload/)

Fullstack with Spring Boot:

> [Angular 17 + Spring Boot example](https://www.bezkoder.com/spring-boot-angular-17-crud/)

> [Angular 17 + Spring Boot + MySQL example](https://www.bezkoder.com/spring-boot-angular-17-mysql/)

> [Angular 17 + Spring Boot + PostgreSQL example](https://www.bezkoder.com/spring-boot-angular-17-postgresql/)

> [Angular 17 + Spring Boot + MongoDB example](https://www.bezkoder.com/spring-boot-angular-17-mongodb/)

> [Angular 17 + Spring Boot: File upload example](https://www.bezkoder.com/angular-17-spring-boot-file-upload/)

Fullstack with Django:
> [Angular + Django example](https://www.bezkoder.com/django-angular-13-crud-rest-framework/)

> [Angular + Django + MySQL](https://www.bezkoder.com/django-angular-mysql/)

> [Angular + Django + PostgreSQL](https://www.bezkoder.com/django-angular-postgresql/)

> [Angular + Django + MongoDB](https://www.bezkoder.com/django-angular-mongodb/)

Security:
> [Angular 17 + Spring Boot: JWT Authentication and Authorization example](https://www.bezkoder.com/angular-17-spring-boot-jwt-auth/)

> [Angular 17 + Node.js Express: JWT Authentication and Authorization example](https://www.bezkoder.com/node-js-angular-17-jwt-auth/)

Serverless with Firebase:
> [Angular 17 Firebase CRUD with Realtime DataBase](https://www.bezkoder.com/angular-17-firebase-crud/)

> [Angular 17 Firestore CRUD example](https://www.bezkoder.com/angular-17-firestore-crud/)

> [Angular 17 Firebase Storage: File Upload/Display/Delete example](https://www.bezkoder.com/angular-17-firebase-storage/)

Integration (run back-end & front-end on same server/port)
> [How to integrate Angular with Node Restful Services](https://www.bezkoder.com/integrate-angular-12-node-js/)

> [How to Integrate Angular with Spring Boot Rest API](https://www.bezkoder.com/integrate-angular-12-spring-boot/)