diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index 3df75eb29d4..46338e0e4d1 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -50,6 +50,10 @@
 				:class="previewImageClass"
 				alt=""
 				:src="defaultIconUrl">
+			<NcProgressBar v-if="showUploadProgress"
+				class="file-preview__progress"
+				type="circular"
+				:value="uploadProgress" />
 		</span>
 		<span v-else-if="isLoading"
 			v-tooltip="previewTooltip"
@@ -65,7 +69,6 @@
 				<Close />
 			</template>
 		</NcButton>
-		<NcProgressBar v-if="isTemporaryUpload && !isUploadEditor" :value="uploadProgress" />
 		<div v-if="shouldShowFileDetail" class="name-container">
 			{{ fileDetail }}
 		</div>
@@ -538,6 +541,11 @@ export default {
 			}
 		},
 
+		showUploadProgress() {
+			return this.isTemporaryUpload && !this.isUploadEditor
+				&& ['shared', 'sharing', 'successUpload', 'uploading'].includes(this.uploadFile?.status)
+		},
+
 		hasTemporaryImageUrl() {
 			return this.mimetype.startsWith('image/') && this.localUrl
 		},
@@ -628,6 +636,7 @@ export default {
 	border-radius: 16px;
 
 	box-sizing: content-box !important;
+
 	&:hover,
 	&:focus,
 	&:focus-visible {
@@ -648,6 +657,13 @@ export default {
 		transition: outline 0.1s ease-in-out;
 	}
 
+	&__progress {
+		position: absolute;
+		top: 50%;
+		right: 0;
+		transform: translate(100%, -50%);
+	}
+
 	.loading {
 		display: inline-block;
 		min-width: 32px;