I’m following a tutorial for image upload in Angular, but I get this error in my Chrome dev console whenever I post the form
TypeError: Argument 2 (‘blobValue’) to FormData.append must be an instance of Blob
here is my code for the routing to the database(Mongo Atlas):
const express = require("express");
const router = express.Router();
const Post = require("../models/post");
const multer = require("multer");
const MIME_TYPE_MAP = {
"image/png": "png",
"image/jpeg": "jpg",
"image/jpg": "jpg",
};
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, "Api/upload");
},
filename: (req, file, cb) => {
const name = file.originalname.toLowerCase().split(" ").join("-");
const extension = MIME_TYPE_MAP[file.mimetype];
cb(null, name + "-" + Date.now() + "." + extension);
},
});
/* Here i post to the Mongo database */
router.post(
"",
multer({ storage: storage }).single("image"),
(req, res, next) => {
const post = new Post({
title: req.body.title,
content: req.body.content,
});
post.save().then((createdPost) => {
//console.log(result);
res.status(201).json({
message: "Post added succesfully to MongoDB!",
postId: createdPost._id,
});
});
//console.log(post);
}
);
/* Here i fetch from the Mongo database */
router.get("", (req, res, next) => {
Post.find().then((documents) => {
res
.status(200)
.json({ message: "Post fetched Successfully!", posts: documents });
});
});
/* Here i delete from the Mongo database */
router.delete("/:id", (req, res, next) => {
/* console.log(req.params.id);
res.status(200).json({ message: "Post has een deleted!" }); */
Post.deleteOne({ _id: req.params.id }).then((result) => {
console.log(result);
res.status(200).json({ message: "Post has een deleted!" });
});
});
router.put("/:id", (req, res, next) => {
const post = new Post({
_id: req.body.id,
title: req.body.title,
content: req.body.content,
});
Post.updateOne({ _id: req.params.id }, post).then((result) => {
// console.log(result);
res.status(200).json({ message: "Update Post Successful!" });
});
});
router.get("/:id", (req, res, next) => {
Post.findById(req.params.id).then((post) => {
if (post) {
res.status(200).json(post);
} else {
res.status(404).json({ message: "Post not Found!" });
}
});
});
module.exports = router;
and this is the code for the post-service
import { Injectable } from '@angular/core';
import { Post } from './postModel';
import { Subject } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root',
})
export class PostServiceService {
private posts: Post[] = [];
private postsUpdated = new Subject<Post[]>();
constructor(private http: HttpClient) {}
/* getPost(): Observable<Post[]> {
const posts = of(this.posts);
return posts;
} */
/* Here I get posts route */
getPost() {
//return [...this.posts];
this.http
.get<{ message: string; posts: any }>('http://localhost:4000/api/posts')
.pipe(
map((postData) => {
return postData.posts.map((post: any) => {
return {
title: post.title,
content: post.content,
id: post._id,
};
});
})
)
.subscribe((transformedtData) => {
this.posts = transformedtData;
this.postsUpdated.next([...this.posts]);
});
}
getPostUpdatedListener() {
return this.postsUpdated.asObservable();
}
getPosts(id: any) {
return this.http.get<{ _id: string; title: string; content: string }>(
'http://localhost:4000/api/posts/' + id
);
}
addPost(title: string, content: string, image: File) {
/* const post: Post = {
id: id,
title: title,
content: content,
}; */
const postData = new FormData();
postData.append('title', title);
postData.append('content', content);
postData.append('image', image, title);
this.http
.post<{ message: string; postId: string }>(
'http://localhost:4000/api/posts',
postData
)
.subscribe((responseData) => {
const post: Post = {
id: responseData.postId,
title: title,
content: content,
};
/* const id = responseData.postId;
post.id = id; */
//console.log(responseData.message);
this.posts.push(post);
this.postsUpdated.next([...this.posts]);
});
}
updatePost(id: string, title: string, content: string) {
const post: Post = { id: id, title: title, content: content };
this.http
.put('http://localhost:4000/api/posts/' + id, post)
.subscribe((response) => /*console.log(response)*/ {
const updatedPosts = [...this.posts];
const oldPostsIndex = updatedPosts.findIndex((p) => p.id === post.id);
updatedPosts[oldPostsIndex] = post;
this.posts = updatedPosts;
this.postsUpdated.next([...this.posts]);
});
}
deletePost(postId: string) {
this.http
.delete('http://localhost:4000/api/posts/' + postId)
.subscribe(() => {
const updatedPosts = this.posts.filter((post) => post.id !== postId);
this.posts = updatedPosts;
this.postsUpdated.next([...this.posts]);
});
}
}```
