muliples files upload error using dropzone

[rir7890]

// index.html

<title>Multiple File Upload</title> <style> .dropzone { border: 2px dashed #0087f7; border-radius: 5px; background: white; min-height: 150px; padding: 20px; box-sizing: border-box; } </style>

Upload Multiple Files

<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<script>
  Dropzone.autoDiscover = false;

  const myDropzone = new Dropzone("#myDropzone", {
    url: "http://localhost:3000/upload",
    paramName: "files", // The name that will be used to transfer the file
    maxFilesize: 100, // MB
    acceptedFiles: ".jpg,.jpeg,.png,.pdf",
    parallelUploads: 10,
    uploadMultiple: true,
    maxFiles: 10,
    addRemoveLinks: true,
    createImageThumbnails: true,
    dictDefaultMessage: "Drop files here or click to upload",
    dictRemoveFile: "Remove",

    init: function () {
      this.on("addedfile", function (file) {
        console.log("File added:", file.name);
      });

      this.on("sending", function (file, xhr, formData) {
        console.log("Sending:", file.name);
      });

      this.on("success", function (file, response) {
        console.log("Success:", file.name, response);
        file.previewElement.classList.add("dz-success");
      });

      this.on("error", function (file, errorMessage) {
        console.error("Error:", file.name, errorMessage);
        file.previewElement.classList.add("dz-error");
      });

      this.on("complete", function (file) {
        console.log("Complete:", file.name);
      });

      this.on("queuecomplete", function () {
        console.log("All files uploaded");
      });
    },
  });
</script>

// server.js
const express = require("express");
const multer = require("multer");
const path = require("path");
const cors = require("cors");
const fs = require("fs");

const app = express();
const port = 3000;

// Enable CORS
app.use(cors());

// Create uploads directory if it doesn't exist
const uploadDir = path.join(__dirname, "uploads");
if (!fs.existsSync(uploadDir)) {
fs.mkdirSync(uploadDir, { recursive: true });
}

// Configure multer storage
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, uploadDir);
},
filename: function (req, file, cb) {
// Create unique filename
const uniqueSuffix = Date.now() + "-" + Math.round(Math.random() * 1e9);
cb(null, uniqueSuffix + "-" + file.originalname);
},
});

// Configure multer upload
const upload = multer({
storage: storage,
limits: {
fileSize: 100 * 1024 * 1024, // 100MB limit
files: 10, // Maximum 10 files
},
fileFilter: function (req, file, cb) {
// Check file types
const filetypes = /jpeg|jpg|png|pdf/;
const mimetype = filetypes.test(file.mimetype);
const extname = filetypes.test(
path.extname(file.originalname).toLowerCase()
);

if (mimetype && extname) {
  return cb(null, true);
}
cb(new Error("Only .jpg, .jpeg, .png, and .pdf files are allowed!"));

},
});

// Serve static files
app.use(express.static(__dirname));

// Handle multiple file upload
app.post("/upload", (req, res) => {
upload.array("files", 10)(req, res, function (err) {
if (err instanceof multer.MulterError) {
// A Multer error occurred
console.error("Multer error:", err);
return res.status(400).json({
error: true,
message: err.message,
});
} else if (err) {
// An unknown error occurred
console.error("Unknown error:", err);
return res.status(500).json({
error: true,
message: err.message,
});
}

// Files uploaded successfully
if (!req.files || req.files.length === 0) {
  return res.status(400).json({
    error: true,
    message: "No files uploaded.",
  });
}

// Process uploaded files
const uploadedFiles = req.files.map((file) => ({
  filename: file.filename,
  originalname: file.originalname,
  size: file.size,
  mimetype: file.mimetype,
  path: file.path,
}));

// Send response
res.status(200).json({
  error: false,
  message: "Files uploaded successfully",
  files: uploadedFiles,
});

});
});

// Error handling middleware
app.use((err, req, res, next) => {
console.error("Error:", err);
res.status(500).json({
error: true,
message: err.message || "Internal server error",
});
});

// Start server
app.listen(port, () => {
console.log(Server running at http://localhost:${port});
});

it gives me the error of unexpected field .
What is the error in it

image is here ---

[rir7890]

I have found the answer do not use upload multiple in dropzone for sending the multiple files for multer use.