Add reset button for file inputs in studio page

5 files changed, 32 insertions, 3 deletions

diff --git a/client/src/app/shared/shared-forms/preview-upload.component.html b/client/src/app/shared/shared-forms/preview-upload.component.html
index 7c3a2b588..11e7bdf7f 100644
--- a/client/src/app/shared/shared-forms/preview-upload.component.html
+++ b/client/src/app/shared/shared-forms/preview-upload.component.html
@@ -2,7 +2,7 @@
   <div class="preview-container">
     <my-reactive-file
       [inputName]="inputName" [inputLabel]="inputLabel" [extensions]="videoImageExtensions" [maxFileSize]="maxVideoImageSize" placement="right"
-      icon="edit" (fileChanged)="onFileChanged($event)" [ngbTooltip]="'(extensions: '+ videoImageExtensions +', '+ maxSizeText +': '+ maxVideoImageSizeInBytes +')'"
+      icon="edit" (fileChanged)="onFileChanged($event)" [buttonTooltip]="getReactiveFileButtonTooltip()"
     ></my-reactive-file>
 
     <img *ngIf="imageSrc" [ngStyle]="{ width: previewWidth, height: previewHeight }" [src]="imageSrc" class="preview" />
diff --git a/client/src/app/shared/shared-forms/preview-upload.component.ts b/client/src/app/shared/shared-forms/preview-upload.component.ts
index a857b0a4f..46920dd27 100644
--- a/client/src/app/shared/shared-forms/preview-upload.component.ts
+++ b/client/src/app/shared/shared-forms/preview-upload.component.ts
@@ -50,6 +50,10 @@ export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
     return this.bytesPipe.transform(this.maxVideoImageSize)
   }
 
+  getReactiveFileButtonTooltip () {
+    return $localize`(extensions: ${this.videoImageExtensions}, ${this.maxSizeText}: ${this.maxVideoImageSizeInBytes})`
+  }
+
   ngOnInit () {
     this.serverConfig = this.serverService.getHTMLConfig()
 
diff --git a/client/src/app/shared/shared-forms/reactive-file.component.html b/client/src/app/shared/shared-forms/reactive-file.component.html
index f6bf5f9ae..d18a99d46 100644
--- a/client/src/app/shared/shared-forms/reactive-file.component.html
+++ b/client/src/app/shared/shared-forms/reactive-file.component.html
@@ -1,5 +1,5 @@
 <div class="root">
-  <div class="button-file" [ngClass]="{ 'with-icon': !!icon }">
+  <div class="button-file" [ngClass]="{ 'with-icon': !!icon }" [ngbTooltip]="buttonTooltip">
     <my-global-icon *ngIf="icon" [iconName]="icon"></my-global-icon>
 
     <span>{{ inputLabel }}</span>
@@ -12,4 +12,8 @@
   </div>
 
   <div class="filename" *ngIf="displayFilename === true && filename">{{ filename }}</div>
+
+  <button *ngIf="displayReset && filename" i18n class="reset-button" (click)="reset()">
+    Reset
+  </button>
 </div>
diff --git a/client/src/app/shared/shared-forms/reactive-file.component.scss b/client/src/app/shared/shared-forms/reactive-file.component.scss
index f8db1aa25..7643f29af 100644
--- a/client/src/app/shared/shared-forms/reactive-file.component.scss
+++ b/client/src/app/shared/shared-forms/reactive-file.component.scss
@@ -20,4 +20,15 @@
 
     font-weight: $font-semibold;
   }
+
+  .reset-button {
+    @include peertube-button;
+    @include grey-button;
+
+    font-size: 80%;
+    margin-left: 5px;
+    line-height: initial;
+    padding: 2px 5px;
+    height: auto;
+  }
 }
diff --git a/client/src/app/shared/shared-forms/reactive-file.component.ts b/client/src/app/shared/shared-forms/reactive-file.component.ts
index 9d27ad07a..50b7d4c3e 100644
--- a/client/src/app/shared/shared-forms/reactive-file.component.ts
+++ b/client/src/app/shared/shared-forms/reactive-file.component.ts
@@ -20,8 +20,12 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
   @Input() inputName: string
   @Input() extensions: string[] = []
   @Input() maxFileSize: number
+
   @Input() displayFilename = false
+  @Input() displayReset = false
+
   @Input() icon: GlobalIconName
+  @Input() buttonTooltip: string
 
   @Output() fileChanged = new EventEmitter<Blob>()
 
@@ -62,8 +66,14 @@ export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
       this.file = file
 
       this.propagateChange(this.file)
-      this.fileChanged.emit(this.file)
     }
+    this.fileChanged.emit(this.file)
+  }
+
+  reset () {
+    this.writeValue(undefined)
+    this.propagateChange(undefined)
+    this.fileChanged.emit(undefined)
   }
 
   propagateChange = (_: any) => { /* empty */ }