add some very crude file uploading

src-ui/src/app/app.module.ts

@@ -32,6 +32,7 @@ import { FilterEditorComponent } from './components/filter-editor/filter-editor.
 import { AuthInterceptor } from './services/auth.interceptor';
 import { DocumentCardLargeComponent } from './components/document-list/document-card-large/document-card-large.component';
 import { DocumentCardSmallComponent } from './components/document-list/document-card-small/document-card-small.component';
+import { NgxFileDropModule } from 'ngx-file-drop';
 
 @NgModule({
   declarations: [
@@ -67,7 +68,8 @@ import { DocumentCardSmallComponent } from './components/document-list/document-
     NgbModule,
     HttpClientModule,
     FormsModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    NgxFileDropModule
   ],
   providers: [
     DatePipe,

src-ui/src/app/components/dashboard/dashboard.component.html

@@ -1,29 +1,26 @@
 
 <app-page-header title="Dashboard">
-  <button type="button" class="btn btn-sm btn-outline-secondary">
-    Show Documents with Tag
-  </button>
 </app-page-header>
 
-<p>This space for rent...</p>
+<p>... This space for rent</p>
+<p>This page will provide more information in the future, such as access to recently scanned documents, etc.</p>
 
 <div class='row'>
-  <div class="col">
-    <h4>Recent Documents</h4>
-    <p>Recent docs</p>
-  </div>
-</div>
-<div class='row'>
-  <div class="col">
-    <h4>Documents with tag <span class="badge badge-danger">TODO</span></h4>
-    <p>...</p>
-  </div>
-</div>
-<div class='row'>
-  <div class="col-4">
+  <div class="col-lg">
     <h4>Statistics</h4>
+    <p>None yet.</p>
   </div>
-  <div class="col-8">
+  <div class="col-lg">
     <h4>Upload new Document</h4>
+    <form>
+      <ngx-file-drop
+        dropZoneLabel="Drop documents here"
+        (onFileDrop)="dropped($event)"
+        (onFileOver)="fileOver($event)"
+        (onFileLeave)="fileLeave($event)"
+        dropZoneClassName="bg-light mt-4 card">
+
+      </ngx-file-drop>
+    </form>
   </div>
 </div>

src-ui/src/app/components/dashboard/dashboard.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { FileSystemDirectoryEntry, FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
+import { DocumentService } from 'src/app/services/rest/document.service';
 
 @Component({
   selector: 'app-dashboard',
@@ -7,9 +9,37 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DashboardComponent implements OnInit {
 
-  constructor() { }
+  constructor(private documentService: DocumentService) { }
 
   ngOnInit(): void {
   }
 
+  public fileOver(event){
+    console.log(event);
+  }
+ 
+  public fileLeave(event){
+    console.log(event);
+  }
+ 
+  public dropped(files: NgxFileDropEntry[]) {
+    for (const droppedFile of files) {
+ 
+      // Is it a file?
+      if (droppedFile.fileEntry.isFile) {
+        const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
+        console.log(fileEntry)
+        fileEntry.file((file: File) => {
+          console.log(file)
+          const formData = new FormData()
+          formData.append('document', file, file.name)
+          this.documentService.uploadDocument(formData).subscribe(result => {
+            console.log(result)
+          }, error => {
+            console.error(error)
+          })
+        });
+      }
+    }
+  }
 }

src-ui/src/app/services/rest/document.service.ts

@@ -26,4 +26,8 @@ export class DocumentService extends AbstractPaperlessService<PaperlessDocument>
     return this.getResourceUrl(id, 'download') + `?auth_token=${this.auth.getToken()}`
   }
 
+  uploadDocument(formData) {
+    return this.http.post(this.getResourceUrl(null, 'post_document'), formData)
+  }
+
 }