Angular File Upload

The file upload is an essential component to make a form that store some image kind of data. It helps in applications using image upload or in the file sharing. This file-upload component uses file.io API for uploading file and in return it provides a shareable link. Furthermore, we can send get request to shareable link to get the file but for now, our only focus is on upload section so we only use the post method.

Approach:

1. Create a new angular app using following command-

   ng new angular-file-upload 

2. Move inside the app by using cd command-

   cd src/app/

3. Generate new component file-upload-

   ng g c file-upload/ 

4. Open src/app folder and start editing app.component.html file.
5. Create a service for file-upload component via command-

   ng g s file-upload/

6. Open src/app/file-upload folder and start editing file-upload.component.ts file.
7. Open src/app/file-upload/ and start editing file-upload.service.ts file.
8. Open src/app/file-upload and start editing file-upload.component.html file.
9. Open src/app/ and start editing app.module.ts file.
10. Now run this command to serve on localhost

    ng serve

11. Output:
12. • Before file selection:👁 Image
      
    • After file selection and clicking on button:👁 Image
      
    • After loading is completed:👁 Image
      
13. HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.