add: storage

Author: ElecTreeFrying

src/app/storage/component/delete-file/delete-file.component.html

@@ -1,3 +1,14 @@
-<p>
-  delete-file works!
-</p>
+<div id="wrapper">
+  <div>
+    <h2>Delete file</h2>
+    <div class="divider">
+      <mat-divider></mat-divider>
+    </div>
+
+    <div id="content">
+      <div>
+      </div>
+
+    </div>
+  </div>
+</div>

src/app/storage/component/delete-file/delete-file.component.scss

@@ -0,0 +1,11 @@
+#wrapper {
+
+  margin-bottom: 7vh;
+  margin-top: -10px;
+
+  .divider {
+    width: 80%;
+    margin-bottom: 3vh;
+  }
+
+}

src/app/storage/component/download-file/download-file.component.html

@@ -1,3 +1,14 @@
-<p>
-  download-file works!
-</p>
+<div id="wrapper">
+  <div>
+    <h2>Download file</h2>
+    <div class="divider">
+      <mat-divider></mat-divider>
+    </div>
+
+    <div id="content">
+      <div>
+      </div>
+
+    </div>
+  </div>
+</div>

src/app/storage/component/download-file/download-file.component.scss

@@ -0,0 +1,11 @@
+#wrapper {
+
+  margin-bottom: 7vh;
+  margin-top: -10px;
+
+  .divider {
+    width: 80%;
+    margin-bottom: 3vh;
+  }
+
+}

src/app/storage/component/upload-file/upload-file.component.html

@@ -1,3 +1,16 @@
-<p>
-  upload-file works!
-</p>
+<div id="wrapper">
+  <div>
+    <h2>Upload file</h2>
+    <div class="divider">
+      <mat-divider></mat-divider>
+    </div>
+
+    <div id="content">
+      <div>
+        <input type="file" (change)="onChange($event)">
+        <button mat-raised-button (click)="upload()" disabled>UPLOAD</button>
+      </div>
+
+    </div>
+  </div>
+</div>

src/app/storage/component/upload-file/upload-file.component.scss

@@ -0,0 +1,11 @@
+#wrapper {
+
+  margin-bottom: 7vh;
+  margin-top: -10px;
+
+  .divider {
+    width: 80%;
+    margin-bottom: 3vh;
+  }
+
+}

src/app/storage/component/upload-file/upload-file.component.ts

@@ -1,15 +1,27 @@
 import { Component, OnInit } from '@angular/core';
 
+import { StorageService } from '../../storage.service';
+
 @Component({
   selector: 'app-upload-file',
   templateUrl: './upload-file.component.html',
   styleUrls: ['./upload-file.component.scss']
 })
 export class UploadFileComponent implements OnInit {
 
-  constructor() { }
+  file: File;
+
+  constructor(private storage: StorageService) { }
 
   ngOnInit() {
   }
 
+  onChange(event: Event) {
+    this.file = event.target['files'][0];
+  }
+
+  upload() {
+    this.storage.uploadFile(this.file);
+  }
+
 }

src/app/storage/storage.md

@@ -2,7 +2,10 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { StorageRoutingModule } from './storage-routing.module';
 import {
-  MatCardModule
+  MatCardModule,
+  MatDividerModule,
+  MatButtonModule,
+  MatIconModule,
 } from '@angular/material';
 
 import { StorageComponent } from './component/storage.component';
@@ -16,7 +19,10 @@ import { StorageService } from './storage.service';
   imports: [
     CommonModule,
     StorageRoutingModule,
-    MatCardModule
+    MatCardModule,
+    MatDividerModule,
+    MatButtonModule,
+    MatIconModule,
   ],
   declarations: [
     StorageComponent,

src/app/storage/storage.module.ts

@@ -1,9 +1,26 @@
 import { Injectable } from '@angular/core';
+import {
+  AngularFireStorage,
+  AngularFireUploadTask
+} from 'angularfire2/storage';
 
 @Injectable({
   providedIn: 'root'
 })
 export class StorageService {
 
-  constructor() { }
+  constructor(private storage: AngularFireStorage) { }
+
+  uploadFile(file: File) {
+    this.storage.ref(file.name).put(file);
+  }
+
+  deleteFile(file: File) {
+    this.storage.ref(file.name).delete();
+  }
+
+  getDownloadURL(file: File) {
+    return this.storage.ref(file.name).getDownloadURL();
+  }
+
 }