Ant Design Upload Component Configuration

The Ant Design upload component supports batch file selection through the multiple attribute. Here's how to configure the component for handling multiple file uploads:

<Dragger
  name="file"
  multiple={true}
  action="/api/upload/batch"
  onChange={handleUploadChange}
  fileList={fileList}
  onRemove={handleRemove}
  beforeUpload={() => false}
>
  <p className="ant-upload-drag-icon">
    <InboxOutlined />
  </p>
  <p className="ant-upload-text">Click or drag files here to upload</p>
  <p className="ant-upload-hint">
    Supports single and batch uploads. Note that browsers cannot directly upload entire folders.
  </p>
</Dragger>

Setting beforeUpload to return false prevents automatic uploads, allowing manual control over the upload process.

Frontend Upload Implementation

When users select multiple files, capture them through the onChange event and construct a FormData payload for the server:

const handleUploadChange = (uploadInfo) => {
  const { file, fileList } = uploadInfo;
  
  switch (file.status) {
    case 'uploading':
      console.log(`${file.name} is uploading`);
      break;
    case 'done':
      console.log(`${file.name} uploaded successfully`);
      break;
    case 'error':
      console.error(`${file.name} upload failed`);
      break;
  }

  // Build FormData with all selected files
  const payload = new FormData();
  fileList.forEach((item, index) => {
    payload.append(`file_${index}`, item.originFileObj);
  });

  // Dispatch to server endpoint
  axios.post('/api/upload/batch', payload, {
    headers: {
      'Content-Type': 'multipart/form-data'
    },
    timeout: 60000
  })
  .then(response => {
    console.log('Batch upload completed:', response.data);
  })
  .catch(error => {
    console.error('Upload error:', error);
  });
};

Express Backend Setup

Configure the Express server to receive and persist uploaded files using Multer middleware:

const express = require('express');
const multer = require('multer');
const path = require('path');

const app = express();


// Configure storage destination
const storageConfig = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, path.join(__dirname, 'storage'));
  },
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    const ext = path.extname(file.originalname);
    cb(null, `${file.fieldname}-${uniqueSuffix}${ext}`);
  }
});

const uploadHandler = multer({ 
  storage: storageConfig,
  limits: {
    fileSize: 10 * 1024 * 1024 // 10MB limit per file
  }
});

// Handle batch file uploads
app.post('/api/upload/batch', uploadHandler.array('file', 20), (req, res) => {
  const uploadedFiles = req.files;
  
  if (!uploadedFiles || uploadedFiles.length === 0) {
    return res.status(400).json({ error: 'No files received' });
  }

  const result = uploadedFiles.map(file => ({
    originalName: file.originalname,
    savedName: file.filename,
    size: file.size,
    path: file.path
  }));

  console.log(`Received ${uploadedFiles.length} files`);
  res.json({ 
    success: true, 
    files: result 
  });
});

app.listen(3000, () => {
  console.log('Upload server running on port 3000');
});

Additional Considerations

File Size Limits: Configure both frontend and backend limits to prevent oversized uploads. The example above sets a 10MB per-file limit.

Browser Restrictions: Due to security policies, browsers cannot access folder paths directly. Users must manually select files individually or use a file picker that supports folder selection.

Large File Strategy: For enterprise applications handling large files, consider implementing chunked uploads with resume capability. This requires additional frontend logic to split files and backend support for reassembling chunks.

Error Handling: Always validate file types on both client and server sides to prevent malicious file uploads.