Multer Nodejs Large File Upload - HTTP error 413 in Production environment

Question

I'm working on a Nodejs project using Multer to upload files to the server. The app is hosted on Azure as a Web app under "Basic(B1)" pricing tier.
The app is working perfectly fine with any file size in the local development environment.

But in the production environment, with files of size larger than 25MB (approx), the app crashes and show the following error:

This page isn’t working right now.
If the problem continues, contact the site owner.
HTTP ERROR 413

I have followed the suggestions provided in the following question to add limits to multer, but that doesn't seem to work either.

Below is my code:

const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs-extra') // (commented below) - delete highlighted file from server
const open = require('open');
const app = express();

// Receiving HTTP ERROR 413 for large files - solution: https://stackoverflow.com/a/40890833/6908282 , another reference: https://stackoverflow.com/a/61079051/6908282
// bodyParser deprecated: https://stackoverflow.com/a/24344756/6908282
// var bodyParser = require('body-parser');
app.use(express.json({limit: "50mb",  extended: true}));
app.use(express.urlencoded({limit: "50mb", extended: true, parameterLimit:50000}));

var port = process.env.PORT || 5000;
const uploadPath = path.join(__dirname, 'store/'); // Register the upload path
fs.ensureDir(uploadPath); // Make sure that he upload path exits

app.use(express.static("public"))

var storage = multer.diskStorage({
    // Multer Reference: https://www.youtube.com/watch?v=hXf8Rg-sdpA
    destination: function (req, file, cb) {
        cb(null, "store");
    },
    filename: function (req, file, cb) {
        cb(null, path.parse(file.originalname).name + "-" + Date.now() + path.extname(file.originalname));
    }
});

// Multer file size limit Reference: https://stackoverflow.com/a/34698643/6908282
var upload = multer({
    storage: storage,
    limits: { fileSize: '50mb' }
});
var multipleUploads = upload.fields([{ name: 'pdfToHighlight', maxCount: 1 }, { name: 'searchTerms', maxCount: 1 }])
app.post('/upload', multipleUploads, async (req, res) => {

})

app.listen(port, () => {
    if (port == 5000) {
        open("http://localhost:5000")
        console.log('server started at http://localhost:5000');
    }
})

    <form action="/upload" method="POST" enctype="multipart/form-data">
        <fieldset>
            <legend>File Uploads</legend>
            <label for="pdfFile">Select a PDF to Highlight:</label>
            <input type="file" accept="application/pdf" name="pdfToHighlight" id="pdfFile" required>
            <br>
            <label for="searchFile">Select a CSV with search terms:</label>
            <input type="file" accept=".csv" name="searchTerms" id="searchFile" required>
        </fieldset>
        <button style="background: lightseagreen;font-size: 1em;">upload</button>
    </form>

score 1 · Answer 1 · answered Jul 19 '21 at 09:11

Basic Service Plan:

The Basic service plan is designed for apps that have lower traffic requirements, and don't need advanced auto scale and traffic management features. Pricing is based on the size and number of instances you run. Built-in network load balancing support automatically distributes traffic across instances. The Basic service plan with Linux runtime environments supports Web App for Containers.

The error that you posted is HTTP 413 which means the data is too large to handle. The HTTP 413 Payload Too Large response status code indicates that the request entity is larger than limits defined by server;

You might need to check the azure configuration where you should change the configuration if any. You might also check this, the header configuration.

It could be the configuration issue as it works fine on local, you should also check the logs like memory usage and all other params for the web app hosting.

Thank you for the response @Apoorva. turns out it was an issue with Azure web configuration — Gangula, Jul 30 '21 at 06:58

score 0 · Accepted Answer · answered Jul 30 '21 at 06:57

After doing a lot of research and with help from my colleagues, I was able to successfully upload the file after updating the web.config file in Azure site's Kudu dashboard (also known as the SCM dashboard)

I added the following code:

 <requestLimits maxAllowedContentLength="4294967295"  />

Multer Nodejs Large File Upload - HTTP error 413 in Production environment

2 Answers2