Merge pull request #1448 from HarryEMartland/mobile-image-prompt-camera

Mobile Camera Image Upload

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,7 +196,7 @@ export const AssetForm = ({
               </p>
               <Input
                 disabled={disabled}
-                accept="image/png,.png,image/jpeg,.jpg,.jpeg"
+                accept={ACCEPT_SUPPORTED_IMAGES}
                 name="mainImage"
                 type="file"
                 onChange={validateFile}

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}

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}

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}

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}

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}

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";