FileInput updates

Author: MananTank

apps/dashboard/src/@/components/blocks/Img.tsx

@@ -11,6 +11,7 @@ type imgElementProps = React.DetailedHTMLProps<
   skeleton?: React.ReactNode;
   fallback?: React.ReactNode;
   src: string | undefined;
+  containerClassName?: string;
 };
 
 export function Img(props: imgElementProps) {
@@ -47,7 +48,7 @@ export function Img(props: imgElementProps) {
   }, []);
 
   return (
-    <div className="relative shrink-0">
+    <div className={cn("relative shrink-0", props.containerClassName)}>
       <img
         {...restProps}
         // avoid setting empty src string to prevent request to the entire page

apps/dashboard/src/app/(app)/account/settings/AccountSettingsPageUI.tsx

@@ -139,11 +139,10 @@ function AccountAvatarFormControl(props: {
         <FileInput
           client={props.client}
           accept={{ "image/*": [] }}
-          value={avatar}
+          value={avatar || accountAvatarUrl}
           setValue={setAvatar}
           className="w-20 rounded-full lg:w-28"
           disableHelperText
-          fileUrl={accountAvatarUrl}
         />
       </div>
     </SettingsCard>

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPageUI.tsx

@@ -220,12 +220,11 @@ function TeamAvatarFormControl(props: {
         </div>
         <FileInput
           accept={{ "image/*": [] }}
-          value={teamAvatar}
+          value={teamAvatar || teamAvatarUrl}
           setValue={setTeamAvatar}
           className="w-20 rounded-full lg:w-28"
           disableHelperText
           client={props.client}
-          fileUrl={teamAvatarUrl}
         />
       </div>
     </SettingsCard>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/file-preview.tsx

@@ -9,6 +9,7 @@ export function FilePreview(props: {
   fallback?: React.ReactNode;
   className?: string;
   client: ThirdwebClient;
+  imgContainerClassName?: string;
 }) {
   const [objectUrl, setObjectUrl] = useState<string>("");
 
@@ -31,12 +32,14 @@ export function FilePreview(props: {
   const isImage =
     props.srcOrFile instanceof File &&
     props.srcOrFile.type.startsWith("image/");
+
   if (isImage) {
     return (
       <Img
         src={objectUrl}
         className={props.className}
         fallback={props.fallback}
+        containerClassName={props.imgContainerClassName}
       />
     );
   }

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/settings/ProjectGeneralSettingsPage.tsx

@@ -505,12 +505,11 @@ function ProjectImageSetting(props: {
         </div>
         <FileInput
           accept={{ "image/*": [] }}
-          value={projectAvatar}
+          value={projectAvatar || projectAvatarUrl}
           setValue={setProjectAvatar}
           client={props.client}
           className="w-20 rounded-full lg:w-28"
           disableHelperText
-          fileUrl={projectAvatarUrl}
         />
       </div>
     </SettingsCard>

apps/dashboard/src/app/pay/components/client/PaymentLinkForm.client.tsx

@@ -314,7 +314,6 @@ export function PaymentLinkForm() {
                         isDisabledText="Uploading..."
                         selectOrUpload="Upload"
                         helperText="image"
-                        fileUrl={imageUri}
                       />
                     </div>
                   </div>

apps/dashboard/src/components/embedded-wallets/Configure/index.tsx

@@ -448,7 +448,7 @@ function AppImageFormControl(props: {
         <FileInput
           client={props.client}
           accept={{ "image/*": [] }}
-          value={image}
+          value={image || resolveUrl}
           setValue={async (v) => {
             try {
               setImage(v);
@@ -463,7 +463,6 @@ function AppImageFormControl(props: {
           }}
           className="w-24 rounded-full bg-background lg:w-28"
           disableHelperText
-          fileUrl={resolveUrl}
         />
 
         {uploadImage.isPending && (

apps/dashboard/src/components/shared/FileInput.tsx

@@ -2,15 +2,16 @@
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { FilePlusIcon, UploadIcon } from "lucide-react";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import {
   type Accept,
   type DropEvent,
   type FileRejection,
   useDropzone,
 } from "react-dropzone";
 import type { ThirdwebClient } from "thirdweb";
-import { MediaRenderer } from "thirdweb/react";
+// import { MediaRenderer } from "thirdweb/react";
+import { FilePreview } from "../../app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/_common/file-preview";
 
 interface IFileInputProps {
   accept?: Accept;
@@ -27,7 +28,7 @@ interface IFileInputProps {
   children?: React.ReactNode;
   className?: string;
   disableHelperText?: boolean;
-  fileUrl?: string;
+  // fileUrl?: string;
   client: ThirdwebClient;
 }
 
@@ -46,7 +47,6 @@ export const FileInput: React.FC<IFileInputProps> = ({
   previewMaxWidth,
   client,
   disableHelperText,
-  fileUrl: fileUrlFallback,
 }) => {
   const onDrop = useCallback<
     <T extends File>(
@@ -67,9 +67,6 @@ export const FileInput: React.FC<IFileInputProps> = ({
     accept,
   });
 
-  const file: File | null =
-    typeof window !== "undefined" && value instanceof File ? value : null;
-
   const helperTextOrFile = helperText
     ? helperText
     : accept &&
@@ -80,22 +77,6 @@ export const FileInput: React.FC<IFileInputProps> = ({
 
   const createdBlobUrl = useRef<string | null>(null);
 
-  const fileBlobUrl = useMemo(() => {
-    if (!file) {
-      return undefined;
-    }
-
-    const blobUrl = fileToBlobUrl(file);
-    // eslint-disable-next-line react-compiler/react-compiler
-    createdBlobUrl.current = blobUrl;
-    return blobUrl;
-  }, [file]);
-
-  const fileUrl =
-    typeof value === "string" ? value : fileBlobUrl || fileUrlFallback;
-
-  console.log({ fileUrl, value });
-
   // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
     return () => {
@@ -144,17 +125,16 @@ export const FileInput: React.FC<IFileInputProps> = ({
             className={cn(
               "relative cursor-pointer overflow-hidden",
               "flex w-full items-center justify-center border border-border hover:bg-accent hover:ring-2 hover:ring-ring",
-              // fileUrl ? "bg-transparent" : "bg-card",
+              value ? "bg-transparent" : "bg-card",
               className,
             )}
           >
-            {fileUrl ? (
-              <MediaRenderer
-                src={fileUrl}
+            {value ? (
+              <FilePreview
+                srcOrFile={value}
                 client={client}
-                controls={false}
-                requireInteraction={false}
-                className="[&>div]:!bg-muted h-full w-full"
+                className="h-full w-full"
+                imgContainerClassName="h-full w-full"
               />
             ) : (
               <div className="flex flex-col items-center gap-2.5 text-muted-foreground">
@@ -184,8 +164,3 @@ export const FileInput: React.FC<IFileInputProps> = ({
     </div>
   );
 };
-
-function fileToBlobUrl(file: File) {
-  const blob = new Blob([file], { type: file.type });
-  return URL.createObjectURL(blob);
-}