tatsuyasusukida/!README-nodejs-upload-non-multipart.md

## !README-nodejs-upload-non-multipart.md

      
    Raw
  

              !README-nodejs-upload-non-multipart.md
            
          
    ⬆️ Node.js file upload example without using multipart/form-data [video version available]


About this article

This article describes you how to upload files in Node.js without using multipart/form-data. The related resources are as follows.

Source code
日本語版 / Japanese version
Video version

Procedure

The procedure is as follows:

Preparing for coding
Coding
Check

Preparing for coding

Open a terminal and execute the following command.
mkdir nodejs-upload-non-multipart
cd nodejs-upload-non-multipart
npm init -y
touch client.js index.html server.js
Coding

index.html

Open index.html in your editor and enter the following content.
Click to go to index.html
client.js

Open client.js in your editor and enter the following content.
Click to go to client.js
The points are as follows:

If you need to send some parameters, use a query string.
Specify the file in the body of the fetch function call.

server.js

Open server.js in your editor and enter the following content.
Click to go to server.js
The points are as follows:

Get the request body as a buffer.
Write the file using the fsPromises.writeFile function. Create a directory using the fsPromises.mkdir function before writing the file.

Check

Execute the following command to start the server.
node server.js
Go to http://localhost:3000/ in your browser.
Select the file and then click the submit button.
Confirm that the selected file has been uploaded.
Conclusion

I think the advantage of the method described in this article is that it consumes less memory than the method using multipart/form-data.
If the server sends the received file to cloud storage such as Amazon S3, you don't need to write the file to local storage. If the file you are uploading is large, it is better to use the fs.createWriteStream function instead of getting the request body as a buffer.
If you have any questions, please feel free to comment. Thank you for reading!

  
## .gitignore
/node_modules/
/upload/
/package-lock.json
# Do not ignore package-lock.json other than gist.

## client.js
main()

function main () {
  try {
    const image = document.querySelector('#image')
    const submit = document.querySelector('#submit')
    const message = document.querySelector('#message')

    submit.addEventListener('click', async (event) => {
      try {
        event.preventDefault()

        const [file] = image.files

        if (!file) {
          message.innerHTML = 'Please select file'
          return
        }

        const filename = file.name
        const search = '?' + new URLSearchParams({filename})
        const url = '/api/v1/upload' + search // <1>
        const response = await fetch(url, {
          method: 'POST',
          body: file // <2>
        })

        if (response.status === 201) {
          message.innerHTML = 'Upload completed'
        } else {
          message.innerHTML = 'Upload failed: '
          message.innerHTML += `status = ${response.status}`
        }
      } catch (err) {
        console.error(err)
      }
    })
  } catch (err) {
    console.error(err)
  }
}

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Node.js file upload example without using multipart/form-data</title>
  </head>
  <body>
    <h1>Node.js file upload example without using multipart/form-data</h1>
    <form>
      <div>
        <label for="image">Image</label>
        <input type="file" name="image" id="image" accept="image/*">
      </div>
      <button type="submit" id="submit">Submit</button>
      <p id="message"></p>
    </form>
    <script src="client.js"></script>
  </body>
</html>

## package.json
{
  "name": "nodejs-upload-non-multipart",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.18.1"
  }
}

## server.js
const path = require('path')
const fsPromises = require('fs/promises')
const express = require('express')

if (require.main === module) {
  main()
}

async function main () {
  try {
    const router = express()

    router.get('/', (req, res) => {
      res.sendFile(path.join(__dirname, 'index.html'))
    })

    router.get('/client.js', (req, res) => {
      res.sendFile(path.join(__dirname, 'client.js'))
    })

    router.post('/api/v1/upload', async (req, res, next) => {
      try {
        const buffer = await new Promise((resolve, reject) => {
          const chunks = []

          req.on('data', (chunk) => chunks.push(chunk))
          req.on('end', () => resolve(Buffer.concat(chunks)))
          req.on('error', (err) => reject(err))
        }) // <1>

        const {filename} = req.query
        const basename = path.basename(filename)
        const dirname = path.join(__dirname, 'upload')
        const destination = path.join(dirname, basename)

        await fsPromises.mkdir(dirname, {recursive: true})
        await fsPromises.writeFile(destination, buffer) // <2>

        res.status(201).end()
      } catch (err) {
        next(err)
      }
    })

    const port = parseInt(process.env.PORT || '3000', 10)

    router.listen(port, () => {
      console.info(`Listening on ${port}`)
    })
  } catch (err) {
    console.error(err)
  }
}
	/node_modules/
	/upload/
	/package-lock.json
	# Do not ignore package-lock.json other than gist.
	main()

	function main () {
	try {
	const image = document.querySelector('#image')
	const submit = document.querySelector('#submit')
	const message = document.querySelector('#message')

	submit.addEventListener('click', async (event) => {
	try {
	event.preventDefault()

	const [file] = image.files

	if (!file) {
	message.innerHTML = 'Please select file'
	return
	}

	const filename = file.name
	const search = '?' + new URLSearchParams({filename})
	const url = '/api/v1/upload' + search // <1>
	const response = await fetch(url, {
	method: 'POST',
	body: file // <2>
	})

	if (response.status === 201) {
	message.innerHTML = 'Upload completed'
	} else {
	message.innerHTML = 'Upload failed: '
	message.innerHTML += `status = ${response.status}`
	}
	} catch (err) {
	console.error(err)
	}
	})
	} catch (err) {
	console.error(err)
	}
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Node.js file upload example without using multipart/form-data</title>
	</head>
	<body>
	<h1>Node.js file upload example without using multipart/form-data</h1>
	<form>
	<div>
	<label for="image">Image</label>
	<input type="file" name="image" id="image" accept="image/*">
	</div>
	<button type="submit" id="submit">Submit</button>
	<p id="message"></p>
	</form>
	<script src="client.js"></script>
	</body>
	</html>
	{
	"name": "nodejs-upload-non-multipart",
	"version": "1.0.0",
	"description": "",
	"main": "server.js",
	"scripts": {
	"start": "node server.js",
	"dev": "nodemon server.js"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"dependencies": {
	"express": "^4.18.1"
	}
	}
	const path = require('path')
	const fsPromises = require('fs/promises')
	const express = require('express')

	if (require.main === module) {
	main()
	}

	async function main () {
	try {
	const router = express()

	router.get('/', (req, res) => {
	res.sendFile(path.join(__dirname, 'index.html'))
	})

	router.get('/client.js', (req, res) => {
	res.sendFile(path.join(__dirname, 'client.js'))
	})

	router.post('/api/v1/upload', async (req, res, next) => {
	try {
	const buffer = await new Promise((resolve, reject) => {
	const chunks = []

	req.on('data', (chunk) => chunks.push(chunk))
	req.on('end', () => resolve(Buffer.concat(chunks)))
	req.on('error', (err) => reject(err))
	}) // <1>

	const {filename} = req.query
	const basename = path.basename(filename)
	const dirname = path.join(__dirname, 'upload')
	const destination = path.join(dirname, basename)

	await fsPromises.mkdir(dirname, {recursive: true})
	await fsPromises.writeFile(destination, buffer) // <2>

	res.status(201).end()
	} catch (err) {
	next(err)
	}
	})

	const port = parseInt(process.env.PORT \|\| '3000', 10)

	router.listen(port, () => {
	console.info(`Listening on ${port}`)
	})
	} catch (err) {
	console.error(err)
	}
	}