Working with the File URL in MEAN Stack
In our previous section, we successfully added the upload functionality to our angular. The file upload is working properly, but we still got a lot of work to do. On the server-side code in posts.js on our routes, we have our multer code. But we are not using the file we stored, and we are not doing anything with that file. We are not storing the path in the database, and also we are not passing the path back to the user.
Now, to do that, we can utilize something multer does for us. It gives us the information about the file that is stored in the request body in our handler function.
1) So, when we create a new post that we want to store in the database, we can also store an image path. This image path is something our model doesn’t expect. So, we will go back to our post model and add a new field to it. We will add the imagePath field, which is of type string that is required.
It will be the path to the file on our backend.
2) After adding the imagePath field to the post model, we will go back to our post route, where we are creating a post. We will add another field, i.e., imagePath, and it should be a URL of that file which we want to store.
We will get the URL of our server and store it in a URL constant for constructing that URL. We can get that from the request, and there is a protocol property which returns whether we are accessing the server with HTTP or HTTPS, and then we will add “://” to create a full URL and then we can get our current host in the following way:
3) This constructs the URL to our server, and we want to have this because our imagePath will be our URL and then “/images/”
The “/images” is where we store our files. We store it in backend images, but we will configure this folder to be accessible directly after our domain.
4) So, we just want to be able to enter our “domain/images,” and then we add the filename, and that is the part multer does for us.
This is the image path we want to store in the database.
5) We return a response, and there, we don’t just want to return the post ID. We want to return the entire post. So, we will create a post that is the JavaScript object to return in the following way:
One of the shortest ways to do this is to use a next-gen JavaScript feature to create a new object. Then we use the spread operator to copy all properties of another object and then we simply add or override some selected properties like this:
6) Now, we will use that on the client in the post.service.ts file. We will reach out to the addPost(), and here the data we get back will be a post property of type Post. After that, we extract the id of the post, title, and content like this:
7) The imagePath is something our frontend model doesn’t reflect. So, we will go to the post.model.ts file and add the imagePath here like as:
8) Now, we have to use this when we create a new post in the posts.service.ts file. Here, we will set imagePath to responseData.post.imagePath like as:
9) We will get an error in the updarePost() method, and here we don’t have imagePath yet, so we will set it to null now.
10) In the same way, we will also get an error in our post-create.component.ts file. Here, we will also set the imagePath property to null now.
Now, we are getting back that post information, and we are using it to store in our post on the frontend of the newly created post.
11) Now, when we are getting the posts that happen when we visit our messages page, we also transform posts. We will also set the imagePath property like as:
So, now we are adding this imagePath on the frontend too, we are returning the data from the backend. In the next section, we will make sure that we rendered this on the screen or on the frontend.