It works! Does the whole process from staging to completion.

src/app/app.module.ts

@@ -18,6 +18,7 @@ import { StagingDocumentComponent } from './document-manager/staging-document/st
 import {MatCardModule} from '@angular/material/card';
 import {MatSelectModule} from '@angular/material/select';
 import {NgSelectModule} from '@ng-select/ng-select';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
 
 @NgModule({
   declarations: [
@@ -26,22 +27,23 @@ import {NgSelectModule} from '@ng-select/ng-select';
     DocumentManagerComponent,
     StagingDocumentComponent,
   ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    BrowserAnimationsModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MatFormFieldModule,
-    MatIconModule,
-    MatInputModule,
-    MatButtonModule,
-    HttpClientModule,
-    StorageModule.forRoot({IDBNoWrap: true}),
-    MatCardModule,
-    MatSelectModule,
-    NgSelectModule
-  ],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        BrowserAnimationsModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        MatButtonModule,
+        HttpClientModule,
+        StorageModule.forRoot({IDBNoWrap: true}),
+        MatCardModule,
+        MatSelectModule,
+        NgSelectModule,
+        MatProgressSpinnerModule
+    ],
   providers: [
     {provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true},
   ],

src/app/document-manager/services/document.service.ts

@@ -4,28 +4,13 @@ import {
   MayanDocument,
   MayanResult,
   MayanWritableDocument,
-  NewDocument,
   StagingFolder,
   StagingFolderFile,
   StagingFolderFileUpload
 } from '../../mayan-api';
 import {HttpClient, HttpParams} from '@angular/common/http';
 import {environment} from '../../../environments/environment';
-import {
-  catchError,
-  concatAll,
-  concatMap,
-  delay,
-  delayWhen,
-  expand,
-  flatMap,
-  map,
-  reduce,
-  retryWhen,
-  switchMap,
-  take,
-  tap
-} from 'rxjs/operators';
+import {concatMap, delay, expand, map, reduce, retryWhen, switchMap, take, tap} from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
@@ -108,4 +93,8 @@ export class DocumentService {
 
     );
   }
+
+  deleteStagingDocument(stagingFolderFile: StagingFolderFile): Observable<never> {
+    return this.httpClient.delete<never>(stagingFolderFile.url);
+  }
 }

src/app/document-manager/staging-document/staging-document.component.html

-<mat-card class="example-card">
+<mat-card #theCard class="example-card" *ngIf="!uploaded">
   <mat-card-header>
     <div mat-card-avatar class="example-header-image"></div>
     <mat-card-title>{{stagingFolderFile.filename}}</mat-card-title>
@@ -69,8 +69,14 @@
 
         <div class="document-action-buttons">
           <button mat-raised-button color="primary" [disabled]="docForm.invalid"
-                  (click)="importDocument()">Import</button>
-          <button mat-raised-button color="warn" (click)="discardDocument()">Discard</button>
+                  (click)="importDocument()">
+            <span *ngIf="!submitting">Import</span>
+            <mat-spinner *ngIf="submitting" ></mat-spinner>
+          </button>
+          <button mat-raised-button color="warn" (click)="discardDocument()">
+            <span *ngIf="!discarding">Discard</span>
+            <mat-spinner *ngIf="discarding" ></mat-spinner>
+          </button>
         </div>
 
 

src/app/document-manager/staging-document/staging-document.component.ts

-import {Component, Input, OnInit} from '@angular/core';
+import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
 import {MayanWritableDocument, NewDocument, StagingFolder, StagingFolderFile, Tag} from '../../mayan-api';
 import {TagsService} from '../services/tags.service';
 import {FormControl, FormGroup, Validators} from '@angular/forms';
@@ -16,6 +16,7 @@ export class StagingDocumentComponent implements OnInit {
 
   @Input() stagingFolderFile: StagingFolderFile;
   @Input() stagingFolder: StagingFolder;
+  @ViewChild('theCard') input: ElementRef;
 
   constructor(private readonly tagsService: TagsService,
               private readonly cabinetsService: CabinetsService,
@@ -23,6 +24,9 @@ export class StagingDocumentComponent implements OnInit {
               private readonly documentService: DocumentService) {
   }
 
+  uploaded = false;
+  discarding: boolean;
+
   documentTypesLoading = true;
   documentTypes = this.documentTypesService.getAllDocumentTypes().pipe(
     tap(next => this.docForm.controls.selectedDocumentType.setValue(next[0].id)),
@@ -94,11 +98,20 @@ export class StagingDocumentComponent implements OnInit {
           return this.cabinetsService.addDocumentToCabinet(
             this.docForm.controls.selectedCabinet.value,
             doc.id
+          ).pipe(
+            map(_ => doc),
+          );
+        }),
+        flatMap(doc => {
+          // Delete the staging document!
+          return this.documentService.deleteStagingDocument(this.stagingFolderFile).pipe(
+            map(_ => doc),
           );
         }),
       )
-      .subscribe(freshDocument => {
+      .subscribe(newDocument => {
         this.submitting = false;
+        this.uploaded = true;
         // TODO: could trigger a reload of the stuff!
       });
 
@@ -106,5 +119,9 @@ export class StagingDocumentComponent implements OnInit {
 
   discardDocument() {
     console.log('discarding document!');
+    this.discarding = true;
+    this.documentService.deleteStagingDocument(this.stagingFolderFile).subscribe(() =>
+      this.discarding = false
+    );
   }
 }