File upload popup ui

src/app/file/file.component.html

 <div id="tray">
-    <button style="margin-right: 10px;" routerLink="/arena/file/new" routerLinkActive="active">Create A File</button>
-    <button (click)="onClick()" id="myBtn" style="margin-left: 10px;">Upload A File</button>
+  <button routerLink="/arena/file/new" routerLinkActive="active" style="margin-right: 10px;">Create A File</button>
+  <button (click)="uploadPopupActive = true" id="myBtn" style="margin-left: 10px;">Upload A File</button>
 </div>
 
 <div class="container">
@@ -16,34 +16,51 @@
 
 </div>
 
-<div id="myModal" class="modal">
+<!--<div id="myModal" class="modal" [class.open]="uploadPopupActive">-->
 
-  <!-- Modal content -->
-  <div class="modal-content">
-    <span (click)="onClick2()" class="close">&times;</span>
+<!--  &lt;!&ndash; Modal content &ndash;&gt;-->
+<!--  <div class="modal-content">-->
+<!--    <span (click)="onClick2()" class="close">&times;</span>-->
 
-    <div class="text-center">
-      <input class="form-control" type="file"
-              (change)="onChange($event)">
+<!--    <div class="text-center">-->
+<!--      <input class="form-control" type="file"-->
+<!--              (change)="onChange($event)">-->
 
-      <button (click)="onUpload()"
-          class="btn btn-success">
-          Upload
-      </button>
-    </div>
+<!--      <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>
+<!--    &lt;!&ndash; Shareable short link of  uoloaded file &ndash;&gt;-->
+<!--    <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>
+<!--    &lt;!&ndash;Flag variable is used here&ndash;&gt;-->
+<!--    <div class="container" *ngIf="loading">-->
+<!--        <h3>Loading ...</h3>-->
+<!--    </div>-->
 
-  </div>
+<!--  </div>-->
+
+<!--</div>-->
 
+<div [class.open]="uploadPopupActive" id="file-upload-cover"></div>
+
+<div [class.open]="uploadPopupActive" id="file-upload-popup">
+  <p>Upload a file:</p>
+  <input id="file-upload-input" type="file" (change)="onChange($event)">
+  <div style="margin-top: 10px" *ngIf="shortLink !== ''">
+    <a target="_blank" href="{{shortLink}}">Link to last upload</a>
+  </div>
+  <p *ngIf="!loading">
+    <button id="upload-cancel-btn" (click)="uploadPopupActive = false;">Close</button>
+    <button id="file-upload-btn" (click)="onUpload()">Upload</button>
+  </p>
+  <p *ngIf="loading" style="margin-top: 20px; text-align: center">
+    Uploading...
+  </p>
 </div>

src/app/file/file.component.scss

@@ -39,41 +39,66 @@
   }
 }
 
-.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.5); /* Black w/ opacity */
-}
-
-/* Modal Content */
-.modal-content {
-  background: var(--bgcolor);
-  margin: auto;
+#file-upload-popup {
+  position: fixed;
+  top: calc(40vh - 100px);
+  width: 30vw;
+  left: calc(35vw - 20px);
+  border-bottom: 1px solid #ddf;
   padding: 20px;
-  border: 2px solid var(--color);
-  border-radius: 10px;
-  width: 80%;
+  background: #224;
+  transform: scale(0);
+  opacity: 0;
+  transition: all 0.25s;
+  z-index: 1000;
+
+  a {
+    font-size: 0.7em;
+  }
+
+  &.open {
+    transform: none;
+    opacity: 1;
+  }
+
+  #file-upload-input {
+    font-family: inherit;
+    position: relative;
+
+    &::-webkit-file-upload-button {
+      background: transparent;
+      border: none;
+      outline: none;
+      border-bottom: 1px solid #ddf;
+      padding: 5px 10px;
+      font-family: Lato, sans-serif;
+      color: #ddf;
+      cursor: pointer;
+    }
+  }
+
+  p {
+    margin: 0 10px 20px 0;
+  }
 }
 
-/* The Close Button */
-.close {
-  color: var(--color);
+#file-upload-btn, #upload-cancel-btn {
   float: right;
-  font-size: 28px;
-  font-weight: bold;
+  margin: 10px 2px 0 2px;
 }
 
-.close:hover,
-.close:focus {
-  color: white;
-  text-decoration: none;
-  cursor: pointer;
+#file-upload-cover {
+  z-index: 999;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: none;
+  transition: all 0.25s;
+
+  &.open {
+    display: block;
+    background: #0015;
+  }
 }

src/app/file/file.component.ts

-import { Component, OnInit } from '@angular/core';
-import { File } from '../file';
-import { FileService } from '../file.service';
+import {Component, OnInit} from '@angular/core';
+import {File} from '../file';
+import {FileService} from '../file.service';
 
 @Component({
   selector: 'app-file',
@@ -9,13 +9,15 @@ import { FileService } from '../file.service';
 })
 export class FileComponent implements OnInit {
 
-  constructor(private fileService: FileService) { }
   files: File[];
-
   // File upload variables
-  shortLink: string = ""; 
-  loading: boolean = false; // Flag variable 
+  shortLink = '';
+  loading = false; // Flag variable
   fileToUpload: File = null;
+  uploadPopupActive = false;
+
+  constructor(private fileService: FileService) {
+  }
 
   ngOnInit(): void {
     this.getFiles();
@@ -26,35 +28,24 @@ export class FileComponent implements OnInit {
       .subscribe(files => this.files = files);
   }
 
-  onClick(): void {
-    var modal = document.getElementById("myModal");
-    modal.style.display = "block";
+  onChange(event): void {
+    this.fileToUpload = event.target.files[0];
   }
 
-  onClick2(): void {
-    var modal = document.getElementById("myModal");
-    modal.style.display = "none";
-    this.shortLink = "";
-    this.loading = false;
+  onUpload(): void {
+    this.loading = true;
+    console.log(this.fileToUpload);
+
+    this.fileService.upload(this.fileToUpload).subscribe(
+      (event: any) => {
+        if (typeof (event) === 'object') {
+          this.fileToUpload = null;
+          (document.getElementById('file-upload-input') as HTMLInputElement).value = '';
+          this.shortLink = event.link;
+          this.loading = false;
+        }
+      }
+    );
   }
 
-  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; 
-        } 
-      } 
-    ); 
-  } 
-
 }