Adding upload functionality in angular in MEAN Stack

In our previous section, we successfully added the uploading functionality on the server, but we didn't test it because to test our server-side uploading functionality, we need to add the upload functionality on the angular. So, in this section, we will add the uploading functionality to our frontend or angular. We will use the following steps to do this:

1) We will go back to our posts.service.ts file, and here, when we are adding a post, we will now have to upload our file. We want to send a request that includes both our normal data and the file. Previously, we used the post method and attached the post, i.e., object, and that would automatically send it as JSON to the backend. We know that the JSON can't include a file, so instead of sending JSON data, we will send the form data. We will remove the post property of type Post, and instead of this, we will create a new constant, i.e., postData. This constant will be a new FormData object.

2) This is an object provided by JavaScript, and FormData is basically a data format that allows us to combine text values and blobs or file values. We use it by accessing postData, and we append fields to it by using the append() We will add the title and the content field using the append() function in the following way:

3) Now, we need to append our image. We will use the append() function, and we will give this a name, i.e., image. This 'image' is the property we will try to access on the backend. To pass the image, we need to add an extra argument in the addPost() function, i.e., the image of type File to get our image and pass in the append() function like as:

4) We need to pass an extra argument in this append() function, and that is the file name we provide to the backend. We want to use the title the user entered for the post and keep in mind, this will be part of the file name as it is saved on the backend, so it is not insignificant.

5) We will simply pass the postData in the angular http request, and the angular will automatically set the right headers, detect that we got non JSON data, and the angular HTTP client will handle all that.

6) Now, on the subscription, we need to make sure that we still save a post. For that, we will create our post by creating a new post property of type Post and assign id, title, and content like:

7) Now, the 'this' which is missing here and that we are not passing the image to the addPost() method. So, we will go back to our post-create.component.ts where we are calling this function. We forward this by accessing this.form.value.image like as:

If we try to upload the file and save the post, the post will be saved successfully, but the image will not be added to the images folder.

8) This problem will be saved by changing the way of passing the storage into the multer function in the js file. We need to pass the JavaScript object in the multer() function. This object has a storage property, which should get our storage configuration like this:

Now, we will try to upload the file and save the post.

Everything is working fine right now, but still, we are missing a couple of things. We are not telling the client where this is stored because we need to return this, and we also want to check whether we are able to upload invalid data.

9) In our post-create.component.ts file, we temporarily disabled our frontend validation to submit any file that we ignore the result of our mime type validation.

Now, if we save this and try to add a new post after uploading a file, we will get a big error.

We got the invalid mime type error, so this validation is working properly. We are not handling the error gracefully on the client, and we will do this later. We remove the comment from the frontend validation, but this shows that the validation is working on the server on the client, and we are able to upload the file.

In the next section, we will make sure that we also pass back that file information to the client so that we can use it.