Javatpoint Logo
Javatpoint Logo

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.


Adding upload functionality in angular in MEAN Stack

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:


Adding upload functionality in angular in MEAN Stack

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:


Adding upload functionality in angular in MEAN Stack

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.


Adding upload functionality in angular in MEAN Stack

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.


Adding upload functionality in angular in MEAN Stack

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:


Adding upload functionality in angular in MEAN Stack

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:


Adding upload functionality in angular in MEAN Stack

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:


Adding upload functionality in angular in MEAN Stack

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

Adding upload functionality in angular in MEAN Stack
Adding upload functionality in angular in MEAN Stack
Adding upload functionality in angular in MEAN Stack

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.

Adding upload functionality in angular in MEAN Stack

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

Adding upload functionality in angular in MEAN Stack
Adding upload functionality in angular in MEAN Stack

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.






Youtube For Videos Join Our Youtube Channel: Join Now

Help Others, Please Share

facebook twitter pinterest

Learn Latest Tutorials


Preparation


Trending Technologies


B.Tech / MCA