71713: Dropzone without uploader to own component

src/app/shared/file-dropzone-no-uploader/file-dropzone-no-uploader.component.html

@@ -0,0 +1,28 @@
+<div ng2FileDrop
+     class="ds-document-drop-zone position-fixed h-100 w-100"
+     [class.ds-document-drop-zone-active]="(isOverDocumentDropZone | async)"
+     [uploader]="uploader"
+     (onFileDrop)="setFile($event)"
+     (fileOver)="fileOverDocument($event)">
+</div>
+<div *ngIf="(isOverDocumentDropZone | async)"
+     class="ds-document-drop-zone-inner position-fixed h-100 w-100 p-2">
+  <div
+    class="ds-document-drop-zone-inner-content position-relative d-flex flex-column justify-content-center text-center h-100 w-100">
+    <p class="text-primary">{{ dropMessageLabel | translate}}</p>
+  </div>
+</div>
+<div class="well ds-base-drop-zone mt-1 mb-3 text-muted p-2">
+  <p class="text-center m-0 p-0 d-flex justify-content-center align-items-center"
+     *ngIf="fileObject!=null">  {{ fileObject.name }} </p>
+  <p class="text-center m-0 p-0 d-flex justify-content-center align-items-center">
+      <span><i class="fas fa-cloud-upload"
+               aria-hidden="true"></i> {{ (fileObject == null ? dropMessageLabel : dropMessageLabelReplacement) | translate}} {{'uploader.or' | translate}}</span>
+    <label class="btn btn-link m-0 p-0 ml-1">
+      <input class="form-control-file d-none" requireFile #file="ngModel" type="file" name="file-upload"
+             id="file-upload"
+             [ngModel]="fileObject" (ngModelChange)="setFile($event)">
+      {{'uploader.browse' | translate}}
+    </label>
+  </p>
+</div>

src/app/shared/file-dropzone-no-uploader/file-dropzone-no-uploader.component.ts

@@ -0,0 +1,90 @@
+import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
+import { uniqueId } from 'lodash';
+import { FileUploader } from 'ng2-file-upload';
+import { Observable } from 'rxjs/internal/Observable';
+import { UploaderOptions } from '../uploader/uploader-options.model';
+import { of as observableOf } from 'rxjs';
+
+/**
+ * Component to have a file dropzone without that dropping/choosing a file in browse automatically triggers
+ * the uploader, instead an event is emitted with the file that was added.
+ *
+ * Here only one file is allowed to be selected, so if one is selected/dropped the message changes to a
+ * replace message.
+ */
+@Component({
+  selector: 'ds-file-dropzone-no-uploader',
+  templateUrl: './file-dropzone-no-uploader.component.html',
+  styleUrls: ['./file-dropzone-no-uploader.scss']
+})
+export class FileDropzoneNoUploaderComponent implements OnInit {
+
+  public isOverDocumentDropZone: Observable<boolean>;
+  public uploader: FileUploader;
+  public uploaderId: string;
+
+  @Input() dropMessageLabel: string;
+  @Input() dropMessageLabelReplacement: string;
+
+  /**
+   * The function to call when file is added
+   */
+  @Output() onFileAdded: EventEmitter<any> = new EventEmitter<any>();
+
+  /**
+   * The uploader configuration options
+   * @type {UploaderOptions}
+   */
+  uploadFilesOptions: UploaderOptions = Object.assign(new UploaderOptions(), {
+    // URL needs to contain something to not produce any errors. We are using onFileDrop; not the uploader
+    url: 'placeholder',
+  });
+
+  /**
+   * The current value of the file
+   */
+  fileObject: File;
+
+  /**
+   * Method provided by Angular. Invoked after the constructor.
+   */
+  ngOnInit() {
+    this.uploaderId = 'ds-drag-and-drop-uploader' + uniqueId();
+    this.isOverDocumentDropZone = observableOf(false);
+    window.addEventListener('drop', (e: DragEvent) => {
+      return e && e.preventDefault();
+    }, false);
+    this.uploader = new FileUploader({
+      // required, but using onFileDrop, not uploader
+      url: 'placeholder',
+    });
+  }
+
+  @HostListener('window:dragover', ['$event'])
+  onDragOver(event: any) {
+    // Show drop area on the page
+    event.preventDefault();
+    if ((event.target as any).tagName !== 'HTML') {
+      this.isOverDocumentDropZone = observableOf(true);
+    }
+  }
+
+  /**
+   * Called when files are dragged on the window document drop area.
+   */
+  public fileOverDocument(isOver: boolean) {
+    if (!isOver) {
+      this.isOverDocumentDropZone = observableOf(isOver);
+    }
+  }
+
+  /**
+   * Set file
+   * @param files
+   */
+  setFile(files) {
+    this.fileObject = files.length > 0 ? files[0] : undefined;
+    this.onFileAdded.emit(this.fileObject);
+  }
+
+}

src/app/shared/file-dropzone-no-uploader/file-dropzone-no-uploader.scss

@@ -0,0 +1,29 @@
+.ds-base-drop-zone {
+  border: 2px dashed $gray-600;
+}
+
+.ds-document-drop-zone {
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+.ds-document-drop-zone-active {
+  z-index: $drop-zone-area-z-index !important;
+}
+
+.ds-document-drop-zone-inner {
+  background-color: rgba($white, 0.7);
+  z-index: $drop-zone-area-inner-z-index;
+  top: 0;
+  left: 0;
+}
+
+.ds-document-drop-zone-inner-content {
+  border: 4px dashed map-get($theme-colors, primary);
+  z-index: $drop-zone-area-inner-z-index;
+}
+
+.ds-document-drop-zone-inner-content p {
+  font-size: ($font-size-lg * 2.5);
+}