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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <app-file-upload></app-file-upload>

    chevron_right

    
    

  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.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import { Component, OnInit } from '@angular/core';
    import { FileUploadService } from './file-upload.service';
      
    @Component({
        selector: 'app-file-upload',
        templateUrl: './file-upload.component.html',
        styleUrls: ['./file-upload.component.css']
    })
    export class FileUploadComponent implements OnInit {
      
        // Variable to store shortLink from api response
        shortLink: string = "";
        loading: boolean = false; // Flag variable
        file: File = null; // Variable to store file
      
        // Inject service 
        constructor(private fileUploadService: FileUploadService) { }
      
        ngOnInit(): void {
        }
      
        // On file Select
        onChange(event) {
            this.file = event.target.files[0];
        }
      
        // OnClick of button Upload
        onUpload() {
            this.loading = !this.loading;
            console.log(this.file);
            this.fileUploadService.upload(this.file).subscribe(
                (event: any) => {
                    if (typeof (event) === 'object') {
      
                        // Short link via api response
                        this.shortLink = event.link;
      
                        this.loading = false; // Flag variable 
                    }
                }
            );
        }
    }

    chevron_right

    
    

  7. Open src/app/file-upload/ and start editing file-upload.service.ts file.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import { Injectable } from '@angular/core';
    import {HttpClient} from '@angular/common/http';
    import {Observable} from 'rxjs';
    @Injectable({
      providedIn: 'root'
    })
    export class FileUploadService {
        
      // API url
      baseApiUrl = "https://file.io"
        
      constructor(private http:HttpClient) { }
      
      // Returns an observable
      upload(file):Observable<any> {
      
          // Create form data
          const formData = new FormData(); 
            
          // Store form name as "file" with file data
          formData.append("file", file, file.name);
            
          // Make http post request over api
          // with formData as req
          return this.http.post(this.baseApiUrl, formData)
      }
    }

    chevron_right

    
    

  8. Open src/app/file-upload and start editing file-upload.component.html file.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <div class="text-center">
        <input class="form-control" type="file" 
                (change)="onChange($event)">
      
        <button (click)="onUpload()" 
            class="btn btn-success">
            Upload
        </button>
    </div>
      
    <!-- Shareable short link of  uoloaded file -->
    <div class="container text-center jumbotron"
        *ngIf="shortLink">
        <h2> Visit Here</h2>
        <a href="{{shortLink}}">{{shortLink}}</a>
    </div>
      
    <!--Flag variable is used here-->
    <div class="container" *ngIf="loading">
        <h3>Loading ...</h3>
    </div>

    chevron_right

    
    

  9. Open src/app/ and start editing app.module.ts file.
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    import { BrowserModule } from 
        '@angular/platform-browser';
    import { NgModule } from '@angular/core';
      
    import { FileUploadComponent } from 
        './file-upload/file-upload.component';
      
    import { AppComponent } from './app.component';
    import {HttpClientModule} from 
        '@angular/common/http';
    @NgModule({
      declarations: [
        AppComponent,
        FileUploadComponent,
      ],
      imports: [
        BrowserModule,
        HttpClientModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

    chevron_right

    
    

  10. Now run this command to serve on localhost
    ng serve
  11. Output:

    • Before file selection:
    • After file selection and clicking on button:
    • After loading is completed:

    full-stack-img




    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.