Error: Image Updating using Server Actions- Error: Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported.

[noushadkhalid]

• I'm encountering an error while attempting to update an image. The error message reads: "Error: Only plain objects, and a few built-ins, can be passed to Server Actions. Classes or null prototypes are not supported." Could you please provide guidance on how to resolve this issue? Below is the relevant code snippet: ```

`'use client'
import { LuSave, LuUndo } from "react-icons/lu";
import { editCategory } from "@/actions";
import { useState } from 'react';
import Image from "next/image";
import {useFormState } from 'react-dom';

const EditCategoryForm = ({category}) => {

const [name, setName] = useState(category.name);

const [filesBuffer, setFilesBuffer] = useState("");

const handleFileChange = async (event) => {
event.preventDefault();

const file = event.target.files[0];

if (file) {
  const reader = new FileReader();

  reader.onloadend = () => {
    setFilesBuffer(reader.result); // No change here
  };

  reader.readAsArrayBuffer(file); 
}
else {

  // No file logic
  console.log('No file');
  return;
}

};

const handleNameChange = (event) => {
setName(event.target.value);
// console.log('name changed')
};
console.log('filesBuffer collected(ArrayBuffer):', filesBuffer);
const editCategoryAction = editCategory.bind(null, category.id, name, filesBuffer);

return (

<>
{category && (

          <div className="space-y-6">
          
            <div>
              <label
                className="mb-2 block text-sm font-medium text-default-900"
                htmlFor="editor"
              >
                Category Name
              </label>
              <div id="editor" className="h-44">
              <input
                  id="description"
                  name="description"
                  rows="5"
                  className="block w-full rounded-lg border border-gray-300 px-4 py-2 resize-none focus:ring-primary focus:border-primary"
                  value={name}
                  onChange={handleNameChange}
               />
              </div>
            </div>
           
            <div>
              <div className="grid gap-6 lg:grid-cols-2">
               
              </div>
            </div>
          </div>
        </div>
      </div>
      <Image  width={350}
    height={350}  src={category.image} alt={category.name} />
      <div className="mb-4">
    <label htmlFor="images" className="block text-gray-700 text-sm font-bold mb-2">
    Category Image (Optional)
    </label>
    <input
      type="file"
      id="images"
      multiple
      name="image"
      onChange={handleFileChange}
      className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
     
    />
    
  </div>
     
      <div className="">
        <div className="flex flex-wrap items-center justify-end gap-4">
          <div className="flex flex-wrap items-center gap-4">
            <button
              type="reset"
            
              className="inline-flex items-center gap-1 rounded-lg border border-primary bg-transparent px-5 py-2 text-center align-middle text-base font-semibold tracking-wide text-primary duration-500 hover:bg-primary hover:text-white"
            >
              <LuUndo size={20} />
              Cancel
            </button>
            <button
              type="submit"
              className="flex items-center justify-center gap-2 rounded-lg bg-primary px-6 py-2.5 text-center text-sm font-semibold text-white shadow-sm transition-all duration-200 hover:bg-primary-500"
            >
              <LuSave size={20} />
              Save
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>

)
}
</>
)
}

export default EditCategoryForm
// server actions
"use server"
import {redirect} from 'next/navigation'
import cloudinary from '@/config/cloudinary';

export async function editCategory(id, name, filesBuffer) {

// Directly use the imageBuffer as the upload data
const imageFileBuffer = filesBuffer;
let imageUrl;

try {
const uploadResult = await new Promise((resolve, reject) => {
cloudinary.uploader.upload_stream({ folder: 'malabar' }, (err, result) => {
if (err) reject(err);
else resolve(result);
}).end(imageFileBuffer);
});

imageUrl = uploadResult.secure_url;

} catch (err) {
console.error(err);
return;
}

console.log("Upload successful. Image URL:", imageUrl);

await db.category.update({
  where: { id: id },
  data: { name: name, image: imageUrl }
});

redirect('/admin/dashboard');

}`