Hands-on Angular: Connect to an API

3.2 Using Progress Events: Part 2

Hi folks, in this lesson, we can pick up right where we left off in the last lesson. And wire up the new PUT request from our API service, to connect to the custom PUT method that we added to the in-memory data service, let's get started. So first of all, let's open up the API service, and we'll need to import some more things in this file from Angular. And now let's add a new method to make a PUT request. In keeping with the other methods in this file, let's call it putData. So this method will receive a file object, and it will also return an observable, like the other methods in the file. So inside this method, we can create a formData object, and that is commonly used to send files to the server. So we just need to create a new formData object, and append the file to be uploaded to it. Using the keyword file as the type of thing that we want to append, the file itself, and the name of the file. This method will need to return an observable, but we'll need to handle the custom response from the in-memory API. So we can't just use the Angular HTTP client's built-in PUT method. Instead, we'll need to create our own observable, just like we did in the in-memory data service. This observable will also receive the success handler used when subscribing to the putData method. Inside the arrow function, we'll first need to create a request. This time, we want to create a generic request using the HttpRequest constructor. This is similar to the built-in HTTP methods, except that we need to specify the type of request using the first argument, which in this case will be PUT. Then we can specify the URL to make the request to as the second argument. Which I've put as api/upload, because this is likely what the real API URL would be. Although, for this example, it really doesn't matter, because we're overriding the PUT method on the in-memory database anyway. The third argument is the data that we want to send to the server. In this case, that's the formData variable that we created. And the fourth argument this time is the options to configure the request. In this case, I've set reportProgress to true, which is what we would do if we were using a real API. Again, in this example, it doesn't matter, because we are overriding the PUT method with our own custom implementation, which is going to report progress anyway. This is what we would do for a real request, so I've included it here. So now we can issue this request and subscribe to it. We can use the generic request method of the HTTP client to issue our custom request. And we subscribe to it directly here, in order to handle the fake progress events coming from our overridden PUT method. The success arrow function passed here will receive the progress events from our fake back-end. Inside the handler, then, we can check the type of event, and handle it accordingly. The event will be of the type UploadProgress, right up until the very last event, when the fake back-end signals that the upload is complete. In this case, we can call the next method of the subscriber, passing it the loaded property from the event. And then to handle the last HTTP response event, we can complete the observable stream by calling the complete method. So now, we just need to add a subscription for the putData method that we just added to the API service. We can do that in the empty onSubmitUpload method that we added to the app component in the last lesson. The success handler passed to the subscribe method will be receiving the amount of progress from the putData method. So we just need to store this in the progressWidth property that the inner span in the template is linked to. So we should now be able to test out this new method. We will need a file to upload, you can use any file that you've got hanging around. It shouldn't make a difference whether the file is big or small, because we're handling this in a custom way anyway. So let's go back to the browser now. And we can see that the Upload a File link has been added to the header. Let's click on that, and we'll need to choose a file, first of all. And let's just use the README file from the repository itself. And we can see that we've got an error here, let's see what's happening. So let's go back to the editor now. And what we wanna do here, actually, instead of setting the file to be uploaded to the form itself, let's add a new property called uploadFile, And it looks like our progress events are working. So in this lesson, we completed the file upload example by adding a new method to make a custom PUT request to the API service. And then subscribing to this from the app component, thanks for watching.