From f4ac3c2a3afb25cc0364abe91f33ad4c48b85aaa Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Mon, 12 May 2025 20:26:53 +0000
Subject: [PATCH] [NEB-245] Limit image format types for upload (#7019)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `ImageUploadButton` component by allowing it to accept specific image file types and updating the `ChatBar` component to utilize this feature.

### Detailed summary
- In `ChatBar.tsx`, added `accept` attribute with value `"image/jpeg,image/png,image/webp"` to the file input.
- In `image-upload-button.tsx`, changed `accept` property from a static value `"image/*"` to a dynamic value using `props.accept`.
- Updated `ImageUploadButton` to include `accept` in its props definition.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 apps/dashboard/src/@/components/ui/image-upload-button.tsx     | 3 ++-
 apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/dashboard/src/@/components/ui/image-upload-button.tsx b/apps/dashboard/src/@/components/ui/image-upload-button.tsx
index d8dada3e7ec..803322967fc 100644
--- a/apps/dashboard/src/@/components/ui/image-upload-button.tsx
+++ b/apps/dashboard/src/@/components/ui/image-upload-button.tsx
@@ -11,6 +11,7 @@ interface ImageUploadProps {
   variant?: React.ComponentProps<typeof Button>["variant"];
   className?: string;
   multiple?: boolean;
+  accept: string;
 }
 
 export function ImageUploadButton(props: ImageUploadProps) {
@@ -34,7 +35,7 @@ export function ImageUploadButton(props: ImageUploadProps) {
         ref={fileInputRef}
         type="file"
         multiple={props.multiple}
-        accept="image/*"
+        accept={props.accept}
         onChange={handleFileChange}
         className="hidden"
         aria-label="Upload image"
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
index e72a2152a4f..d2137775e82 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
@@ -254,6 +254,7 @@ export function ChatBar(props: {
                 <ImageUploadButton
                   multiple
                   value={undefined}
+                  accept="image/jpeg,image/png,image/webp"
                   onChange={(files) => {
                     const totalFiles = files.length + images.length;