Angular Forms Course

Author: jhades

package-lock.json

@@ -26,6 +26,7 @@
     "@angular/router": "11.0.0",
     "core-js": "^2.4.1",
     "express": "^4.16.2",
+    "express-fileupload": "^1.2.0",
     "moment": "^2.22.2",
     "rxjs": "6.5.4",
     "tslib": "^2.0.0",

package.json

@@ -0,0 +1,13 @@
+
+import {Request, Response} from 'express';
+
+
+export function onFileupload(req:Request, res: Response) {
+
+  let file = req['files'].thumbnail;
+
+  console.log("File uploaded: ", file.name);
+
+  res.status(200).json({message: 'File uploaded successfully.'})
+
+}

server/file-upload.route.ts

@@ -5,10 +5,14 @@ import {Application} from "express";
 import {getAllCourses, getCourseById} from "./get-courses.route";
 import {searchLessons} from "./search-lessons.route";
 import {getCourseCategories} from './course-categories.route';
+import {onFileupload} from './file-upload.route';
+const fileUpload = require('express-fileupload');
 
 
 const app: Application = express();
 
+app.use(fileUpload());
+
 
 app.route('/api/courses').get(getAllCourses);
 
@@ -18,6 +22,8 @@ app.route('/api/lessons').get(searchLessons);
 
 app.route('/api/course-categories').get(getCourseCategories);
 
+app.route('/api/thumbnail-upload').post(onFileupload);
+
 
 const httpServer:any = app.listen(9000, () => {
     console.log("HTTP REST API Server running at http://localhost:" + httpServer.address().port);

server/server.ts

@@ -41,6 +41,7 @@ import {MatStepperModule} from '@angular/material/stepper';
 import { AddressFormComponent } from './address-form/address-form.component';
 import {CreateCourseStep3Component} from './create-course/create-course-step-3/create-course-step-3.component';
 import {CreateCourseStep1Component} from './create-course/create-course-step-1/create-course-step-1.component';
+import {FileUploadComponent} from './file-upload/file-upload.component';
 
 @NgModule({
     declarations: [
@@ -57,7 +58,8 @@ import {CreateCourseStep1Component} from './create-course/create-course-step-1/c
         CreateCourseStep1Component,
         CreateCourseStep2Component,
         CreateCourseStep3Component,
-        AddressFormComponent
+        AddressFormComponent,
+        FileUploadComponent
     ],
     imports: [
         BrowserModule,

src/app/app.module.ts

@@ -31,6 +31,8 @@
 
   </mat-form-field>
 
+  <file-upload requiredFileType="image/png"></file-upload>
+
   <!--div class="form-val">
 
     {{form.errors | json}}

src/app/create-course/create-course-step-2/create-course-step-2.component.html

@@ -17,7 +17,8 @@ export class CreateCourseStep2Component implements OnInit {
       price: [null, [Validators.required, Validators.pattern('[0-9]+'), Validators.min(1), Validators.max(9999)]],
       courseType: ['premium', Validators.required],
       promoPeriodStartAt: [null],
-      promoPeriodEndAt: [null]
+      promoPeriodEndAt: [null],
+      thumbnailFile: [null, Validators.required]
     }, {
       validators: createPromoRangeValidator()
     });

src/app/create-course/create-course-step-2/create-course-step-2.component.ts

@@ -0,0 +1,22 @@
+
+
+<input type="file" class="file-input" (change)="onFileSelected($event)" [accept]="requiredFileType" #fileUpload>
+
+
+<div class="file-upload">
+
+  <mat-form-field>
+
+    <input matInput [disabled]="true" [value]="fileName">
+
+  </mat-form-field>
+
+  <button mat-mini-fab color="primary" class="upload-btn" (click)="fileUpload.click()">
+    <mat-icon>
+      attach_file
+    </mat-icon>
+  </button>
+
+</div>
+
+

src/app/file-upload/file-upload.component.html

@@ -0,0 +1,14 @@
+
+.file-input {
+  display: none;
+}
+
+.file-upload {
+display: flex;
+  align-items: flex-end;
+}
+
+.upload-btn {
+  margin-left: 10px;
+  margin-bottom:15px;
+}

src/app/file-upload/file-upload.component.scss

@@ -0,0 +1,42 @@
+import {Component, Input} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+
+
+@Component({
+  selector: 'file-upload',
+  templateUrl: "file-upload.component.html",
+  styleUrls: ["file-upload.component.scss"]
+})
+export class FileUploadComponent {
+
+  @Input()
+  requiredFileType:string;
+
+  fileName:string = '';
+
+  constructor(private http: HttpClient) {
+
+  }
+
+
+  onFileSelected(event) {
+
+    const file: File = event.target.files[0];
+
+    this.fileName = file.name;
+
+    const formData = new FormData();
+
+    formData.append('thumbnail', file);
+
+    this.http.post("/api/thumbnail-upload", formData, {
+      reportProgress: true,
+      observe: 'events'
+    })
+    .subscribe(console.log);
+
+  }
+
+
+
+}