add some very crude file uploading

src-ui/package-lock.json

@@ -2167,11 +2167,6 @@
         "semver-intersect": "1.4.0"
       }
     },
-    "@types/file-saver": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@types/file-saver/-/file-saver-2.0.1.tgz",
-      "integrity": "sha512-g1QUuhYVVAamfCifK7oB7G3aIl4BbOyzDOqVyUfEr4tfBKrXfeH+M+Tg7HKCXSrbzxYdhyCP7z9WbKo0R2hBCw=="
-    },
     "@types/glob": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
@@ -3125,11 +3120,6 @@
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.2.tgz",
       "integrity": "sha512-vlGn0bcySYl/iV+BGA544JkkZP5LB3jsmkeKLFQakCOwCM3AOk7VkldBz4jrzSe+Z0Ezn99NVXa1o45cQY4R6A=="
     },
-    "bootstrap-icons": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/bootstrap-icons/-/bootstrap-icons-1.0.0.tgz",
-      "integrity": "sha512-PaQm3VtSqbUnWuyqGmFJG5iF9UMieDuk8raPOmKOtKeyWyiVshgLoKa+9EWGolGU/nvyBLEBWhZoQqhu9ccNBg=="
-    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -5513,11 +5503,6 @@
         "schema-utils": "^2.6.5"
       }
     },
-    "file-saver": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz",
-      "integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw=="
-    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -8270,10 +8255,10 @@
         "moment": "2.18.1"
       }
     },
-    "ngx-filesaver": {
+    "ngx-file-drop": {
-      "version": "10.0.1",
+      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/ngx-filesaver/-/ngx-filesaver-10.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/ngx-file-drop/-/ngx-file-drop-10.0.0.tgz",
-      "integrity": "sha512-yB5webF38gfPai1sN2mRBGYmOvYqXWLqR91Zr56gktqc7XDAuKiyE5Zy4v2QewDbMEjbSEkdVNc+bzWMpPShhQ==",
+      "integrity": "sha512-izV90rNuXGeTCoodvD35sCC/D/bDIuFFdj1UnTMf8n3PA5O5v+7L/PJ8d9IAXIhjAg3fY0lIIqbP8RFexMbNeA==",
       "requires": {
         "tslib": "^2.0.0"
       }

src-ui/package.json

@@ -23,6 +23,7 @@
     "@ng-bootstrap/ng-bootstrap": "^7.0.0",
     "bootstrap": "^4.5.0",
     "ng-bootstrap": "^1.6.3",
+    "ngx-file-drop": "^10.0.0",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.2"

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">
+  <div class="col-lg">
-    <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">
     <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)
+  }
+
 }