Skip to content

Instantly share code, notes, and snippets.

@dsheiko
Last active October 20, 2022 08:51
Show Gist options
  • Save dsheiko/0ed29477b92eef6e480a2a8fe4153e69 to your computer and use it in GitHub Desktop.
Save dsheiko/0ed29477b92eef6e480a2a8fe4153e69 to your computer and use it in GitHub Desktop.
Ant Design Upload server side for Express.js example
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 );
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>);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment