QUploader doc: NodeJS backend example is not valid

[Ivan-753]

Description

Tried to run NodeJS backend example on Node v22.6.0
It is not working - errors in packages usage

Documentation Section URL

https://quasar.dev/vue-components/uploader#nodejs

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

[Ivan-753]

A Server from the docs (DOES NOT WORK):

import fs from 'node:fs'
import path from 'node:path'
import express from 'express'
import formidable from 'formidable'
import throttle from 'express-throttle-bandwidth'

const app = express()

const port = process.env.PORT || 4444
const folder = fileURLToPath(new URL('./files', import.meta.url))

if (!fs.existsSync(folder)) {
  fs.mkdirSync(folder)
}

app.set('port', port)
app.use(throttle(1024 * 128)) // throttling bandwidth

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*')
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept')
  next()
})

app.post('/upload', (req, res) => {
  const form = new formidable.IncomingForm()

  form.uploadDir = folder
  form.parse(req, (_, fields, files) => {
    console.log('\n-----------')
    console.log('Fields', fields)
    console.log('Received:', Object.keys(files))
    console.log()
    res.send('Thank you')
  })
})

app.listen(port, () => {
  console.log('\nUpload server running on http://localhost:' + port)
})

[Ivan-753]

This one seems to work:

import express from 'express'
import formidable from 'formidable'
import cors from 'cors'
import fs from 'node:fs'
import { fileURLToPath, URL } from 'node:url'
import throttle from 'express-throttle-bandwidth'

const port = process.env.PORT || 3000
const host = process.env.HOST || '0.0.0.0'
const uploads_folder = process.env.UPLOADS || './uploads'
const throttle_bandwidth = process.env.THROTTLE || 1024 * 128

// if server.js is not in a project root - need to fix the path!
// otherwise it will try to create an uploads folder near server.js.
// But formidable is saving received files in an uploads folder
// that is in a current working directory (usually - a project root)
// and is not saving anything if an uploads folder is not exists.
const folder = fileURLToPath(new URL(uploads_folder, import.meta.url)).replace(
  '/src/tools/backend/',
  '/',
)
if (!fs.existsSync(folder)) {
  fs.mkdirSync(folder)
}

const app = express()
app.use(express.json())
app.use(cors())
app.use(throttle(throttle_bandwidth))

app.post('/upload', (req, res, next) => {
  const form = formidable({
    keepExtensions: true,
    uploadDir: uploads_folder,
  })

  form.parse(req, (err, fields, files) => {
    if (err) {
      next(err)
      return
    }
    console.log('\n-----------')
    console.log('Fields', fields)
    console.log('Received:', Object.keys(files))
    for (let file_name in files) {
      console.log(
        'Received:',
        files[file_name][0]?.originalFilename,
        'Path:',
        files[file_name][0]?.filepath,
      )
    }
    res.send('Uploaded!')
  })
})

app.listen(port, host, () => {
  console.log(`Server listening on port ${port}, host ${host}`)
})