[FIXED] How can i blog component in Angular?

Issue

I want to make a blog component in Angular with Nodejs as backend, the blog structure contains : Image and Description and i want to upload it in a single event to the backend(nodejs and mongodb).

The main concern is how to upload image and its description together in a single event to the backend.

Solution

Here is a simple example.

<form
  [formGroup]="angForm" novalidate (submit)="createBlog(angForm)" enctype="multipart/form-data">
   <div class="form-group">
     <textarea class="form-control form-control-lg" placeholder="Create a post" formControlName="data" #data  ></textarea>
   </div>
   <div class="form-group">
    <inpu type="file" name="image" name="image" #image (change)="onFileSelect($event)"/>
   </div>
   <button type="submit class="btn btn-dark" [disabled]="angForm.pristine || angForm.invalid" > Submit</button>
 </form>

Here is a simple angular reactive form we use to validate the fields that are required and we defined onFileSelect() function on change input value that we will use to save formData

blog.ts file

 import { FormBuilder, FormGroup, Validators } from "@angular/forms";

 angForm: FormGroup;

 //our constructor 
 constructor(
   private fb: FormBuilder,
   private http: HttpClient
  ) {
      this.createForm();
    }

 //reactive form group and set validations for required field
 createForm() {
   this.angForm = this.fb.group({
   data: [null, Validators.required],
   image: [""]
  });
 }

 createBlog(form) {
 const formData = new FormData();
 formData.append("image", this.angForm.get("image").value);
 formData.append("data", this.angForm.get("data").value);

 this.http
   .post("http://localhost:3000/blog/create", formData)
   .subscribe(res => {
     console.log(res);
   });
 }

  //on change event we append file to formdata
  onFileSelect(event) {
   if (event.target.files.length > 0) {
   const file = event.target.files[0];
   this.angForm.get("image").setValue(file);
  }
 }

To save files in nodejs you need to use multer package, and body-Parser to save text data

 const multer = require("multer");
 const upload = multer({ dest: "public/images/" }); //desired path to save file
//your post route to save data
router.post( "/create",upload.single("file"),(req, res) => { 
 if (req.file) {
     //creating instance of new blog 
      const newBlog = new Blog({
      desc: req.body.data,
      image: req.file.filename
    });

    //save blog data and image name into db
    newBlog.save().then(blog => {
       res.json(blog);
     // return response 
    });
   } else throw "error";
  }       
);

Answered By - Muhammad Shareyar

Answer Checked By - Candace Johnson (PHPFixing Volunteer)