diff --git a/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.html b/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.html
index f62ed59ecca832eb2ce8a71289d9d0b499881f26..78af6beee7c9e617edf5cf3cf6bd5d75c1d85b17 100644
--- a/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.html
+++ b/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.html
@@ -1,6 +1,14 @@
-<input data-test-id="file-upload-input"
-	[id]="myId" type="file" [accept]="accept"
-	(change)="onFileChanged($event)">
-<label [attr.for]="myId" matRipple aria-label="attachment icon">
-	<mat-icon>attach_file</mat-icon>
-</label>
+<ng-container *ngIf="uploadInProgress$ | async as uploadInProgress">
+	<input data-test-id="file-upload-input"
+			[id]="myId" type="file" [accept]="accept"
+			(change)="onFileChanged($event)">
+	<label [attr.for]="myId" matRipple aria-label="attachment icon">
+		<mat-icon *ngIf="!uploadInProgress.loading">attach_file</mat-icon>
+
+		<goofy-client-spinner
+				[stateResource]="uploadInProgress"
+				[diameter]="22"
+				padding="0">
+		</goofy-client-spinner>
+	</label>
+</ng-container>
diff --git a/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.scss b/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.scss
index 9917b0cb761694273306ec6ca323c9883adc4335..4f6ab900dd34ee5153f25af6eb05c4912f03cce7 100644
--- a/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.scss
+++ b/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.scss
@@ -3,6 +3,7 @@ $size: 40px;
 :host {
 	margin: 4px 0;
 	display: block;
+	position: relative;
 }
 
 input {
@@ -27,3 +28,19 @@ label:hover,
 :host:focus-within label {
 	background-color: rgba(#000, 0.16);
 }
+
+[disabled] {
+	background-color: rgba(#000, 0.08);
+}
+
+goofy-client-spinner {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: flex;
+	height: 100%;
+	width: 100%;
+	justify-content: center;
+	align-items: center;
+	pointer-events: none;
+}
diff --git a/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.spec.ts b/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.spec.ts
index 3b0aeee37729796cef45f895d35d0ee71c09aa69..6af2d2fefbbde21c62bf3f10330ee2167dc3c96c 100644
--- a/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.spec.ts
+++ b/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.spec.ts
@@ -2,6 +2,8 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FileUploadComponent } from './file-upload.component';
 import { MatIcon } from '@angular/material/icon';
+import { MockComponent } from 'ng-mocks';
+import { SpinnerComponent } from '@goofy-client/ui';
 
 describe('FileUploadComponent', () => {
   let component: FileUploadComponent;
@@ -11,7 +13,8 @@ describe('FileUploadComponent', () => {
     await TestBed.configureTestingModule({
       declarations: [
       	FileUploadComponent,
-				MatIcon
+				MatIcon,
+				MockComponent(SpinnerComponent)
 			]
     })
     .compileComponents();
diff --git a/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.ts b/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.ts
index 9249f5d9b4c44d5d5d3150e4989ff67b976b8d3b..eb96f4ba1f94613f8f88adb0a0d2ee7216f79b14 100644
--- a/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.ts
+++ b/goofy-client/libs/ui/src/lib/ui/file-upload/file-upload.component.ts
@@ -1,5 +1,7 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { uniqueId } from 'lodash-es';
+import { Observable } from 'rxjs';
+import { StateResource } from '@goofy-client/tech-shared';
 
 @Component({
 	selector: 'goofy-client-file-upload',
@@ -8,6 +10,7 @@ import { uniqueId } from 'lodash-es';
 })
 export class FileUploadComponent {
 	@Input() accept: string = '*/*';
+	@Input() uploadInProgress$: Observable<StateResource<any>>;
 
 	@Output() fileChanged: EventEmitter<File> = new EventEmitter();
 
diff --git a/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-attachments/wiedervorlage-attachments.component.html b/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-attachments/wiedervorlage-attachments.component.html
index 25bdd7df198d7005440daef8cadfe16e6f710544..e4e8f11d9e9eeb6b64948d4fdf2bbf37c76094f0 100644
--- a/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-attachments/wiedervorlage-attachments.component.html
+++ b/goofy-client/libs/wiedervorlage/src/lib/wiedervorlage-attachments/wiedervorlage-attachments.component.html
@@ -1,14 +1,15 @@
 <ng-container *ngIf="attachments$ | async as attachmentStateResource">
 	<goofy-client-spinner [stateResource]="attachmentStateResource">
-	
+
 		<goofy-client-anhang-list-in-wiedervorlage data-test-id="wiedervorlage-attachment-list"
-			[attachments]="attachmentStateResource.resource" [deletable]="true" 
-			(deleteAttachment)="deleteAttachment($event)">
+				[attachments]="attachmentStateResource.resource" [deletable]="true"
+				(deleteAttachment)="deleteAttachment($event)">
 		</goofy-client-anhang-list-in-wiedervorlage>
 
-	</goofy-client-spinner>	
+	</goofy-client-spinner>
 </ng-container>
 
-<goofy-client-spinner [stateResource]="uploadInProgress$ | async">
-	<goofy-client-file-upload (fileChanged)="uploadFile($event)" data-test-id="wiedervorlage-file-upload"></goofy-client-file-upload>
-</goofy-client-spinner>
+<goofy-client-file-upload data-test-id="wiedervorlage-file-upload"
+		(fileChanged)="uploadFile($event)"
+		[uploadInProgress$]="uploadInProgress$">
+</goofy-client-file-upload>