From 1ce3f1fec56f52e6326a22ac91e77ea2b0189fe7 Mon Sep 17 00:00:00 2001
From: Xuan Gu <162244362+xuang7@users.noreply.github.com>
Date: Sun, 7 Dec 2025 17:46:52 -0800
Subject: [PATCH] update.

---
 .../apache/texera/service/resource/DatasetResource.scala    | 2 ++
 .../user-dataset-file-renderer.component.ts                 | 6 ++++++
 2 files changed, 8 insertions(+)

diff --git a/file-service/src/main/scala/org/apache/texera/service/resource/DatasetResource.scala b/file-service/src/main/scala/org/apache/texera/service/resource/DatasetResource.scala
index 2a67440cf0e..c699733c593 100644
--- a/file-service/src/main/scala/org/apache/texera/service/resource/DatasetResource.scala
+++ b/file-service/src/main/scala/org/apache/texera/service/resource/DatasetResource.scala
@@ -1184,6 +1184,8 @@ class DatasetResource {
       val contentType = decodedPathStr.split("\\.").lastOption.map(_.toLowerCase) match {
         case Some("jpg") | Some("jpeg") => "image/jpeg"
         case Some("png")                => "image/png"
+        case Some("webp")               => "image/webp"
+        case Some("gif")                => "image/gif"
         case Some("csv")                => "text/csv"
         case Some("md")                 => "text/markdown"
         case Some("txt")                => "text/plain"
diff --git a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-file-renderer/user-dataset-file-renderer.component.ts b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-file-renderer/user-dataset-file-renderer.component.ts
index c851a8284ea..e5804d260f8 100644
--- a/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-file-renderer/user-dataset-file-renderer.component.ts
+++ b/frontend/src/app/dashboard/component/user/user-dataset/user-dataset-explorer/user-dataset-file-renderer/user-dataset-file-renderer.component.ts
@@ -30,6 +30,8 @@ export const MIME_TYPES = {
   JPEG: "image/jpeg",
   JPG: "image/jpeg",
   PNG: "image/png",
+  WEBP: "image/webp",
+  GIF: "image/gif",
   CSV: "text/csv",
   TXT: "text/plain",
   MD: "text/markdown",
@@ -55,6 +57,8 @@ export function getMimeType(filename: string): string {
 export const MIME_TYPE_SIZE_LIMITS_MB = {
   [MIME_TYPES.JPEG]: 5 * 1024 * 1024, // 5 MB
   [MIME_TYPES.PNG]: 5 * 1024 * 1024, // 5 MB
+  [MIME_TYPES.WEBP]: 5 * 1024 * 1024, // 5 MB
+  [MIME_TYPES.GIF]: 10 * 1024 * 1024, // 10 MB
   [MIME_TYPES.CSV]: 2 * 1024 * 1024, // 2 MB for text-based data files
   [MIME_TYPES.TXT]: 1 * 1024 * 1024, // 1 MB for plain text files
   [MIME_TYPES.MD]: 1 * 1024 * 1024, // 1 MB for MD files
@@ -200,6 +204,8 @@ export class UserDatasetFileRendererComponent implements OnInit, OnChanges, OnDe
             switch (blobMimeType) {
               case MIME_TYPES.PNG:
               case MIME_TYPES.JPEG:
+              case MIME_TYPES.WEBP:
+              case MIME_TYPES.GIF:
                 this.displayImage = true;
                 this.loadSafeURL(blob);
                 break;