65240: Add community/collection logo on create/edit pages

resources/i18n/en.json5

@@ -130,6 +130,10 @@
   "collection.delete.text": "Are you sure you want to delete collection \"{{ dso }}\"",
   "collection.edit.delete": "Delete this collection",
   "collection.edit.head": "Edit Collection",
+  "collection.edit.logo.label": "Collection logo",
+  "collection.edit.logo.notifications.error": "Uploading Collection logo failed. Please verify the content before retrying.",
+  "collection.edit.logo.notifications.success": "Upload Collection logo successful.",
+  "collection.edit.logo.upload": "Drop a Collection Logo to upload",
   "collection.form.abstract": "Short Description",
   "collection.form.description": "Introductory text (HTML)",
   "collection.form.errors.title.required": "Please enter a collection name",
@@ -153,6 +157,10 @@
   "community.delete.text": "Are you sure you want to delete community \"{{ dso }}\"",
   "community.edit.delete": "Delete this community",
   "community.edit.head": "Edit Community",
+  "community.edit.logo.label": "Community logo",
+  "community.edit.logo.notifications.error": "Uploading Community logo failed. Please verify the content before retrying.",
+  "community.edit.logo.notifications.success": "Upload Community logo successful.",
+  "community.edit.logo.upload": "Drop a Community Logo to upload",
   "community.form.abstract": "Short Description",
   "community.form.description": "Introductory text (HTML)",
   "community.form.errors.title.required": "Please enter a community name",

src/app/+collection-page/collection-form/collection-form.component.ts

@@ -1,9 +1,14 @@
 import { Component, Input } from '@angular/core';
-import { DynamicInputModel, DynamicTextAreaModel } from '@ng-dynamic-forms/core';
+import { DynamicFormService, DynamicInputModel, DynamicTextAreaModel } from '@ng-dynamic-forms/core';
 import { DynamicFormControlModel } from '@ng-dynamic-forms/core/src/model/dynamic-form-control.model';
 import { Collection } from '../../core/shared/collection.model';
 import { ComColFormComponent } from '../../shared/comcol-forms/comcol-form/comcol-form.component';
 import { NormalizedCollection } from '../../core/cache/models/normalized-collection.model';
+import { Location } from '@angular/common';
+import { TranslateService } from '@ngx-translate/core';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { CommunityDataService } from '../../core/data/community-data.service';
+import { AuthService } from '../../core/auth/auth.service';
 
 /**
  * Form used for creating and editing collections
@@ -19,6 +24,26 @@ export class CollectionFormComponent extends ComColFormComponent<Collection> {
    */
   @Input() dso: Collection = new Collection();
 
+  /**
+   * i18n key for the logo's label
+   */
+  protected logoLabelMsg = 'collection.edit.logo.label';
+
+  /**
+   * i18n key for the logo's drop message
+   */
+  protected logoDropMsg = 'collection.edit.logo.upload';
+
+  /**
+   * i18n key for the logo's upload success message
+   */
+  protected logoSuccessMsg = 'collection.edit.logo.notifications.success';
+
+  /**
+   * i18n key for the logo's upload error message
+   */
+  protected logoErrorMsg = 'collection.edit.logo.notifications.error';
+
   /**
    * @type {Collection.type} This is a collection-type form
    */
@@ -65,4 +90,13 @@ export class CollectionFormComponent extends ComColFormComponent<Collection> {
       name: 'dc.description.provenance',
     }),
   ];
+
+  public constructor(protected location: Location,
+                     protected formService: DynamicFormService,
+                     protected translate: TranslateService,
+                     protected notificationsService: NotificationsService,
+                     protected authService: AuthService,
+                     protected dsoService: CommunityDataService) {
+    super(location, formService, translate, notificationsService, authService);
+  }
 }

src/app/+collection-page/create-collection-page/create-collection-page.component.html

@@ -4,5 +4,5 @@
             <h2 id="sub-header" class="border-bottom pb-2">{{'collection.create.sub-head' | translate:{ parent: (parentRD$| async)?.payload.name } }}</h2>
         </div>
     </div>
-    <ds-collection-form (submitForm)="onSubmit($event)"></ds-collection-form>
+    <ds-collection-form (submitForm)="onSubmit($event)" (finishUpload)="navigateToNewPage()"></ds-collection-form>
 </div>

src/app/+collection-page/edit-collection-page/edit-collection-page.component.html

@@ -2,7 +2,9 @@
   <div class="row">
     <div class="col-12 pb-4">
       <h2 id="header" class="border-bottom pb-2">{{ 'collection.edit.head' | translate }}</h2>
-      <ds-collection-form (submitForm)="onSubmit($event)" [dso]="(dsoRD$ | async)?.payload"></ds-collection-form>
+      <ds-collection-form (submitForm)="onSubmit($event)"
+                          [dso]="(dsoRD$ | async)?.payload"
+                          (finishUpload)="navigateToHomePage()"></ds-collection-form>
       <a class="btn btn-danger"
          [routerLink]="'/collections/' + (dsoRD$ | async)?.payload.uuid + '/delete'">{{'collection.edit.delete'
         | translate}}</a>

src/app/+community-page/community-form/community-form.component.ts

@@ -1,9 +1,14 @@
 import { Component, Input } from '@angular/core';
-import { DynamicInputModel, DynamicTextAreaModel } from '@ng-dynamic-forms/core';
+import { DynamicFormService, DynamicInputModel, DynamicTextAreaModel } from '@ng-dynamic-forms/core';
 import { DynamicFormControlModel } from '@ng-dynamic-forms/core/src/model/dynamic-form-control.model';
 import { Community } from '../../core/shared/community.model';
 import { ResourceType } from '../../core/shared/resource-type';
 import { ComColFormComponent } from '../../shared/comcol-forms/comcol-form/comcol-form.component';
+import { Location } from '@angular/common';
+import { TranslateService } from '@ngx-translate/core';
+import { NotificationsService } from '../../shared/notifications/notifications.service';
+import { CommunityDataService } from '../../core/data/community-data.service';
+import { AuthService } from '../../core/auth/auth.service';
 
 /**
  * Form used for creating and editing communities
@@ -19,6 +24,26 @@ export class CommunityFormComponent extends ComColFormComponent<Community> {
    */
   @Input() dso: Community = new Community();
 
+  /**
+   * i18n key for the logo's label
+   */
+  protected logoLabelMsg = 'community.edit.logo.label';
+
+  /**
+   * i18n key for the logo's drop message
+   */
+  protected logoDropMsg = 'community.edit.logo.upload';
+
+  /**
+   * i18n key for the logo's upload success message
+   */
+  protected logoSuccessMsg = 'community.edit.logo.notifications.success';
+
+  /**
+   * i18n key for the logo's upload error message
+   */
+  protected logoErrorMsg = 'community.edit.logo.notifications.error';
+
   /**
    * @type {Community.type} This is a community-type form
    */
@@ -57,4 +82,13 @@ export class CommunityFormComponent extends ComColFormComponent<Community> {
       name: 'dc.description.tableofcontents',
     }),
   ];
+
+  public constructor(protected location: Location,
+                     protected formService: DynamicFormService,
+                     protected translate: TranslateService,
+                     protected notificationsService: NotificationsService,
+                     protected authService: AuthService,
+                     protected dsoService: CommunityDataService) {
+    super(location, formService, translate, notificationsService, authService);
+  }
 }

src/app/+community-page/create-community-page/create-community-page.component.html

@@ -7,5 +7,5 @@
       </ng-container>
     </div>
   </div>
-  <ds-community-form (submitForm)="onSubmit($event)"></ds-community-form>
+  <ds-community-form (submitForm)="onSubmit($event)" (finishUpload)="navigateToNewPage()"></ds-community-form>
 </div>

src/app/+community-page/edit-community-page/edit-community-page.component.html

@@ -3,7 +3,8 @@
         <div class="col-12 pb-4">
             <h2 id="header" class="border-bottom pb-2">{{ 'community.edit.head' | translate }}</h2>
             <ds-community-form (submitForm)="onSubmit($event)"
-                               [dso]="(dsoRD$ | async)?.payload"></ds-community-form>
+                               [dso]="(dsoRD$ | async)?.payload"
+                               (finishUpload)="navigateToHomePage()"></ds-community-form>
             <a class="btn btn-danger"
                [routerLink]="'/communities/' + (dsoRD$ | async)?.payload.uuid + '/delete'">{{'community.edit.delete'
                 | translate}}</a>

src/app/+my-dspace-page/my-dspace-new-submission/my-dspace-new-submission.component.ts

@@ -34,7 +34,8 @@ export class MyDSpaceNewSubmissionComponent implements OnDestroy, OnInit {
     url: '',
     authToken: null,
     disableMultipart: false,
-    itemAlias: null
+    itemAlias: null,
+    autoUpload: true
   };
 
   /**

src/app/core/data/comcol-data.service.ts

@@ -1,4 +1,4 @@
-import { distinctUntilChanged, filter, map, mergeMap, share, take, tap } from 'rxjs/operators';
+import { distinctUntilChanged, filter, map, mergeMap, share, switchMap, take, tap } from 'rxjs/operators';
 import { merge as observableMerge, Observable, throwError as observableThrowError } from 'rxjs';
 import { isEmpty, isNotEmpty } from '../../shared/empty.util';
 import { NormalizedCommunity } from '../cache/models/normalized-community.model';
@@ -57,4 +57,14 @@ export abstract class ComColDataService<T extends CacheableObject> extends DataS
       return observableMerge(errorResponses, successResponses).pipe(distinctUntilChanged(), share());
     }
   }
+
+  /**
+   * Get the endpoint for the community or collection's logo
+   * @param id  The community or collection's ID
+   */
+  public getLogoEndpoint(id: string): Observable<string> {
+    return this.halService.getEndpoint(this.linkPath).pipe(
+      switchMap((href: string) => this.halService.getEndpoint('logo', `${href}/${id}`))
+    )
+  }
 }

src/app/core/shared/hal-endpoint.service.ts

@@ -43,8 +43,8 @@ export class HALEndpointService {
       );
   }
 
-  public getEndpoint(linkPath: string): Observable<string> {
+  public getEndpoint(linkPath: string, startHref?: string): Observable<string> {
-    return this.getEndpointAt(this.getRootHref(), ...linkPath.split('/'));
+    return this.getEndpointAt(startHref || this.getRootHref(), ...linkPath.split('/'));
   }
 
   /**

src/app/shared/comcol-forms/comcol-form/comcol-form.component.html

@@ -1,3 +1,14 @@
+<div class="container-fluid">
+  <label>{{logoLabelMsg | translate}}</label>
+  <ds-comcol-page-logo [logo]="(dso?.logo | async)?.payload"></ds-comcol-page-logo>
+  <ds-uploader  *ngIf="uploadFilesOptions.url"
+                [dropMsg]="logoDropMsg"
+                [dropOverDocumentMsg]="logoDropMsg"
+                [enableDragOverDocument]="true"
+                [uploadFilesOptions]="uploadFilesOptions"
+                (onCompleteItem)="onCompleteItem()"
+                (onUploadError)="onUploadError()"></ds-uploader>
+</div>
 <ds-form *ngIf="formModel"
          [formId]="'comcol-form-id'"
          [formModel]="formModel" (submitForm)="onSubmit()" (cancel)="onCancel()"></ds-form>

src/app/shared/comcol-forms/comcol-form/comcol-form.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
 import { Location } from '@angular/common';
 import {
   DynamicFormService,
@@ -10,8 +10,16 @@ import { TranslateService } from '@ngx-translate/core';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 import { MetadataMap, MetadataValue } from '../../../core/shared/metadata.models';
 import { ResourceType } from '../../../core/shared/resource-type';
-import { isNotEmpty } from '../../empty.util';
+import { hasValue, isNotEmpty, isUndefined } from '../../empty.util';
+import { UploaderOptions } from '../../uploader/uploader-options.model';
+import { NotificationsService } from '../../notifications/notifications.service';
+import { ComColDataService } from '../../../core/data/comcol-data.service';
+import { Subscription } from 'rxjs/internal/Subscription';
+import { AuthService } from '../../../core/auth/auth.service';
 import { Community } from '../../../core/shared/community.model';
+import { Collection } from '../../../core/shared/collection.model';
+import { UploaderComponent } from '../../uploader/uploader.component';
+import { FileUploader } from 'ng2-file-upload';
 
 /**
  * A form for creating and editing Communities or Collections
@@ -21,12 +29,38 @@ import { Community } from '../../../core/shared/community.model';
   styleUrls: ['./comcol-form.component.scss'],
   templateUrl: './comcol-form.component.html'
 })
-export class ComColFormComponent<T extends DSpaceObject> implements OnInit {
+export class ComColFormComponent<T extends DSpaceObject> implements OnInit, OnDestroy {
+
+  /**
+   * The logo uploader component
+   */
+  @ViewChild(UploaderComponent) uploaderComponent: UploaderComponent;
+
   /**
    * DSpaceObject that the form represents
    */
   @Input() dso: T;
 
+  /**
+   * i18n key for the logo's label
+   */
+  protected logoLabelMsg: string;
+
+  /**
+   * i18n key for the logo's drop message
+   */
+  protected logoDropMsg: string;
+
+  /**
+   * i18n key for the logo's upload success message
+   */
+  protected logoSuccessMsg: string;
+
+  /**
+   * i18n key for the logo's upload error message
+   */
+  protected logoErrorMsg: string;
+
   /**
    * Type of DSpaceObject that the form represents
    */
@@ -53,14 +87,46 @@ export class ComColFormComponent<T extends DSpaceObject> implements OnInit {
   formGroup: FormGroup;
 
   /**
-   * Emits DSO when the form is submitted
+   * The uploader configuration options
-   * @type {EventEmitter<any>}
+   * @type {UploaderOptions}
    */
-  @Output() submitForm: EventEmitter<any> = new EventEmitter();
+  uploadFilesOptions: UploaderOptions = {
+    url: '',
+    authToken: null,
+    disableMultipart: true,
+    itemAlias: null,
+    autoUpload: false
+  };
 
-  public constructor(private location: Location,
+  /**
-                     private formService: DynamicFormService,
+   * Emits DSO and Uploader when the form is submitted
-                     private translate: TranslateService) {
+   */
+  @Output() submitForm: EventEmitter<{
+    dso: T,
+    uploader: FileUploader
+  }> = new EventEmitter();
+
+  /**
+   * Fires an event when the logo has finished uploading (with or without errors)
+   */
+  @Output() finishUpload: EventEmitter<any> = new EventEmitter();
+
+  /**
+   * Array to track all subscriptions and unsubscribe them onDestroy
+   * @type {Array}
+   */
+  protected subs: Subscription[] = [];
+
+  /**
+   * The service used to fetch from or send data to
+   */
+  protected dsoService: ComColDataService<Community | Collection>;
+
+  public constructor(protected location: Location,
+                     protected formService: DynamicFormService,
+                     protected translate: TranslateService,
+                     protected notificationsService: NotificationsService,
+                     protected authService: AuthService) {
   }
 
   ngOnInit(): void {
@@ -76,6 +142,19 @@ export class ComColFormComponent<T extends DSpaceObject> implements OnInit {
       .subscribe(() => {
         this.updateFieldTranslations();
       });
+
+    if (hasValue(this.dso.id)) {
+      this.subs.push(
+        this.dsoService.getLogoEndpoint(this.dso.id).subscribe((href: string) => {
+          this.uploadFilesOptions.url = href;
+          this.uploadFilesOptions.authToken = this.authService.buildAuthHeader();
+        })
+      );
+    } else {
+      // Set a placeholder URL to not break the uploader component. This will be replaced once the object is created.
+      this.uploadFilesOptions.url = 'placeholder';
+      this.uploadFilesOptions.authToken = this.authService.buildAuthHeader();
+    }
   }
 
   /**
@@ -102,7 +181,10 @@ export class ComColFormComponent<T extends DSpaceObject> implements OnInit {
       },
       type: Community.type
     });
-    this.submitForm.emit(updatedDSO);
+    this.submitForm.emit({
+      dso: updatedDSO,
+      uploader: this.uploaderComponent.uploader
+    });
   }
 
   /**
@@ -122,7 +204,32 @@ export class ComColFormComponent<T extends DSpaceObject> implements OnInit {
     );
   }
 
+  /**
+   * The request was successful, display a success notification
+   */
+  public onCompleteItem() {
+    this.notificationsService.success(null, this.translate.get(this.logoSuccessMsg));
+    this.finishUpload.emit();
+  }
+
+  /**
+   * The request was unsuccessful, display an error notification
+   */
+  public onUploadError() {
+    this.notificationsService.error(null, this.translate.get(this.logoErrorMsg));
+    this.finishUpload.emit();
+  }
+
   onCancel() {
     this.location.back();
   }
+
+  /**
+   * Unsubscribe from open subscriptions
+   */
+  ngOnDestroy(): void {
+    this.subs
+      .filter((subscription) => hasValue(subscription))
+      .forEach((subscription) => subscription.unsubscribe());
+  }
 }

src/app/shared/comcol-forms/create-comcol-page/create-comcol-page.component.ts

@@ -5,11 +5,12 @@ import { Observable } from 'rxjs';
 import { RouteService } from '../../../core/services/route.service';
 import { Router } from '@angular/router';
 import { RemoteData } from '../../../core/data/remote-data';
-import { isNotEmpty, isNotUndefined } from '../../empty.util';
+import { hasValue, isNotEmpty, isNotUndefined } from '../../empty.util';
 import { take } from 'rxjs/operators';
 import { getSucceededRemoteData } from '../../../core/shared/operators';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
 import { DataService } from '../../../core/data/data.service';
+import { ComColDataService } from '../../../core/data/comcol-data.service';
 
 /**
  * Component representing the create page for communities and collections
@@ -34,8 +35,13 @@ export class CreateComColPageComponent<TDomain extends DSpaceObject> implements
    */
   public parentRD$: Observable<RemoteData<Community>>;
 
+  /**
+   * The UUID of the newly created object
+   */
+  private newUUID: string;
+
   public constructor(
-    protected dsoDataService: DataService<TDomain>,
+    protected dsoDataService: ComColDataService<TDomain>,
     protected parentDataService: CommunityDataService,
     protected routeService: RouteService,
     protected router: Router
@@ -53,20 +59,39 @@ export class CreateComColPageComponent<TDomain extends DSpaceObject> implements
   }
 
   /**
-   * @param {TDomain} dso The updated version of the DSO
    * Creates a new DSO based on the submitted user data and navigates to the new object's home page
+   * @param event   The event returned by the community/collection form. Contains the new dso and logo uploader
    */
-  onSubmit(dso: TDomain) {
+  onSubmit(event) {
+    const dso = event.dso;
+    const uploader = event.uploader;
+
     this.parentUUID$.pipe(take(1)).subscribe((uuid: string) => {
       this.dsoDataService.create(dso, uuid)
         .pipe(getSucceededRemoteData())
         .subscribe((dsoRD: RemoteData<TDomain>) => {
           if (isNotUndefined(dsoRD)) {
-            const newUUID = dsoRD.payload.uuid;
+            this.newUUID = dsoRD.payload.uuid;
-            this.router.navigate([this.frontendURL + newUUID]);
+            if (uploader.queue.length > 0) {
+              this.dsoDataService.getLogoEndpoint(this.newUUID).pipe(take(1)).subscribe((href: string) => {
+                uploader.options.url = href;
+                uploader.uploadAll();
+              });
+            } else {
+              this.navigateToNewPage();
+            }
           }
         });
     });
   }
 
+  /**
+   * Navigate to the page of the newly created object
+   */
+  navigateToNewPage() {
+    if (hasValue(this.newUUID)) {
+      this.router.navigate([this.frontendURL + this.newUUID]);
+    }
+  }
+
 }

src/app/shared/comcol-forms/edit-comcol-page/edit-comcol-page.component.ts

@@ -3,10 +3,11 @@ import { Observable } from 'rxjs';
 import { ActivatedRoute, Router } from '@angular/router';
 import { RemoteData } from '../../../core/data/remote-data';
 import { isNotUndefined } from '../../empty.util';
-import { first, map } from 'rxjs/operators';
+import { first, map, take } from 'rxjs/operators';
 import { getSucceededRemoteData } from '../../../core/shared/operators';
 import { DataService } from '../../../core/data/data.service';
 import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+import { ComColDataService } from '../../../core/data/comcol-data.service';
 
 /**
  * Component representing the edit page for communities and collections
@@ -26,7 +27,7 @@ export class EditComColPageComponent<TDomain extends DSpaceObject> implements On
   public dsoRD$: Observable<RemoteData<TDomain>>;
 
   public constructor(
-    protected dsoDataService: DataService<TDomain>,
+    protected dsoDataService: ComColDataService<TDomain>,
     protected router: Router,
     protected route: ActivatedRoute
   ) {
@@ -37,17 +38,39 @@ export class EditComColPageComponent<TDomain extends DSpaceObject> implements On
   }
 
   /**
-   * @param {TDomain} dso The updated version of the DSO
    * Updates an existing DSO based on the submitted user data and navigates to the edited object's home page
+   * @param event   The event returned by the community/collection form. Contains the new dso and logo uploader
    */
-  onSubmit(dso: TDomain) {
+  onSubmit(event) {
+    const dso = event.dso;
+    const uploader = event.uploader;
+
     this.dsoDataService.update(dso)
       .pipe(getSucceededRemoteData())
       .subscribe((dsoRD: RemoteData<TDomain>) => {
         if (isNotUndefined(dsoRD)) {
           const newUUID = dsoRD.payload.uuid;
-          this.router.navigate([this.frontendURL + newUUID]);
+          if (uploader.queue.length > 0) {
+            this.dsoDataService.getLogoEndpoint(newUUID).pipe(take(1)).subscribe((href: string) => {
+              uploader.options.url = href;
+              uploader.uploadAll();
+            });
+          } else {
+            this.router.navigate([this.frontendURL + newUUID]);
+          }
         }
       });
   }
+
+  /**
+   * Navigate to the home page of the object
+   */
+  navigateToHomePage() {
+    this.dsoRD$.pipe(
+      getSucceededRemoteData(),
+      take(1)
+    ).subscribe((dsoRD: RemoteData<TDomain>) => {
+      this.router.navigate([this.frontendURL + dsoRD.payload.id]);
+    });
+  }
 }

src/app/shared/uploader/uploader-options.model.ts

@@ -10,4 +10,6 @@ export class UploaderOptions {
   disableMultipart = false;
 
   itemAlias: string;
+
+  autoUpload = true;
 }

src/app/shared/uploader/uploader.component.html

@@ -29,13 +29,15 @@
       <div *ngIf="(isOverBaseDropZone | async) || uploader?.queue?.length !== 0">
         <div class="m-1">
           <div class="upload-item-top">
-            <span class="filename">{{'uploader.queue-length' | translate}}: {{ uploader?.queue?.length }} | {{ uploader?.queue[0]?.file.name }}</span>
+            <span class="filename">
+              <span *ngIf="!uploader.options.disableMultipart">{{'uploader.queue-length' | translate}}: {{ uploader?.queue?.length }} | </span>{{ uploader?.queue[0]?.file.name }}
+            </span>
             <div class="btn-group btn-group-sm float-right" role="group">
               <button type="button" class="btn btn-danger" (click)="uploader.clearQueue()" [disabled]="!uploader.queue.length">
                 <i class="fas fa-trash" aria-hidden="true"></i>
               </button>
             </div>
-            <span *ngIf="uploader.progress < 100" class="float-right mr-3">{{ uploader.progress }}%</span>
+            <span *ngIf="uploader.progress < 100 && !(uploader.progress === 0 && !uploader.options.autoUpload)" class="float-right mr-3">{{ uploader.progress }}%</span>
             <span *ngIf="uploader.progress === 100" class="float-right mr-3">{{'uploader.processing' | translate}}...</span>
           </div>
           <div class="ds-base-drop-zone-progress clearfix mt-2">

src/app/shared/uploader/uploader.component.ts

@@ -95,7 +95,7 @@ export class UploaderComponent {
       disableMultipart: this.uploadFilesOptions.disableMultipart,
       itemAlias: this.uploadFilesOptions.itemAlias,
       removeAfterUpload: true,
-      autoUpload: true
+      autoUpload: this.uploadFilesOptions.autoUpload
     });
 
     if (isUndefined(this.enableDragOverDocument)) {
@@ -117,7 +117,10 @@ export class UploaderComponent {
     if (isUndefined(this.onBeforeUpload)) {
       this.onBeforeUpload = () => {return};
     }
-    this.uploader.onBeforeUploadItem = () => {
+    this.uploader.onBeforeUploadItem = (item) => {
+      if (item.url !== this.uploader.options.url) {
+        item.url = this.uploader.options.url;
+      }
       this.onBeforeUpload();
       this.isOverDocumentDropZone = observableOf(false);
 

src/app/submission/form/submission-form.component.ts

@@ -81,7 +81,8 @@ export class SubmissionFormComponent implements OnChanges, OnDestroy {
     url: '',
     authToken: null,
     disableMultipart: false,
-    itemAlias: null
+    itemAlias: null,
+    autoUpload: true
   };
 
   /**