To implement multi-file upload functionality using Ant Design Pro 5 and an Express server, you'll need to handle both frontend component configuration and backend file processsing.

Front end Component Setup

Configure the Ant Design Upload component to support multiple file selection:

import { Upload } from 'antd';
import { InboxOutlined } from '@ant-design/icons';

const { DragUpload } = Upload;

const FileUploader = () => {
  const handleFileUpload = ({ fileList, file }) => {
    // Handle file status changes
    if (file.status === 'uploading') {
      console.log('Upload in progress...');
    } else if (file.status === 'done') {
      console.log('Upload completed successfully');
    } else if (file.status === 'error') {
      console.log('Upload failed');
    }

    // Prepare files for upload
    const payload = new FormData();
    fileList.forEach(item => {
      if (item.originFileObj) {
        payload.append('documents', item.originFileObj);
      }
    });

    // Send files to server
    fetch('/api/files/upload', {
      method: 'POST',
      body: payload,
      headers: {
        'Accept': 'application/json'
      }
    });
  };

  const uploadProps = {
    name: 'documents',
    multiple: true,
    onChange: handleFileUpload,
    beforeUpload: (file) => {
      // Add validation logic here
      return false; // Prevent automatic upload
    }
  };

  return (
    <DragUpload {...uploadProps}>
      <p className="ant-upload-drag-icon">
        <InboxOutlined />
      </p>
      <p className="ant-upload-text">Click or drag files to this area</p>
      <p className="ant-upload-hint">
        Support for multiple file uploads. Note that folder uploads are not supported by all browsers.
      </p>
    </DragUpload>
  );
};

Backend Implementation with Express

Set up the Express server to receive and process uploaded files:

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

const server = express();

// Configure multer for file storage
const storageConfig = multer.diskStorage({
  destination: (req, file, callback) => {
    callback(null, 'uploaded-files/');
  },
  filename: (req, file, callback) => {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    callback(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
  }
});

const fileFilter = (req, file, callback) => {
  // Add file type validation if needed
  callback(null, true);
};

const uploadMiddleware = multer({ 
  storage: storageConfig,
  fileFilter: fileFilter
});

// Handle multiple file uploads
server.post('/api/files/upload', uploadMiddleware.array('documents', 10), (req, res) => {
  try {
    if (!req.files || req.files.length === 0) {
      return res.status(400).json({ error: 'No files uploaded' });
    }

    // Process each uploaded file
    const processedFiles = req.files.map(file => ({
      originalName: file.originalname,
      savedPath: file.path,
      size: file.size,
      mimeType: file.mimetype
    }));

    console.log(`Successfully uploaded ${req.files.length} files`);
    
    res.status(200).json({
      message: 'Files uploaded successfully',
      files: processedFiles
    });
  } catch (error) {
    console.error('Upload error:', error);
    res.status(500).json({ error: 'File upload failed' });
  }
});

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

The implementation involves configuring the Ant Design Upload component with drag-and-drop capabilities and multiple file selection. Files are collected through the onChange handler and packaged into FormData for transmission to the backend.

On the server side, Multer middleware handles the multipart form data parsing and saves files to the specified directory. The configuration includes custom storage settings and optional file filtering for enhanced control over the upload process.