How can i blog component in Angular?

Question

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.

The same way you send data from any form in Angular, you use a model to track it? — Baruch, Apr 24 '19 at 07:03
But I want to send a image with form data and want to use multer but this is not happening with single request — Shiva Chandel, Apr 25 '19 at 08:19
this will help you [post-form-data](https://stackoverflow.com/questions/15772394/how-to-upload-display-and-save-images-using-node-js-and-express) — Muhammad Shareyar, Apr 27 '19 at 10:41
@MuhammadShareyar but i also want to send some text data like captions with the image — Shiva Chandel, Apr 28 '19 at 05:40

Muhammad Shareyar · Accepted Answer · 2019-05-01T07:02:03.403

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";
  }       
);

Can you just provide me a link to this code. P.S this.createForm() in the constructor is also giving a error — Shiva Chandel, May 01 '19 at 05:38
FormData() is not appending multiple files @MuhammadShareyar — Shiva Chandel, May 01 '19 at 13:50
For multiple files you need to name it is as array in your form like `name=image[]` — Muhammad Shareyar, May 01 '19 at 14:37
And even the set value on file is giving error : **Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.** — Shiva Chandel, May 01 '19 at 14:53
Did you add `multiple` attribute in your `input` tag `` do this and check it will work fine then @ShivaChandel — Muhammad Shareyar, May 01 '19 at 15:59
It didnt worked and stilll giving the same error as mentioned above — Shiva Chandel, May 02 '19 at 07:33
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/192702/discussion-between-muhammad-shareyar-and-shiva-chandel). — Muhammad Shareyar, May 02 '19 at 07:34

How can i blog component in Angular?

1 Answers1