feat: Enhance ImageDialog with FormData support and crop options

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.206",
+  "version": "1.0.207",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

src/Components/ImageDialog/ImageDialog.stories.tsx

@@ -1,6 +1,7 @@
 import { createRef } from "react";
 
 import ImageDialog from ".";
+import { IImageDialogOnSaveArgs } from "./types";
 
 export default {
   title: "Components / ImageDialog",
@@ -21,10 +22,12 @@ export const Default = () => {
     dialogRef.current?.close();
   };
 
-  const handleSave = async ({ base64 }: { base64: string }) => {
+  const handleSave = async (args: IImageDialogOnSaveArgs) => {
+    console.log(args);
+
     return new Promise(resolve => {
       setTimeout(() => {
-        resolve(base64);
+        resolve(args.formData);
       }, 0);
     });
   };
@@ -37,6 +40,10 @@ export const Default = () => {
       onClose={handleClose}
       onOpen={handleOpen}
       onSave={handleSave}
+      cropOptions={{
+        aspect: 1,
+        circularCrop: true
+      }}
     />
   );
 };

src/Components/ImageDialog/index.tsx

@@ -19,7 +19,18 @@ import { IImageDialogProps } from "./types";
 
 const ImageDialog = forwardRef<HTMLDialogElement, IImageDialogProps>(
   (
-    { className, isOpen, onClose, onOpen, onSave, aspect = 1, buttonText },
+    {
+      className,
+      isOpen,
+      onClose,
+      onOpen,
+      onSave,
+      cropOptions = {
+        aspect: 1,
+        circularCrop: false
+      },
+      buttonText
+    },
     forwardedRef
   ) => {
     const [validationError, setValidationError] =
@@ -38,8 +49,14 @@ const ImageDialog = forwardRef<HTMLDialogElement, IImageDialogProps>(
         setIsSaving(true);
         await onSave?.({
           blob: croppedImage,
-          base64: await ImageUtils.blobToBase64(croppedImage)
+          base64: await ImageUtils.blobToBase64(croppedImage),
+          formData: ImageUtils.blobToFormData(
+            croppedImage,
+            imageInputSelection?.file.fileName ?? "",
+            imageInputSelection?.file.mimeType ?? ""
+          )
         });
+
         setImageInputSelection(null);
         setCroppedImage(null);
 
@@ -69,7 +86,8 @@ const ImageDialog = forwardRef<HTMLDialogElement, IImageDialogProps>(
             <div>
               <div className='yl:relative yl:w-full yl:overflow-hidden'>
                 <ImageCrop
-                  aspect={aspect}
+                  aspect={cropOptions.aspect}
+                  circularCrop={cropOptions.circularCrop}
                   src={imageInputSelection?.file.blob ?? null}
                   onComplete={blob => {
                     setCroppedImage(blob);

src/Components/ImageDialog/types.ts

@@ -1,14 +1,19 @@
 import { IDialogProps } from "Components/Dialog/types";
 
+export interface IImageDialogOnSaveArgs {
+  blob: Blob;
+  base64: string;
+  formData: FormData;
+}
+
+export interface IImageDialogCropOptions {
+  aspect?: number;
+  circularCrop?: boolean;
+}
+
 export interface IImageDialogProps extends IDialogProps {
   onComplete?: (blob: Blob) => void;
-  onSave?: ({
-    blob,
-    base64
-  }: {
-    blob: Blob;
-    base64: string;
-  }) => Promise<unknown>;
-  aspect?: number;
+  onSave?: (args: IImageDialogOnSaveArgs) => Promise<unknown>;
+  cropOptions?: IImageDialogCropOptions;
   buttonText: string;
 }

src/Utils/Image/index.ts

@@ -128,6 +128,20 @@ class ImageUtils {
     });
   };
 
+  public static blobToFormData = (
+    blob: Blob,
+    fileName: string,
+    mimeType: string
+  ): FormData => {
+    const formData = new FormData();
+
+    formData.append("fileName", fileName);
+    formData.append("mimeType", mimeType);
+    formData.append("file", blob);
+
+    return formData;
+  };
+
   public static base64ToBlob = (base64: string, mimeType: string): Blob => {
     const parts = base64.split(",");
     if (parts.length < 2) {

src/index.ts

@@ -20,6 +20,7 @@ export { default as Dropdown } from "Components/Dropdown";
 export { default as Error } from "Components/Error";
 export { default as Icon } from "Components/Icon";
 export { default as ImageCrop } from "Components/ImageCrop";
+export { default as ImageDialog } from "Components/ImageDialog";
 export { default as ImageSelector } from "Components/ImageSelector";
 export { default as ItemActions } from "Components/ItemActions";
 export { default as Pagination } from "Components/Pagination";

src/types.ts

@@ -18,6 +18,7 @@ import * as DropdownTypes from "./Components/Dropdown/types";
 import * as ErrorTypes from "./Components/Error/types";
 import * as IconTypes from "./Components/Icon/types";
 import * as ImageCropTypes from "./Components/ImageCrop/types";
+import * as ImageDialogTypes from "./Components/ImageDialog/types";
 import * as ImageSelectorTypes from "./Components/ImageSelector/types";
 import * as ImageInputTypes from "./Components/Inputs/ImageInput/types";
 import * as InputTypes from "./Components/Inputs/types";
@@ -42,18 +43,19 @@ export {
   BadgeTypes,
   BookmarkTypes,
   ButtonTypes,
-  CTATypes,
-  CardTypes,
   CardsTypes,
+  CardTypes,
   CharacterCounterTypes,
   ContentWidgetTypes,
+  CTATypes,
   DialogTypes,
   DividerTypes,
   DraggableListTypes,
   DropdownTypes,
   ErrorTypes,
   IconTypes,
   ImageCropTypes,
+  ImageDialogTypes,
   ImageInputTypes,
   ImageSelectorTypes,
   InputTypes,