Multer image saving to folder issue

when i run my replit using the run button i have no issues with multer saving an image into a uploads folder, yet when i run the deployment multer will no longer save the image. is there a fix for this?

index.js

const express = require("express");
const http = require("http");
const socketio = require("socket.io");
const path = require("path");
const multer = require('multer');
const Database = require("@replit/database");
const fs = require('fs');
const app = express();
const server = http.createServer(app);
const io = socketio(server, { cors: { origin: "*" } });
const db = new Database();
// Static files middleware
app.use(express.static(path.join(__dirname, "html")));

// Body parsing middleware
app.use(express.json()); // For handling JSON body parsing for POST requests.
app.use(express.static('uploads'));


// Setup file storage configuration
const storage = multer.diskStorage({
  destination: "./html/uploads",
  filename: (req, file, cb) => {
    return cb(
      null,
      `${file.fieldname}_${Date.now()}` +  path.extname(file.originalname)
    );
  },
});

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

app.use(express.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded

app.post('/upload', upload.single('image'), (req, res) => {
    // Registration logic remains the same
    const { email, password, height, weight, age, username, info, nativeLanguage } = req.body;
    if (!email || !password || !height || !weight || !age || !username || !info || !nativeLanguage) {
        return res.status(400).json({ message: "Missing required fields" });
    }
    if (req.file && req.file.size > 100 * 1024 * 1024) { // Check if the file size exceeds 100 MB
        return res.status(400).json({ message: "Image size should be less than 100MB" });
    }
    const imagePath = req.file ? req.file.path : null; // Check if an image was uploaded
    const userDetails = {
        email: email,
        password: password,
        height: height,
        weight: weight,
        age: age,
        username: username,
        info: info,
        nativeLanguage: nativeLanguage,
        image: imagePath
    };
    try {
        db.set(username, JSON.stringify(userDetails));
        const { password, ...responseDetails } = userDetails;
        res.status(200).json({ message: "User registered successfully", userDetails: responseDetails });
    } catch (dbError) {
        res.status(500).json({ message: "Database operation failed", error: dbError.message });
    }
});
const PORT = process.env.PORT || 3000;
server.listen(PORT, () => console.log(`Server is running on port ${PORT}`));

index.html

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet"  href="https://fonts.googleapis.com/icon?family=Material+Icons">
 </head>
  <body>
 <div id="registration-form-container" style="display:none;">
      <button onclick="toggle_register()" title="close" aria-label="Close" style="width:8%; margin-right: 1%;">&#10006;</button>
      <form method="post" action="/upload" enctype="multipart/form-data" id="registrationForm">
                <input name="email" type="email" placeholder="Email address" required />
                <input id="username" name="username" type="text" placeholder="Username" required />
                <input id="password" name="password" type="password" placeholder="Password" required />
                <input id="height" name="height" type="text" placeholder="Height" required />
                <input id="weight" name="weight" type="text" placeholder="Weight" required />
                <input id="age" name="age" type="text" placeholder="Age" required />
                <label for="nativeLanguage">Native Language:</label>
                <select name="nativeLanguage" id="nativeLanguage" required>
                    <option value="en">English</option>
                    <option value="es">Spanish</option>
                    <option value="mandarin">Mandarin</option>
                    <option value="hi">Hindi</option>
                    <option value="ar">Arabic</option>
                    <!-- Add more languages as options here -->
                </select>
                <input id="info" name="info" type="text" placeholder="Info (e.g., interests)" required />

                <input type="file" name="image" accept="image/*" required />
                <input type="submit" value="Register" />
            </form>
    </div>
  </body>
</html>