Ant Design Upload server side for Express.js example

AntDesignUploadExpressServer.js

import React from "react";
import http from "http";
import fs from "fs";
import { join } from "path";

import express from "express";
import bodyParser from "body-parser";
import { default as Busboy } from "busboy";

const app = express(),
      server = http.createServer( app );

function getUploadedFilename( filename ) {
  return join( __dirname, "public", "uploads", filename );
}

function uploadFiles( req ) {
  return new Promise(( resolve, reject ) => {
   var busboy = Busboy( { headers: req.headers } );
    /*
      fieldname: "file",
      file: FileStream,
      filename: { filename: "image.jpg", encoding: "7bit", mimeType: "image/jpeg" },
    */
    busboy.on( "file", ( fieldname, file, { filename } ) => {      
      file.pipe( fs.createWriteStream( getUploadedFilename( filename ) ) );
    });
    busboy.on( "finish", () => resolve());
    busboy.on( "error", err => reject( err ) );
    req.pipe( busboy );
  });
}

// Applying middleware
app.use( bodyParser.json() );       // to support JSON-encoded bodies
app.use( bodyParser.urlencoded( {     // to support URL-encoded bodies
  extended: true
} ) );

app.post( "/upload", async ( req, res, next ) => {
  try {
      await uploadFiles( req );
      return res.send({
        body: req.body,
        files: req.files
    });
    } catch ( err ) {
      next( err );
    }
});

app.delete( "/file/:id", async ( req, res, next ) => {
  try {
    fs.unlinkSync( getUploadedFilename( req.params.id ) );
    return res.send( { ok: true } );
  } catch ( err ) {
    next( err );
  }
} );

//...

server.listen( 3000 );

AntDesignUploadForm.jsx

import React from "react";
import { Form, Input, Button, message, Upload } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import { api } from "Api/File";

const onFinish = async ( values ) => { 
        values.attachments = formFilelist( values.attachments );        
        api.update( values );
        //...
      },
      attachments = {
        name: "file",
        action: "/upload",
        headers: {
            authorization: "authorization-text",
        },
        onChange( info ) {
            switch( info.file.status ) {
                case "done":
                    return message.success( `${ info.file.name } file uploaded successfully` );
                case "error":
                    return message.error( `${ info.file.name } file upload failed.` );
            }
        },
    },
    // fix for (fileList || []).forEach is not a function
    normFile = ( e ) => {
        if ( Array.isArray( e ) ) {
            return e;
        }
        return e?.fileList;
    },

    formFilelist = ( list ) => {
        if ( !list.length ) {
            return [];
        }
        return list.map( i => ({ name: i.name }));
    },
    onFileRemove = ({ name }) => {
        api.removeFile( name );
    };

export default MyForm = () => {

    return (<Form
                  name="basic"
                  initialValues={ this.props.formData }
                  onFinish={ onFinish }
              >
                   <Form.Item
                      label="Attachments"
                      name="attachments"
                      valuePropName="fileList"
                      getValueFromEvent={ normFile }
                  >
                      <Upload { ...attachments } onRemove={ onFileRemove }>
                          <Button icon={ <UploadOutlined /> }>Click to Upload</Button>
                      </Upload>
                  </Form.Item>

                  <Button type="primary" htmlType="submit">
                      Save
                  </Button>
      </Form>);
}