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