Add reset button for file inputs in studio page

8 files changed, 43 insertions, 10 deletions

diff --git a/client/src/app/+video-studio/edit/video-studio-edit.component.html b/client/src/app/+video-studio/edit/video-studio-edit.component.html
index a9f34811f..acfc1a452 100644
--- a/client/src/app/+video-studio/edit/video-studio-edit.component.html
+++ b/client/src/app/+video-studio/edit/video-studio-edit.component.html
@@ -28,8 +28,8 @@
         <div class="form-group">
           <my-reactive-file
             formControlName="file" inputName="addIntroFile" i18n-inputLabel inputLabel="Select the intro video file"
-            [extensions]="videoExtensions" [displayFilename]="true"
-            [ngbTooltip]="getIntroOutroTooltip()"
+            [extensions]="videoExtensions" [displayFilename]="true" [displayReset]="true"
+            [buttonTooltip]="getIntroOutroTooltip()"
           ></my-reactive-file>
         </div>
       </div>
@@ -42,8 +42,8 @@
         <div class="form-group">
           <my-reactive-file
             formControlName="file" inputName="addOutroFile" i18n-inputLabel inputLabel="Select the outro video file"
-            [extensions]="videoExtensions" [displayFilename]="true"
-            [ngbTooltip]="getIntroOutroTooltip()"
+            [extensions]="videoExtensions" [displayFilename]="true" [displayReset]="true"
+            [buttonTooltip]="getIntroOutroTooltip()"
           ></my-reactive-file>
         </div>
       </div>
@@ -56,8 +56,8 @@
         <div class="form-group">
           <my-reactive-file
             formControlName="file" inputName="addWatermarkFile" i18n-inputLabel inputLabel="Select watermark image file"
-            [extensions]="imageExtensions" [displayFilename]="true"
-            [ngbTooltip]="getWatermarkTooltip()"
+            [extensions]="imageExtensions" [displayFilename]="true" [displayReset]="true"
+            [buttonTooltip]="getWatermarkTooltip()"
           ></my-reactive-file>
         </div>
       </div>
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html
index 092952204..a3f0dbdb5 100644
--- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.html
@@ -23,7 +23,7 @@
         <my-reactive-file
           formControlName="captionfile" inputName="captionfile" i18n-inputLabel inputLabel="Select the caption file"
           [extensions]="videoCaptionExtensions" [maxFileSize]="videoCaptionMaxSize" [displayFilename]="true"
-          i18n-ngbTooltip [ngbTooltip]="'(extensions: ' + videoCaptionExtensions.join(', ') + ')'"
+          [buttonTooltip]="getReactiveFileButtonTooltip()"
         ></my-reactive-file>
       </div>
 
diff --git a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts
index 6deadfcbe..95d83b131 100644
--- a/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts
+++ b/client/src/app/+videos/+video-edit/shared/video-caption-add-modal.component.ts
@@ -41,6 +41,10 @@ export class VideoCaptionAddModalComponent extends FormReactive implements OnIni
     return this.serverConfig.videoCaption.file.size.max
   }
 
+  getReactiveFileButtonTooltip () {
+    return `(extensions: ${this.videoCaptionExtensions.join(', ')})`
+  }
+
   ngOnInit () {
     this.serverService.getVideoLanguages()
         .subscribe(languages => this.videoCaptionLanguages = languages)
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 */ }