Updating Data with Image in MEAN Stack

In our previous section, we successfully uploaded the image and got back to our frontend. Now, if we try to update a post, it will give us an error because there is no imagePath. In order to update the post, we will use the following steps:

1) We will go back to the typescript file of our post-create component. Here, we don't have any place to edit the existing image. We always have null as a starting value for the image when we create a new form. When we add an image, we want to use our imagepath. So, we will set the value for the image in the following way:

Now, if we submit this, the updatePost() method will be executed. In this method, we have to differ between the two cases, do we have a "string image" or not? Because if we got a "string image", we just want to send a JSON request, and if we got an object or file, we want to upload this as form data. It will be the put request, but the payload simply differs.

2) In the updatePost() method, we expect that this function will get our image, so we need to pass the image as an argument that can be of type File or string-like as:

3) Now, we will remove the post constant and check what it is. Before that, we will go back to our post create component's typescript file and pass the image to the updatePost method like as:

4) Now, we will check the type of the image using the typeof in the following way:

5) So, if we have an object, we will create our new postData using FormData() object and use the append() function for adding the fields in the following way:

6) The else section will be executed when our image is of type string. We will create a new postData which is of type post, which is simply a JavaScript object where we have title, content, id and imagePath property like this:

7) We will initialize the postData as a variable, not as a constant so that typescript can understand it like:

8) In the http request, we use postData in place of post, for the id we will simply use id rather than using post.id, and the post which we want to store as an updated post will be a post we have to create.

9) In the above code, we can see that there is an error with the imagePath. We need to do some work on the endpoint too. So, we will go back to our posts.js file and work on that put endpoint. We used the multer in the post endpoint, so we will simply copy the logic from here and add it to the put endpoint to extract files there.

10) Now, in our function, we want to store our uploaded file, but now that depends on whether we are getting a new file or just getting a string. First of all, we will go back to our mime-type validator, and at the beginning of it, we will add a check. We will check for the type of value. If it is of type string, we need to return an observable. We will import "of" from rxjs that are quick and easy to add or create an observable that will emit data immediately. Here, we will simply return of(null) like as:

11) When we initialize the post in ngOnInit, we are reaching out to getPost() in our service. In the getPost(), we are sending a get request to the URL for a given post but we are not getting the imagePath. We manipulate the http get request and expect the imagePath to be of type string like as:

12) Now, we will go to our post.js file, and here on our get request for that single post, we need to make some changes because it will contain our image path we are fetching from the database. So, the image path will be part of the response, but we then return it in the post-service, and we are not handling it in our post-create component. Previously, we set imagePath to null, so we will change it with the postData.imagePath like as:

13) Now, we go back to our post.js file and reach out to our put route. Here in the function, we will check for the request.file. If the file is there, we know a new fie was uploaded. So, here we will use the logic we used in the post route like as:

The default value of the imagePath will be obtained from the body.

14) We also use the imagePath too when we create a new post like this:

Everything is done. We will now try to edit a post by selecting a new file and without selecting a new file.

Now, we will try to update this New Image Post by selecting a new image.

When we click on the Save Post button, we will get the following error:

In order to solve this error, we need to go back to our posts.service.ts file, where we created the updatePost() method. Here, we need to append id in our postData also. So, we will append the id to the postData, save all the files and try again to update a post.

From the next section, we will start a new module. In this module, we will learn about the pagination and its concepts.

Download Complete Project(Updating data with image.zip)