How to Increase File Upload Size in Web Applications (Nextjs, Express.js, Nginx, Apache)
Nurul Islam Rimon

Nurul Islam Rimon @nurulislamrimon

About: Thanks for being here! I'm Nurul Islam Rimon, a MERN & PERN stack developer. I'm a student of competitive programming. I love to explore new technology.

Location:
Chaprashirhat, Kabirhat, Noakhali
Joined:
Jan 20, 2024

How to Increase File Upload Size in Web Applications (Nextjs, Express.js, Nginx, Apache)

Publish Date: Mar 1
0 0

When handling file uploads in a web application, the default upload size limit may be too small for large files. Here’s how you can increase it based on different technologies.

1. Next.js (API Routes & Server Actions)

In Next.js, you can configure the upload size limit in next.config.js:

const nextConfig = {
  api: {
    bodyParser: {
      sizeLimit: "10mb", // Adjust this based on your needs
    },
  },
  experimental: {
    serverActions: {
      bodySizeLimit: "2mb", // Increase for server actions if needed
    },
  },
};

export default nextConfig;

Enter fullscreen mode Exit fullscreen mode

2. Express.js

For an Express server, use express.json() or express.urlencoded() with a custom limit:

app.use(express.json({ limit: "50mb" }));
app.use(express.urlencoded({ limit: "50mb", extended: true }));

Enter fullscreen mode Exit fullscreen mode

3. Nginx (Reverse Proxy)

If you use Nginx as a proxy, update its config:

client_max_body_size 100M;

Enter fullscreen mode Exit fullscreen mode

Restart Nginx after changes:

sudo systemctl restart nginx

Enter fullscreen mode Exit fullscreen mode

4. Apache

For Apache, update .htaccess or php.ini:

php_value upload_max_filesize 100M
php_value post_max_size 120M

Enter fullscreen mode Exit fullscreen mode

Restart Apache:

sudo systemctl restart apache2

Enter fullscreen mode Exit fullscreen mode

Best Regards,
N I Rimon 🌹

Comments 0 total

    Add comment