Disabled invalid files and camera (that didn't work anyways) from mobile

luloxi · Sep 30, 2024 · c8d94a8 · c8d94a8
1 parent ce0186c
commit c8d94a8
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/packages/nextjs/app/create/_components/ImageUploader.tsx b/packages/nextjs/app/create/_components/ImageUploader.tsx
@@ -81,7 +81,12 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({ image, setUploaded
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
     >
-      <input type="file" onChange={handleFileInputChange} className="hidden" />
+      <input
+        type="file"
+        accept="image/*" // This will disable non-image files and camera on mobile
+        onChange={handleFileInputChange}
+        className="hidden"
+      />
       {previewImage ? (
         <div className="relative w-full h-full flex items-center justify-center">
           <Image

diff --git a/packages/nextjs/app/profile/_components/ProfilePictureUpload.tsx b/packages/nextjs/app/profile/_components/ProfilePictureUpload.tsx
@@ -93,7 +93,12 @@ const ProfilePictureUpload: React.FC<ProfilePictureUploadProps> = ({
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
     >
-      <input type="file" onChange={handleFileInputChange} className="hidden" />
+      <input
+        type="file"
+        accept="image/*" // This will disable non-image files and camera on mobile
+        onChange={handleFileInputChange}
+        className="hidden"
+      />
       {isEditing ? (
         <div className="absolute inset-0 flex flex-col items-center justify-center text-center">
           {previewImage ? (