After successfully learning how to upload files, the logical next step is to learn how to download them as well. As in the previous article , for downloading purposes, we are going to work with pictures.
Feel free to apply this implementation logic to other types of files. In this part, since we are adding new functionality, we will first adjust the current implementation.
The adjustments will cover the addition of a service that contains all the desired logic for handling files in general. That way, we are improving readability and opening opportunities for extending the service in the future with more file handling operations. Currently, we have an upload button in our form for creating a user. When we create a user, the uploaded picture becomes the profile picture. For the sake of simplicity, we will reuse the current implementation and extend it to implement file download.
That said, the pictures that we upload during user creation will be the files that we are going to download after. That way we are wrapping up the file handling logic into one controller that contains endpoints for every operation. Given that we are focusing on a file download, the next step is to extend the controller with a new endpoint for download operation.
At the moment, the method will only return a successful result with a corresponding message:. This step was not necessary, but it will help us in knowing which end-point we actually want to execute from the client-side. For the time being, we will leave the download operation to return only a successful result and, in the meantime, start with the implementation of the client-side.
That way, we can have a clearer view of what are the potential needs of a user and how to modify the API to fulfill those needs. Changing the name to UploadController and adding Route, its end-point has changed as well, therefore we have to update the code in the upload.
Now try to run the application again and confirm that it is working as if nothing has changed! Since it is running smoothly, we can continue our refactoring journey. It only helps us push the folders that we use frequently to the top of the project tree so that we can easily locate them.
The next step is to move the logic for sending an upload request from the upload. And then inject the service to call the new method in upload. Now we can make sure once again that everything works as expected. With this, we are concluding the refactoring part and can safely move on to adding a download component to our client-side project. While looking at the file. That said, we can extract it in a separate variable and access it through interpolation:. After the successful refactoring of the FileService, we will create a component that consumes the service and downloads our file.
We will name it, respectfully, DownloadComponent, to match the one for upload that we already have. Angular CLI steps in once more with its command for a component generation:. This time we can skip the creation of the folder because the CLI will do that for us.
Typically you can simply introduce a link to the endpoint of the file download into the page and this will work just fine. However, if you use authentication via bearer token etc. To see how to add a bearer token to all http requests in Angular see one of my previous articles:.
First of all we need to download the file as a blob object. Therefore we introduce a new service method. Keep a close look at the response type here. Unfortunately simply setting this to blob leads to a TypeScript error:. I saw a lot of example code that worked with window. So this solution did not work for me. Then you just call the click event of that link and the download will be started.
Obviously it is also easy to put in some spinner code etc…. Line Here in this line, we are calling the download service with two parameters fileName and fileType. Line Here in this line, after getting successful api call, we are calling saveAs function from file saver service which we have install above.
There are two parameters in saveAs function. The one success is for data and the other one fileName is for file name. Do you have any suggestions? So, give the file name and then the error will be gone. Very Thanks mebakar error is this is your api root url return this. I am using swagger for APIs in my project.
Blob in angular 8. Your email address will not be published. Notify me of follow-up comments by email. Notify me of new posts by email.
0コメント