Upload Size Limit

[raven-dever]

Is there a way to configure an upload size limit? For example the body-parser middleware has an option to control the limit of the body size of incoming requests: https://expressjs.com/en/resources/middleware/body-parser.html#limit

Does unjs/nitro have some similar config option, utility or middleware?

[stafyniaksacha]

You can use formidable in a event handler like:

import formidable from 'formidable'

export default defineEventHandler(async (event) => {
  return new Promise((resolve, reject) => {
    // parse a file upload
    const form = formidable({
      maxFileSize: 2 * 1024 * 1024, // 2MB
    })

    form.parse(event.node.req, async (err, fields, files) => {
      if (err) {
        return reject(
          createError({
            statusCode: 400,
            statusMessage: 'Bad Request',
            message: String(err),
          })
        )
      }

      // handle files

     return resolve()
   })
})

[ChrisGV04]

Hi @CKylinMC!
You might need to take a look at either streaming or multipart uploads.

If you stream the file, it might be enough to bypass the error you are getting. Even when uploading files to S3 or storing them locally I have found this helps a lot. As far as I understand, formidable doesn't do streaming by default.

However, if you are dealing with really large files and streaming them didn't help, you might be better off using the concept of a Multi-part upload. You would need to split the file on the front-end into small chunks that can be handled by the back-end. For example, if you have a 500 MB file, you can split it into 100 chunks of 5 MB each and send them separately to the back-end where you must put it back together... It is not a simple task, but it could be worth the try.

A truly scalable and flexible way to upload files is not as easy as it might seem.

To be honest, I took a lot of inspiration from NuxtHub to build my own version of file uploads using Nitro. It might help you to check it out:

• Code for file functionality: https://github.com/nuxt-hub/core/tree/main/src/runtime/blob
• Basic usage docs: https://hub.nuxt.com/docs/storage/blob

[CKylinMC]

Thanks, @ChrisGV04! Your suggestion is very valuable, I'll try it out!

[ChrisGV04]

Sure thing! Please let me know if you need help.

I will try to write a minimal example for you on how I do uploads with streaming. Currently I don't do multi-part uploads. However, the NuxtHub codebase does have implementations for multi-part uploads.

[ChrisGV04]

@CKylinMC I made a very quick gist with the most basic version of file uploads I could copy from one of my projects. Here it is:
https://gist.github.com/ChrisGV04/8350b53958f207ef2d33a9ea96ecd882

If you have any questions, let me know!

[CKylinMC]

Thanks for your gist! I'll try it!