Bdtjtk

I have a blogging app built with MEAN stack, the app has been working fine for all time.
It broke after I added upload image feature using Multer node.js package.

This is my folder structure:

The directory where I want to store my image:
serverimgStore

My multer configuration is:

  const express = require("express");

  const multer = require("multer");

  const Post = require("../models/post");



  const router = express.Router();



  const MIME_TYPE_MAP = {

   'imgStore/png': 'png',

   'imgStore/jpeg': 'jpg',

   'imgStore/jpg': 'jpg'

 }



  const storage = multer.diskStorage({

   destination: (req, file, cb) => { 

   // called when multer tries to save file

   // request, file, callback

      const isValid = MIME_TYPE_MAP[file.mimetype];

      let error = new Error("Invalid mime type");

      if (isValid) {  // if its known extention set error to null

        error = null;

      }



      console.log('before cb error line.');

      cb(error, "server/imgStore"); // this path is relative to server.js not route.js

  },

  filename: (req,file,cb) => {

    const name = file.originalname.toLowerCase().split(' ').join('-');//replace whitespace with dash

    const ext = MIME_TYPE_MAP[file.mimetype];

    cb(null, name + '-' + Date.now()+ '.' + ext)

  }

});

My Form in the html:

<form [formGroup]="form" (submit)="onSavePost(postForm)" #postForm="ngForm" *ngIf="!isLoading">

   <!--create directive formGroup with the name of instance we created in ts file

   in the input tag below, we removed name, instead we use formControlName

   -->

    <mat-card-title>{{mode}} your post here:</mat-card-title>

    <mat-form-field floatLabel="never"> <!-- remove the float label-->

        <input

          matInput

          type="text"

          formControlName="title"

          placeholder="Title"

          >

        <mat-error *ngIf="form.get('title').invalid">

            <mat-error *ngIf="form.get('title').errors.required">

              Title is required!

            </mat-error>

            <mat-error *ngIf="form.get('title').errors.minlength">

              Title needs at least 4 characters !

            </mat-error>

        </mat-error>

    </mat-form-field>

    <mat-form-field floatLabel="never">

        <textarea

           matInput

           rows="6"

           formControlName="content"

           placeholder="Content"

           >

        </textarea>

        <mat-error *ngIf="form.get('content').invalid">

          <div *ngIf="form.get('content').errors.required">

              Cannot be empty!

          </div>

        </mat-error>

    </mat-form-field>

    <div class="img-loader">

      <button (click)="filePicker.click()" mat-stroked-button type="button" color="primary">Upload Image</button>

      <input type="file" #filePicker (change)="onImagePicked($event)"> <!--localRef is filePicker-->

    </div>

    <div class="image-preview" *ngIf="imagePreview!=='' && imagePreview && form.get('image').valid">

      <img [src]="imagePreview" [alt]="form.value.title">

    </div>



    <div *ngIf="form.get('image').invalid" style="margin-bottom:20px;">

      <mat-error *ngIf="imagePreview && form.get('image').errors.invalidMimeType">

        Only files of [jpg, jpeg, png] are allowed to upload!

      </mat-error>

    </div>



    <button

      mat-raised-button

      color="primary"

      type="submit"

      [disabled]="postForm.invalid">Save Post</button>

     <!--I really prefer disable the submit button when its still invalid input!-->



  </form>

Once I pick image by click upload image button and pick an image that is acceptable type: jpg, jpeg, png

Click 'Save Post' button will gets the error message in my node console:

I can stuck on getting it to work, will appreciate some help !