feat: add expressjs server as example for file upload server handling

Author: Donaldcwl

example-express-server/README.md

@@ -0,0 +1,45 @@
+# Example Node.js ExpressJS server
+> this is an example to demonstrate the file upload from browser through calling API
+
+## Run server
+```bash
+yarn install
+yarn dev
+```
+
+## Run sample frontend
+1. Open: https://donaldcwl.github.io/browser-image-compression/example/basic.html
+2. Choose a file to compress, then the output will be uploaded to "http://localhost:3000/image-upload-api"
+![Sample screenshot](./screenshot.png)
+
+## Sample frontend HTML
+```html
+<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/browser-image-compression@1.0.15/dist/browser-image-compression.js"></script>
+<input type="file" accept="image/*" onchange="compressImage(event);">
+<script>
+    function compressImage (event) {
+        const file = event.target.files[0]
+        const options = {
+            maxSizeMB: 1,
+            maxWidthOrHeight: 1024,
+        }
+        imageCompression(file, options)
+            .then(output => uploadToServer(output))
+            .catch(err => console.error(err))
+    }
+
+    function uploadToServer (file) {
+        const formData = new FormData()
+        formData.append('image', file, file.name)
+        const url = 'http://localhost:3000/image-upload-api'
+        console.log('calling api', url, 'with data', Array.from(formData.entries())[0])
+        return fetch(url, {
+            method: 'POST',
+            body: formData
+        })
+            .then(res => res.json())
+            .then(body => console.log('got server response', body))
+    }
+</script>
+```

example-express-server/index.js

@@ -0,0 +1,54 @@
+const express = require('express')
+const multer = require('multer')
+const cors = require('cors')
+const fs = require('fs')
+
+const UPLOAD_PATH = 'uploads/'
+
+if (!fs.existsSync(UPLOAD_PATH)) {
+  fs.mkdirSync(UPLOAD_PATH)
+}
+
+const app = express()
+
+const storage = multer.diskStorage({
+  destination: function (req, file, cb) {
+    cb(null, UPLOAD_PATH)
+  },
+    filename: function (req, file, cb) {
+      cb(null, `${Date.now()}-${file.originalname}`)
+    }
+  })
+
+const upload = multer({ storage })
+
+const port = process.env.PORT || 3000
+
+app.use(cors())
+
+app.post('/image-upload-api', upload.single('image'), (req, res) => {
+    console.log(req.file)
+    res.json({ success: true, file: req.file })
+})
+
+// error handler
+app.use((err, req, res, next) => {
+  console.error(err.stack)
+  res.status(500).send('Something broke!')
+})
+
+const server = app.listen(port, () => {
+  console.log(`App listening at http://localhost:${port}`)
+})
+
+function closeGracefully(signal) {
+  console.log(`Received signal to terminate: ${signal}`)
+ 
+  server.close(() => {
+	  console.log(`HTTP server closed`)
+		process.exit()
+	})
+}
+
+process.on('SIGINT', closeGracefully)
+process.on('SIGTERM', closeGracefully)

example-express-server/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "example-express-server",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "start": "node .",
+    "dev": "nodemon ."
+  },
+  "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^4.17.1"
+  },
+  "devDependencies": {
+    "nodemon": "^2.0.7"
+  }
+}