(refactor): Parallel uploads and better error display

src/app/modules/pro/pro.service.ts

@@ -75,7 +75,14 @@ export class ProService {
  endpoint.push(remoteUser);
  }
 
- await this.uploadClient.post(endpoint.join('/'), [file]);
+ const response = (await this.uploadClient.post(endpoint.join('/'), [
+ file,
+ ])) as any;
+
+ if (!response || response.status !== 'success') {
+ throw new Error(response.message || 'Invalid server response');
+ }
+
  return true;
  }
 }

src/app/modules/pro/settings/settings.component.html

@@ -24,6 +24,17 @@
  </m-tooltip>
  </a>
 
+ <a
+ class="m-topbar--navigation--item"
+ [class.m-topbar--navigation--item-active]="currentTab === 'assets'"
+ (click)="currentTab = 'assets'"
+ >
+ <span i18n>Assets</span>
+ <m-tooltip icon="help" i18n>
+ Upload a custom logo and background.
+ </m-tooltip>
+ </a>
+
  <a
  class="m-topbar--navigation--item"
  [class.m-topbar--navigation--item-active]="currentTab === 'hashtags'"
@@ -207,6 +218,14 @@
  </label>
  </ng-container>
  </div>
+ </ng-template>
+
+ <!-- Assets -->
+
+ <ng-template ngSwitchCase="assets">
+ <p class="m-proSettings__note" i18n>
+ Upload a custom logo and background.
+ </p>
 
  <div class="m-proSettings__field">
  <label for="logo" i18n>Logo Image</label>
@@ -215,7 +234,7 @@
  id="logo"
  name="logo"
  accept="image/*"
- (change)="onLogoFileSelect(logoField.files)"
+ (change)="onAssetFileSelect('logo', logoField.files)"
  #logoField
  />
  </div>
@@ -227,7 +246,9 @@
  id="background"
  name="background"
  accept="image/*"
- (change)="onBackgroundFileSelect(backgroundField.files)"
+ (change)="
+ onAssetFileSelect('background', backgroundField.files)
+ "
  #backgroundField
  />
  </div>
@@ -395,8 +416,8 @@
  </ng-template>
  </ng-container>
 
- <div class="m-proSettings__error" *ngIf="!!error">
- {{ error }}
+ <div class="m-proSettings__error" *ngIf="error">
+ Error: {{ error }}
  </div>
 
  <div

src/app/modules/pro/settings/settings.component.scss

@@ -134,10 +134,16 @@
  }
 
  .m-proSettings__error {
- margin: 16px 0;
- font-size: 20px;
+ margin: 0 0 16px 0;
+ padding: 8px;
+ border-radius: 8px;
+ border: 1px solid;
+ font-size: 14px;
+ line-height: 1;
+
  @include m-theme() {
  color: themed($m-red);
+ border-color: themed($m-red);
  }
  }
 }

src/app/modules/pro/settings/settings.component.ts

@@ -29,6 +29,7 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
  currentTab:
  | 'general'
  | 'theme'
+ | 'assets'
  | 'hashtags'
  | 'footer'
  | 'domain'
@@ -89,26 +90,31 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
  this.detectChanges();
  }
 
- onLogoFileSelect(files: FileList | null) {
+ onAssetFileSelect(type: string, files: FileList | null) {
  if (!files || !files.item(0)) {
- this.settings.logo = null;
+ this.settings[type] = null;
  this.detectChanges();
  return;
  }
 
- this.settings.logo = files.item(0);
+ this.settings[type] = files.item(0);
  this.detectChanges();
  }
 
- onBackgroundFileSelect(files: FileList | null) {
- if (!files || !files.item(0)) {
- this.settings.background = null;
- this.detectChanges();
- return;
+ protected async uploadAsset(
+ type: string,
+ file: File,
+ htmlInputFileElementRef: ElementRef<HTMLInputElement> | null = null
+ ): Promise<void> {
+ await this.service.upload(type, file, this.user);
+
+ if (htmlInputFileElementRef && htmlInputFileElementRef.nativeElement) {
+ try {
+ htmlInputFileElementRef.nativeElement.value = '';
+ } catch (e) {
+ console.warn(`Browser prevented ${type} field resetting`);
+ }
  }
-
- this.settings.background = files.item(0);
- this.detectChanges();
  }
 
  async save() {
@@ -119,36 +125,23 @@ export class ProSettingsComponent implements OnInit, OnDestroy {
  try {
  const { logo, background, ...settings } = this.settings;
 
- if (logo) {
- await this.service.upload('logo', logo, this.user);
-
- if (this.logoField.nativeElement) {
- try {
- this.logoField.nativeElement.value = '';
- } catch (e) {
- console.warn('Browser prevented logoField resetting');
- }
- }
+ const uploads: Promise<any>[] = [];
 
+ if (logo) {
+ uploads.push(this.uploadAsset('logo', logo, this.logoField));
  settings.has_custom_logo = true;
  }
 
  if (background) {
- await this.service.upload('background', background, this.user);
-
- if (this.backgroundField.nativeElement) {
- try {
- this.backgroundField.nativeElement.value = '';
- } catch (e) {
- console.warn('Browser prevented backgroundField resetting');
- }
- }
-
+ uploads.push(
+ this.uploadAsset('background', background, this.backgroundField)
+ );
  settings.has_custom_background = true;
  }
 
- this.settings = settings;
+ await Promise.all(uploads);
 
+ this.settings = settings;
  await this.service.set(this.settings, this.user);
  } catch (e) {
  this.error = e.message;