file-upload

src/app/file.service.ts

@@ -9,7 +9,9 @@ import { HttpClient } from '@angular/common/http';
 })
 export class FileService {
 
-  constructor(private httpClient: HttpClient) { }
+  baseApiUrl = "https://file.io";
+
+  constructor(private http: HttpClient) { }
 
   getFiles(): Observable<File[]> {
 
@@ -29,4 +31,11 @@ export class FileService {
     return of(ret);
   }
 
+  upload(file):Observable<any> { 
+
+    const formData = new FormData(); 
+    formData.append("file", file, file.name); 
+    return this.http.post(this.baseApiUrl, formData) 
+  }
+
 }

src/app/file/file.component.html

 <div id="tray">
     <button style="margin-right: 10px;" routerLink="/arena" routerLinkActive="active">Create A File</button>
-    <button style="margin-left: 10px;">Upload A File</button>
+    <button (click)="onClick()" id="myBtn" style="margin-left: 10px;">Upload A File</button>
 </div>
 
 <div>
@@ -18,3 +18,35 @@
 
   <!-- <button [routerLink]="['/arena', problem.id]" class="attempt">Attempt</button> -->
 </div>
+
+<div id="myModal" class="modal">
+
+  <!-- Modal content -->
+  <div class="modal-content">
+    <span (click)="onClick2()" class="close">&times;</span>
+
+    <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> 
+    
+  </div>
+
+</div>
\ No newline at end of file

src/app/file/file.component.scss

@@ -34,3 +34,41 @@
         margin: 10px;
     }
 }
+
+.modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 100; /* Sit on top */
+  padding-top: 100px; /* Location of the box */
+  left: 0;
+  top: 0;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0,0,0); /* Fallback color */
+  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+}
+
+/* Modal Content */
+.modal-content {
+  background-color: #fefefe;
+  margin: auto;
+  padding: 20px;
+  border: 1px solid #888;
+  width: 80%;
+}
+
+/* The Close Button */
+.close {
+  color: #aaaaaa;
+  float: right;
+  font-size: 28px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: #000;
+  text-decoration: none;
+  cursor: pointer;
+}

src/app/file/file.component.ts

@@ -11,6 +11,10 @@ export class FileComponent implements OnInit {
 
   constructor(private fileService: FileService) { }
   files: File[];
+
+  // File upload variables
+  shortLink: string = ""; 
+  loading: boolean = false; // Flag variable 
   fileToUpload: File = null;
 
   ngOnInit(): void {
@@ -21,4 +25,34 @@ export class FileComponent implements OnInit {
     this.fileService.getFiles()
       .subscribe(files => this.files = files);
   }
+
+  onClick(): void {
+    var modal = document.getElementById("myModal");
+    modal.style.display = "block";
+  }
+
+  onClick2(): void {
+    var modal = document.getElementById("myModal");
+    modal.style.display = "none";
+  }
+
+  onChange(event) { 
+    this.fileToUpload = event.target.files[0]; 
+  } 
+
+  onUpload() { 
+    this.loading = !this.loading; 
+    console.log(this.fileToUpload); 
+
+    this.fileService.upload(this.fileToUpload).subscribe( 
+      (event: any) => { 
+        if (typeof (event) === 'object') { 
+
+          this.shortLink = event.link; 
+          this.loading = false; 
+        } 
+      } 
+    ); 
+  } 
+
 }