Uploading Image BLOB in react and sending post request to node express

Question

I'm using React, typescript, React-hook-form, rtk-query and there is a simple form where one of the components is a image, which I'm trying to send with a POST request, but without success. I'm trying to extract a file from the input into a blob and send it to the server. there is my code for frontend

this is my input with upload function

<div onClick={onUpload}>
     <input
      type="file"
      hidden
      {...rest}
      name="wallImage"
      onChange={handleUploadedFile}
      ref={(e) => {
       registerRef(e);
       if (e) {
         hiddenInputRef.current = e;
          }
        }}
      />
    {preview ? (
                <img
                  src={preview}
                  className="h-full w-full rounded-lg"
                  alt="img"
                />
     ) : ( 
    <IconUploadImage/> 
     )};
  </div>

  const onUpload = () => {
    if (hiddenInputRef.current) {
      hiddenInputRef.current?.click();
    }
  };

  const handleUploadedFile = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = (event.target.files as FileList)?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        const blob = new Blob([reader.result as ArrayBuffer], {
          type: file.type,
        });
        setPreview(URL.createObjectURL(blob));
        setValue("wallImage", blob);
      };
      reader.readAsArrayBuffer(file);
    }
  };

that is onSubmit function, and i am using rtk query for createOrder mutation

const [createOrder] = useCreateOrderMutation(); 

  const onSubmit: SubmitHandler<OrderFormSchemaType> = async (data) => {
    try {
      console.log(data.wallImage);
      const result = await createOrder({
        businessType,
        artPosition,
        wallImage: data.wallImage, 
        artDimension: data.wallImageSize.label,
        description: data.description,
        artLocation: data.location,
        artStyle: data.artStyles.map((style) => {
          return { name: style.label };
        }),
      });
      console.log("Order created:", result);
    } catch (error) {
      console.error("Error creating order:", error);
    }
  };

when i trying to send file from postman itself, it stores like that

  "wallImage": {
            "data": {
                "type": "Buffer",
                "data": [
                    104,
                    116,
                    116,
                    112,
                    ...and so many numbers                                    
                   ]
            },
            "contentType": "image/png"
        },
 

but when i am trying to send from myself it doesnt showing me anything in backend i am using multer for storing file here is code

this is mongoose schema

wallImage: {
      data: Buffer,
      contentType: String,
    },

this is controller example for that current code

const {
    businessType,
    artPosition,
    artDimension,
    artLocation,
    artStyle,
    description,
  } = req.body;

  let wallImage;

  if (req.files && req.files["wallImage"] && req.files["wallImage"][0]) {
    wallImage = {
      data: req.files["wallImage"][0].path,
      contentType: req.files["wallImage"][0].mimetype,
    };
  }

and that is middleware multer and cloudinary

const storage = new CloudinaryStorage({
  cloudinary: cloudinary,
  params: {
    folder: "artoaImages",
    format: async (req, file) => {
      const fileExt = file.originalname.split(".").pop().toLowerCase();
      const formatMapping = {
        jpg: "jpg",
        jpeg: "jpg",
        png: "png",
        gif: "gif",
        svg: "svg",
      };
      return formatMapping[fileExt] || "png";
    },
    // public_id: (req, file) => `user_${req.user._id}_timestamp_${Date.now()}`,
    public_id: (req, file) => generatePublicId(req),
  },
});



const generatePublicId = (req) => {
  const userId = req.user ? req.user._id : "guest"; 
  return `user_${userId}_timestamp_${Date.now()}`;
};

const upload = multer({
  storage: storage,
});

export default upload;

I want someone help me to understand where is problem, in backend or in frontend, and what to change in my code what is best practice, how to send file on server or etc. I'll take any advice you give me.