Node.js controller doesn't save UTF8 arabic characters to database

See more:

Javascript

Node.js

this node.js controller does not save the size.name using utf-8 encoding Arabic characters, even though the rest of data is sent correctly to server with arabic encoding, i have tried to console log the size names and it reads them correctly but when i submit the form the arabic characters becomes unreadable.

  1  //contollers/menuItemsController.js
  2  const fs = require('fs');
  3  const path = require('path');
  4  const MenuItem = require('../../models/MenuItem');
  5  const Category = require('../../models/Category');
  6  const Size = require('../../models/Size'); 
  7  const dataPaths = require('../../config/data');
  8  const multer = require('multer');
  9  
 10  /////...
 11  function addItem(req, res) {
 12      upload.single('image')(req, res, function(err) {
 13          if (err instanceof multer.MulterError) {
 14              return res.status(500).json({ message: 'Opps! something happend when uploading the image' });
 15          } else if (err) {
 16           
 17              return res.status(500).json({ message: 'Opps! Internal Server Error' });
 18          }
 19          const { category, name, sizes } = req.body;
 20          const imageSrc = 'Frontend/img/' + req.file.filename;
 21          const sizePrice = req.body.sizePrice;
 22          const sizesWithPrices = [];
 23          Object.keys(sizePrice).forEach(sizeName => {
 24              const price = sizePrice[sizeName];
 25              if (price !== '') {
 26                  sizesWithPrices.push({
 27                      name: sizeName,
 28                      price: parseFloat(price)
 29                  });
 30              }
 31          });
 32      });
 33  }
 34          const newItem = new MenuItem(category, name, sizesWithPrices, imageSrc);
 35          fs.readFile(dataPaths.menuItems, 'utf8', (err, data) => {
 36              if (err) {
 37                  console.error('Opps! Error reading menu items file:', err);
 38                  return res.status(500).json({ message: 'Internal Server Error' });
 39              }
 40  
 41              const menuItems = JSON.parse(data);
 42  
 43              menuItems.push(newItem);
 44  
 45              fs.writeFile(dataPaths.menuItems, JSON.stringify(menuItems, null, 2), 'utf8', (err) => {
 46                  if (err) {
 47                      console.error('Opps! Error updating menu items file:', err);
 48                      return res.status(500).json({ message: 'Internal Server Error' });
 49                  }
 50                  res.redirect(`/admincp/menuitems?token=${req.query.token}`);
 51              });
 52          });
 53      });
 54  }
 55  /////...

<!-- views/admincp/menuData/additem.ejs -->
<div class="card-body">
    <form action="/admincp/menuitems/add?token=<%= token %>" method="POST" enctype="multipart/form-data" accept-charset="UTF-8">
        <div class="mb-3">
            <label for="category" class="form-label">الفئة</label>
            <select class="form-select" id="category" name="category" required>
                <% categories.forEach(category => { %>
                <option value="<%= category.name %>"><%= category.name %></option>
                <% }); %>
            </select>
        </div>
        <div class="mb-3">
            <label for="name" class="form-label">الاسم</label>
            <input type="text" class="form-control" id="name" name="name" required>
        </div>
        <div class="mb-3 d-flex flex-column">
            <label class="form-label">الأحجام</label><br>
            <% sizes.forEach(size => { %>
            <div class="form-check">
                <input class="form-check-input size-checkbox" type="checkbox" id="<%= size.name %>" name="sizes[]" value="<%= size.name %>">
                <label class="form-check-label" for="<%= size.name %>"><%= size.name %></label>
                <input type="text" class="form-control size-price" id="<%= size.name %>-price" name="sizePrice[<%= size.name %>]" placeholder="سعر الحجم" pattern="[0-9]+(?:\.[0-9]+)?" title="يرجى إدخال أرقام فقط" style="display: none;">
            </div>
            <% }); %>
        </div>
        <div class="mb-3">
            <label for="image" class="form-label">اختر صورة (PNG, JPG, JPEG)</label>
            <input type="file" class="form-control" id="image" name="image" accept=".png, .jpg, .jpeg" required>
        </div>

        <button type="submit" class="btn btn-primary">إضافة</button>
    </form>
</div>

What I have tried:

console logged the received data, it loads correctly, I included UTF-8 encoding while posting the request to server.