Skip to content

S
sfcode
Commit b3aed7ac authored by Ayush's avatar Ayush
Browse files
Options

File upload popup ui

parent 5f0b478d
Show whitespace changes
Inline Side-by-side
Showing with 123 additions and 90 deletions
src/app/file/file.component.html
View file @ b3aed7ac
<div id="tray"> <div id="tray">
<button style="margin-right: 10px;" routerLink="/arena/file/new" routerLinkActive="active">Create A File</button> <button routerLink="/arena/file/new" routerLinkActive="active" style="margin-right: 10px;">Create A File</button>
<button (click)="onClick()" id="myBtn" style="margin-left: 10px;">Upload A File</button> <button (click)="uploadPopupActive = true" id="myBtn" style="margin-left: 10px;">Upload A File</button>
</div> </div>
<div class="container"> <div class="container">
...@@ -16,34 +16,51 @@ ...@@ -16,34 +16,51 @@
</div> </div>
<div id="myModal" class="modal"> <!--<div id="myModal" class="modal" [class.open]="uploadPopupActive">-->
<!-- Modal content --> <!-- &lt;!&ndash; Modal content &ndash;&gt;-->
<div class="modal-content"> <!-- <div class="modal-content">-->
<span (click)="onClick2()" class="close">&times;</span> <!-- <span (click)="onClick2()" class="close">&times;</span>-->
<div class="text-center"> <!-- <div class="text-center">-->
<input class="form-control" type="file" <!-- <input class="form-control" type="file"-->
(change)="onChange($event)"> <!-- (change)="onChange($event)">-->
<button (click)="onUpload()" <!-- <button (click)="onUpload()"-->
class="btn btn-success"> <!-- class="btn btn-success">-->
Upload <!-- Upload-->
</button> <!-- </button>-->
</div> <!-- </div>-->
<!-- Shareable short link of uoloaded file --> <!-- &lt;!&ndash; Shareable short link of uoloaded file &ndash;&gt;-->
<div class="container text-center jumbotron" <!-- <div class="container text-center jumbotron"-->
*ngIf="shortLink"> <!-- *ngIf="shortLink">-->
<h2> Visit Here</h2> <!-- <h2> Visit Here</h2>-->
<a href="{{shortLink}}">{{shortLink}}</a> <!-- <a href="{{shortLink}}">{{shortLink}}</a>-->
</div> <!-- </div>-->
<!--Flag variable is used here--> <!-- &lt;!&ndash;Flag variable is used here&ndash;&gt;-->
<div class="container" *ngIf="loading"> <!-- <div class="container" *ngIf="loading">-->
<h3>Loading ...</h3> <!-- <h3>Loading ...</h3>-->
</div> <!-- </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> </div>
src/app/file/file.component.scss
View file @ b3aed7ac
...@@ -39,41 +39,66 @@ ...@@ -39,41 +39,66 @@
} }
} }
.modal { #file-upload-popup {
display: none; /* Hidden by default */ position: fixed;
position: fixed; /* Stay in place */ top: calc(40vh - 100px);
z-index: 100; /* Sit on top */ width: 30vw;
padding-top: 100px; /* Location of the box */ left: calc(35vw - 20px);
left: 0; border-bottom: 1px solid #ddf;
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;
padding: 20px; padding: 20px;
border: 2px solid var(--color); background: #224;
border-radius: 10px; transform: scale(0);
width: 80%; 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 */ #file-upload-btn, #upload-cancel-btn {
.close {
color: var(--color);
float: right; float: right;
font-size: 28px; margin: 10px 2px 0 2px;
font-weight: bold;
} }
.close:hover, #file-upload-cover {
.close:focus { z-index: 999;
color: white; position: fixed;
text-decoration: none; top: 0;
cursor: pointer; left: 0;
width: 100vw;
height: 100vh;
display: none;
transition: all 0.25s;
&.open {
display: block;
background: #0015;
}
} }
src/app/file/file.component.ts
View file @ b3aed7ac
import { Component, OnInit } from '@angular/core'; import {Component, OnInit} from '@angular/core';
import { File } from '../file'; import {File} from '../file';
import { FileService } from '../file.service'; import {FileService} from '../file.service';
@Component({ @Component({
selector: 'app-file', selector: 'app-file',
...@@ -9,13 +9,15 @@ import { FileService } from '../file.service'; ...@@ -9,13 +9,15 @@ import { FileService } from '../file.service';
}) })
export class FileComponent implements OnInit { export class FileComponent implements OnInit {
constructor(private fileService: FileService) { }
files: File[]; files: File[];
// File upload variables // File upload variables
shortLink: string = ""; shortLink = '';
loading: boolean = false; // Flag variable loading = false; // Flag variable
fileToUpload: File = null; fileToUpload: File = null;
uploadPopupActive = false;
constructor(private fileService: FileService) {
}
ngOnInit(): void { ngOnInit(): void {
this.getFiles(); this.getFiles();
...@@ -26,30 +28,19 @@ export class FileComponent implements OnInit { ...@@ -26,30 +28,19 @@ export class FileComponent implements OnInit {
.subscribe(files => this.files = files); .subscribe(files => this.files = files);
} }
onClick(): void { onChange(event): void {
var modal = document.getElementById("myModal");
modal.style.display = "block";
}
onClick2(): void {
var modal = document.getElementById("myModal");
modal.style.display = "none";
this.shortLink = "";
this.loading = false;
}
onChange(event) {
this.fileToUpload = event.target.files[0]; this.fileToUpload = event.target.files[0];
} }
onUpload() { onUpload(): void {
this.loading = !this.loading; this.loading = true;
console.log(this.fileToUpload); console.log(this.fileToUpload);
this.fileService.upload(this.fileToUpload).subscribe( this.fileService.upload(this.fileToUpload).subscribe(
(event: any) => { (event: any) => {
if (typeof (event) === 'object') { if (typeof (event) === 'object') {
this.fileToUpload = null;
(document.getElementById('file-upload-input') as HTMLInputElement).value = '';
this.shortLink = event.link; this.shortLink = event.link;
this.loading = false; this.loading = false;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment