Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nbaua/angularnestjsgraphqlupload
Basic demonstration of uploading files using GraphQL, NestJS and some Angular 10
https://github.com/nbaua/angularnestjsgraphqlupload
angular angular10 graphql graphql-api graphql-upload javascript nestjs typescript
Last synced: 24 days ago
JSON representation
Basic demonstration of uploading files using GraphQL, NestJS and some Angular 10
- Host: GitHub
- URL: https://github.com/nbaua/angularnestjsgraphqlupload
- Owner: nbaua
- Created: 2020-08-24T14:51:37.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-08-24T15:05:42.000Z (over 4 years ago)
- Last Synced: 2024-11-14T21:30:13.185Z (3 months ago)
- Topics: angular, angular10, graphql, graphql-api, graphql-upload, javascript, nestjs, typescript
- Language: TypeScript
- Homepage:
- Size: 740 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Angular NestJs Graphql Upload
### Prerequisites
You must have fundamental knowledge of NestJS (Node+JavaScript) and GraphQL along with some basic Angular.
### This repository contains two separate projects.
`nest-gql-upload` - Server API built using Nest JS
`ng-graphql-client` - UI built using Angular 10.0.1
> Using Node: 12.18.0
For simplicity the GraphQL resolvers and query has been implemented inline using the Code First approach. The upload scalar uses graphql-multipart-request-spec.
```
This application shows a single file upload demo.
however with minimal changes the application can be converted to upload multiple files at once, as well.With the code first approach, Apollo Server adds a custom scalar type called Upload, automatically.
If you wish to follow the schema first approach, you must implement the Upload scalar.
```### Application in Action
# Postman
![Upload Via API](https://github.com/nbaua/AngularNestJsGraphqlUpload/blob/master/screenshots/postman.PNG "Upload Via API")
# 1
![Uploading File](https://github.com/nbaua/AngularNestJsGraphqlUpload/blob/master/screenshots/screen1.PNG "Uploading File")
# 2
![File Uploaded](https://github.com/nbaua/AngularNestJsGraphqlUpload/blob/master/screenshots/screen2.PNG "File Uploaded")