Merge pull request #1501 from Shelf-nu/1500-bug-inconsistent-image-up…

…load improvement: Increased upload limit to 8mb and slightly increased size of stored image
Shelf-nu · Dec 10, 2024 · d5be3a2 · d5be3a2
2 parents 992b17f + 265dc7c
commit d5be3a2
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/app/atoms/file.ts b/app/atoms/file.ts
@@ -12,7 +12,7 @@ export const validateFileAtom = atom(
       const file = event?.target?.files?.[0];
       if (file) {
         const allowedType = verifyAccept(file.type, event.target.accept);
-        const allowedSize = file.size < 4_000_000;
+        const allowedSize = file.size < 8_000_000;
 
         if (!allowedType) {
           event.target.value = "";
@@ -22,7 +22,7 @@ export const validateFileAtom = atom(
         if (!allowedSize) {
           /** Clean the field */
           event.target.value = "";
-          return "Max file size is 4MB";
+          return "Max file size is 8MB";
         }
 
         return undefined;

diff --git a/app/components/assets/form.tsx b/app/components/assets/form.tsx
@@ -30,6 +30,11 @@ import { AbsolutePositionedHeaderActions } from "../layout/header/absolute-posit
 import { Button } from "../shared/button";
 import { ButtonGroup } from "../shared/button-group";
 import { Card } from "../shared/card";
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "../shared/hover-card";
 import { Image } from "../shared/image";
 import {
   Tooltip,
@@ -192,7 +197,16 @@ export const AssetForm = ({
             ) : null}
             <div>
               <p className="hidden lg:block">
-                Accepts PNG, JPG or JPEG (max.4 MB)
+                <HoverCard openDelay={50} closeDelay={50}>
+                  <HoverCardTrigger className={tw("inline-flex w-full  ")}>
+                    Accepts PNG, JPG or JPEG (max.8 MB)
+                  </HoverCardTrigger>
+                  <HoverCardContent side="left">
+                    Images will be automatically resized on upload. Width will
+                    be set at 1200px and height will be adjusted accordingly to
+                    keep the aspect ratio.
+                  </HoverCardContent>
+                </HoverCard>
               </p>
               <Input
                 disabled={disabled}

diff --git a/app/modules/asset/service.server.ts b/app/modules/asset/service.server.ts
@@ -1254,7 +1254,7 @@ export async function updateAssetMainImage({
         Date.now()
       )}`,
       resizeOptions: {
-        width: 800,
+        width: 1200,
         withoutEnlargement: true,
       },
     });