From 482edc2dcb375e87a39e8fc424081dcab322e1d8 Mon Sep 17 00:00:00 2001
From: Harry Martland <HarryEMartland@gmail.com>
Date: Fri, 22 Nov 2024 17:47:49 +0000
Subject: [PATCH 1/3] prompts the user with their camera on mobile devices
 rather than file upload

---
 app/components/assets/form.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/components/assets/form.tsx b/app/components/assets/form.tsx
index 8e89026d3..04d349182 100644
--- a/app/components/assets/form.tsx
+++ b/app/components/assets/form.tsx
@@ -201,6 +201,7 @@ export const AssetForm = ({
                 onChange={validateFile}
                 label={"Main image"}
                 hideLabel
+                capture={"environment"}
                 error={fileError}
                 className="mt-2"
                 inputClassName="border-0 shadow-none p-0 rounded-none"

From a9e42ddc4bab62d02c20f1003c456475adaeffc4 Mon Sep 17 00:00:00 2001
From: Harry Martland <HarryEMartland@gmail.com>
Date: Mon, 25 Nov 2024 17:33:32 +0000
Subject: [PATCH 2/3] fix: android 14 camera file updload issue

---
 app/components/assets/form.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/assets/form.tsx b/app/components/assets/form.tsx
index 04d349182..a3e22d2a3 100644
--- a/app/components/assets/form.tsx
+++ b/app/components/assets/form.tsx
@@ -195,13 +195,13 @@ export const AssetForm = ({
               </p>
               <Input
                 disabled={disabled}
-                accept="image/png,.png,image/jpeg,.jpg,.jpeg"
+                //Android 14 camera workaround https://stackoverflow.com/a/79163998/1894472
+                accept="image/png,.png,image/jpeg,.jpg,.jpeg,android/force-camera-workaround"
                 name="mainImage"
                 type="file"
                 onChange={validateFile}
                 label={"Main image"}
                 hideLabel
-                capture={"environment"}
                 error={fileError}
                 className="mt-2"
                 inputClassName="border-0 shadow-none p-0 rounded-none"

From e7b31bc58b43316c9f214df4608e573300d1bf15 Mon Sep 17 00:00:00 2001
From: Harry Martland <HarryEMartland@gmail.com>
Date: Tue, 26 Nov 2024 18:34:02 +0000
Subject: [PATCH 3/3] fix: applys android 14 camera workaround to all image
 file inputs

---
 app/components/assets/form.tsx                  | 4 ++--
 app/components/kits/form.tsx                    | 3 ++-
 app/components/location/form.tsx                | 3 ++-
 app/components/workspace/edit-form.tsx          | 3 ++-
 app/components/workspace/form.tsx               | 3 ++-
 app/routes/_layout+/account-details.general.tsx | 3 ++-
 app/utils/constants.ts                          | 4 ++++
 7 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/app/components/assets/form.tsx b/app/components/assets/form.tsx
index a3e22d2a3..7364e2ad4 100644
--- a/app/components/assets/form.tsx
+++ b/app/components/assets/form.tsx
@@ -12,6 +12,7 @@ import { z } from "zod";
 import { updateDynamicTitleAtom } from "~/atoms/dynamic-title-atom";
 import { fileErrorAtom, validateFileAtom } from "~/atoms/file";
 import type { loader } from "~/routes/_layout+/assets.$assetId_.edit";
+import { ACCEPT_SUPPORTED_IMAGES } from "~/utils/constants";
 import type { CustomFieldZodSchema } from "~/utils/custom-fields";
 import { mergedSchema } from "~/utils/custom-fields";
 import { isFormProcessing } from "~/utils/form";
@@ -195,8 +196,7 @@ export const AssetForm = ({
               </p>
               <Input
                 disabled={disabled}
-                //Android 14 camera workaround https://stackoverflow.com/a/79163998/1894472
-                accept="image/png,.png,image/jpeg,.jpg,.jpeg,android/force-camera-workaround"
+                accept={ACCEPT_SUPPORTED_IMAGES}
                 name="mainImage"
                 type="file"
                 onChange={validateFile}
diff --git a/app/components/kits/form.tsx b/app/components/kits/form.tsx
index 2dca28716..572b29659 100644
--- a/app/components/kits/form.tsx
+++ b/app/components/kits/form.tsx
@@ -5,6 +5,7 @@ import { useZorm } from "react-zorm";
 import { z } from "zod";
 import { updateDynamicTitleAtom } from "~/atoms/dynamic-title-atom";
 import { fileErrorAtom, validateFileAtom } from "~/atoms/file";
+import { ACCEPT_SUPPORTED_IMAGES } from "~/utils/constants";
 import { isFormProcessing } from "~/utils/form";
 import { tw } from "~/utils/tw";
 import { zodFieldIsRequired } from "~/utils/zod";
@@ -122,7 +123,7 @@ export default function KitsForm({
             </p>
             <Input
               disabled={disabled}
-              accept="image/png,.png,image/jpeg,.jpg,.jpeg"
+              accept={ACCEPT_SUPPORTED_IMAGES}
               name="image"
               type="file"
               onChange={validateFile}
diff --git a/app/components/location/form.tsx b/app/components/location/form.tsx
index f70c527d3..8f867f30f 100644
--- a/app/components/location/form.tsx
+++ b/app/components/location/form.tsx
@@ -7,6 +7,7 @@ import { updateDynamicTitleAtom } from "~/atoms/dynamic-title-atom";
 import { fileErrorAtom, validateFileAtom } from "~/atoms/file";
 import type { action as editLocationAction } from "~/routes/_layout+/locations.$locationId_.edit";
 import type { action as newLocationAction } from "~/routes/_layout+/locations.new";
+import { ACCEPT_SUPPORTED_IMAGES } from "~/utils/constants";
 import { isFormProcessing } from "~/utils/form";
 import { zodFieldIsRequired } from "~/utils/zod";
 import { Form } from "../custom-form";
@@ -91,7 +92,7 @@ export const LocationForm = ({ name, address, description }: Props) => {
             </p>
             <Input
               // disabled={disabled}
-              accept="image/png,.png,image/jpeg,.jpg,.jpeg"
+              accept={ACCEPT_SUPPORTED_IMAGES}
               name="image"
               type="file"
               onChange={validateFile}
diff --git a/app/components/workspace/edit-form.tsx b/app/components/workspace/edit-form.tsx
index aa995a71c..4acb5d0a6 100644
--- a/app/components/workspace/edit-form.tsx
+++ b/app/components/workspace/edit-form.tsx
@@ -6,6 +6,7 @@ import { z } from "zod";
 import { updateDynamicTitleAtom } from "~/atoms/dynamic-title-atom";
 import { fileErrorAtom, validateFileAtom } from "~/atoms/file";
 import type { loader } from "~/routes/_layout+/account-details.workspace.$workspaceId.edit";
+import { ACCEPT_SUPPORTED_IMAGES } from "~/utils/constants";
 import { isFormProcessing } from "~/utils/form";
 import { tw } from "~/utils/tw";
 import { zodFieldIsRequired } from "~/utils/zod";
@@ -111,7 +112,7 @@ export const WorkspaceEditForm = ({
             </p>
             <Input
               // disabled={disabled}
-              accept="image/png,.png,image/jpeg,.jpg,.jpeg"
+              accept={ACCEPT_SUPPORTED_IMAGES}
               name="image"
               type="file"
               onChange={validateFile}
diff --git a/app/components/workspace/form.tsx b/app/components/workspace/form.tsx
index d661593fd..c6642fe7d 100644
--- a/app/components/workspace/form.tsx
+++ b/app/components/workspace/form.tsx
@@ -8,6 +8,7 @@ import { updateDynamicTitleAtom } from "~/atoms/dynamic-title-atom";
 import { fileErrorAtom, validateFileAtom } from "~/atoms/file";
 import { useSearchParams } from "~/hooks/search-params";
 import type { loader } from "~/routes/_layout+/account-details.workspace.new";
+import { ACCEPT_SUPPORTED_IMAGES } from "~/utils/constants";
 import { isFormProcessing } from "~/utils/form";
 import { zodFieldIsRequired } from "~/utils/zod";
 import { Form } from "../custom-form";
@@ -101,7 +102,7 @@ export const WorkspaceForm = ({ name, currency, children }: Props) => {
             </p>
             <Input
               // disabled={disabled}
-              accept="image/png,.png,image/jpeg,.jpg,.jpeg"
+              accept={ACCEPT_SUPPORTED_IMAGES}
               name="image"
               type="file"
               onChange={validateFile}
diff --git a/app/routes/_layout+/account-details.general.tsx b/app/routes/_layout+/account-details.general.tsx
index 7b07969e2..c358ac9c2 100644
--- a/app/routes/_layout+/account-details.general.tsx
+++ b/app/routes/_layout+/account-details.general.tsx
@@ -39,6 +39,7 @@ import {
 import type { UpdateUserPayload } from "~/modules/user/types";
 import { appendToMetaTitle } from "~/utils/append-to-meta-title";
 import { checkExhaustiveSwitch } from "~/utils/check-exhaustive-switch";
+import { ACCEPT_SUPPORTED_IMAGES } from "~/utils/constants";
 import { delay } from "~/utils/delay";
 import { sendNotification } from "~/utils/emitter/send-notification.server";
 import { ADMIN_EMAIL, SERVER_URL } from "~/utils/env";
@@ -457,7 +458,7 @@ export default function UserPage() {
               <p>Accepts PNG, JPG or JPEG (max.4 MB)</p>
               <Input
                 disabled={disabled}
-                accept="image/png,.png,image/jpeg,.jpg,.jpeg"
+                accept={ACCEPT_SUPPORTED_IMAGES}
                 name="profile-picture"
                 type="file"
                 onChange={validateFile}
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
index b068d9550..49f5b0009 100644
--- a/app/utils/constants.ts
+++ b/app/utils/constants.ts
@@ -7,3 +7,7 @@ export const INVITE_EXPIRY_TTL_DAYS = 5;
 /** Default length of custom cuid2 */
 export const DEFAULT_CUID_LENGTH = 10;
 export const LEGACY_CUID_LENGTH = 25;
+
+//Android 14 camera workaround https://stackoverflow.com/a/79163998/1894472
+export const ACCEPT_SUPPORTED_IMAGES =
+  "image/png,.png,image/jpeg,.jpg,.jpeg,android/force-camera-workaround";