expressjs / multer

Node.js middleware for handling `multipart/form-data`.
MIT License
11.63k stars 1.06k forks source link

I just can't figured whats wrong why my codes below. I try to upload multiple files. #1274

Closed Priya-Rathor closed 2 months ago

Priya-Rathor commented 2 months ago

I just can't figured whats wrong why my codes below. I try to upload multiple files. The problem is that i had an "message": "All fields are required.".. I can make it to upload single file just fine, If I put upload.single('image') but I can't make it upload multiple files. With multiple feilds.It will take only one at a time So what's wrong?

import express from 'express';
import multer from 'multer';
import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';

// Recreate __dirname for ES module
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const app = express();
const PORT = process.env.PORT || 3000;

// Define the directories to store different uploads
const uploadDirs = {
  file1: path.join(__dirname, 'uploads/file1'),
  file2: path.join(__dirname, 'uploads/file2'),
  file3: path.join(__dirname, 'uploads/file3'),
  file4: path.join(__dirname, 'uploads/file4'),
};

// Ensure the upload directories exist
Object.values(uploadDirs).forEach((dir) => {
  if (!fs.existsSync(dir)) {
    fs.mkdirSync(dir, { recursive: true });
    console.log(`Created directory: ${dir}`); // Debugging log
  } else {
    console.log(`Directory already exists: ${dir}`); // Debugging log
  }
});

// Configure Multer storage for different files
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    console.log(`Handling file destination for: ${file.fieldname}`); // Debugging log
    if (file.fieldname === 'file1') {
      cb(null, uploadDirs.file1);
    } else if (file.fieldname === 'file2') {
      cb(null, uploadDirs.file2);
    } else if (file.fieldname === 'file3') {
      cb(null, uploadDirs.file3);
    } else if (file.fieldname === 'file4') {
      cb(null, uploadDirs.file4);
    } else {
      console.warn(`Unexpected file field: ${file.fieldname}`); // Debugging log
      cb(new Error('Unexpected file field'));
    }
  },
  filename: (req, file, cb) => {
    console.log(`Processing filename for: ${file.originalname}`); // Debugging log
    cb(null, `${Date.now()}-${file.originalname}`); // Define the filename format
  },
});

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

// Endpoint to handle file uploads
app.post(
  '/upload',
  upload.fields([
    { name: 'file1', maxCount: 1 },
    { name: 'file2', maxCount: 1 },
    { name: 'file3', maxCount: 1 },
    { name: 'file4', maxCount: 1 },
  ]),
  (req, res) => {
    try {
      // Log request body to debug form-data submission
      console.log('Request body:', req.body);
      console.log('Request files:', req.files); // Debugging log

      const files = req.files;
      if (!files) {
        console.log('No files found in the request.'); // Debugging log
      } else {
        ['file1', 'file2', 'file3', 'file4'].forEach((fieldName) => {
          if (files && files[fieldName]) {
            console.log(`${fieldName} Details:`, files[fieldName][0]);
            console.log(
              `${fieldName} uploaded: ${files[fieldName][0].originalname} -> ${files[fieldName][0].path}`
            );
          } else {
            console.log(`${fieldName} not uploaded.`);
          }
        });
      }

      res.status(200).json({ message: 'Files uploaded successfully', files: req.files });
    } catch (error) {
      console.error('File upload failed:', error);
      res.status(500).json({ message: 'File upload failed', error });
    }
  }
);

// Start the server
app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});

only take one image

file1 Details: {
  fieldname: 'file1',
  originalname: 'cv4.jpg',
  encoding: '7bit',
  mimetype: 'image/jpeg',
  destination: 'E:\\tmp\\demo\\uploads\\file1',
  filename: '1725255887575-cv4.jpg',
  path: 'E:\\tmp\\demo\\uploads\\file1\\1725255887575-cv4.jpg',
  size: 538005
}
  destination: 'E:\\tmp\\demo\\uploads\\file1',
  destination: 'E:\\tmp\\demo\\uploads\\file1',
  filename: '1725255887575-cv4.jpg',
  destination: 'E:\\tmp\\demo\\uploads\\file1',
  destination: 'E:\\tmp\\demo\\uploads\\file1',
  destination: 'E:\\tmp\\demo\\uploads\\file1',
  destination: 'E:\\tmp\\demo\\uploads\\file1',
  filename: '1725255887575-cv4.jpg',
  path: 'E:\\tmp\\demo\\uploads\\file1\\1725255887575-cv4.jpg',
  size: 538005
}
file1 uploaded: cv4.jpg -> E:\tmp\demo\uploads\file1\1725255887575-cv4.jpg    
file2 not uploaded.
file3 not uploaded.
file4 not uploaded.
Handling file destination for: file3
Processing filename for: cv2.jpg
Request body: [Object: null prototype] { file4: '' }
Request files: [Object: null prototype] {
  file3: [
    {
      fieldname: 'file3',
      originalname: 'cv2.jpg',
      encoding: '7bit',
      mimetype: 'image/jpeg',
      destination: 'E:\\tmp\\demo\\uploads\\file3',
      filename: '1725255920215-cv2.jpg',
      path: 'E:\\tmp\\demo\\uploads\\file3\\1725255920215-cv2.jpg',
      size: 662066
    }
  ]
}
file1 not uploaded.
file2 not uploaded.
file3 Details: {
  fieldname: 'file3',
  originalname: 'cv2.jpg',
  encoding: '7bit',
  mimetype: 'image/jpeg',
  destination: 'E:\\tmp\\demo\\uploads\\file3',
file3 Details: {
  fieldname: 'file3',
  originalname: 'cv2.jpg',
  encoding: '7bit',
  mimetype: 'image/jpeg',
  destination: 'E:\\tmp\\demo\\uploads\\file3',
  fieldname: 'file3',
  originalname: 'cv2.jpg',
  encoding: '7bit',
  mimetype: 'image/jpeg',
  destination: 'E:\\tmp\\demo\\uploads\\file3',
  mimetype: 'image/jpeg',
  destination: 'E:\\tmp\\demo\\uploads\\file3',
  destination: 'E:\\tmp\\demo\\uploads\\file3',
  filename: '1725255920215-cv2.jpg',
  path: 'E:\\tmp\\demo\\uploads\\file3\\1725255920215-cv2.jpg',
  size: 662066
}
file3 uploaded: cv2.jpg -> E:\tmp\demo\uploads\file3\1725255920215-cv2.jpg    
file4 not uploaded.