Can't upload large files

Question

I am using react on frontend and express on backend.

Here is my code that I use to upload files:

    const formData = new FormData();
    formData.append('file', blob);
    formData.append('title', videoName);

    const request = new XMLHttpRequest();
    request.open('POST', `${process.env.URL}/api/video`); 
    request.withCredentials = true;
    request.setRequestHeader('lang', router.locale as string)
    request.upload.onprogress = e => {
        setUploadProgress(Math.floor((e.loaded / e.total) * 100));
    };
    request.onload = () => {
        const resp = JSON.parse(request.response);
        setRequestErr({
            mess: resp.message, 
            code: resp.statusCode
        })
        resp.statusCode === 401 && logoutUser()
        setIsVideoBeingSent(false);
        setModalType('info')
        
        if(resp.status === 200){
            setModalInfoType('success')
        } else{
            setModalInfoType('fail')
        }
    };

    request.send(formData);

It works perfectly locally, on both smaller and larger files (up to 150mb).

The problem occurs when I try to upload the file to a server hosted on amazon. The 150mb file stops at about 25 percent and does not move further.

I am using express-fileupload with settings:

const fileUpload = require('express-fileupload');

let Options = {
    limits: { fileSize: 200 * 1024 * 1024 },
    useTempFiles: true,
    abortOnLimit: true,
    tempFileDir: './content/tmp/',
    uploadTimeout: 0,
    debug: true,
}

router.post("/", TokenVerify, fileUpload(Options), UploadVideo);

Console in server shows nothing, no errors or other messages. Console in the browser returns only:

POST /api/video net::ERR_CONNECTION_ABORTED

What could be the cause of this?

score 0 · Answer 1 · answered Jan 03 '22 at 20:33

If you are using a virtual machine or a service that uses one on your amazon server, then chances are that you are using either Apache or Nginx to proxy your traffic on port 80 to your app. Meaning your express server configurations as far as upload file limits are concerned don't matter at all, but the one's on the http server you are using, so if it's Nginx: set the client_max_body_size directive to your desired limit, eg, client_max_body_size 100; This can be done as explained on this answer

And as for apache, this ought to help you: apache file upload limit settings

However if you don't have ssh access to your production environment, then their should be a server configuration file you can use to edit the limits. Or some gui settings you can edit.

The most important point here is that set your upload limit both on your express server and on the http server routing your clients' requests.

Can't upload large files

1 Answers1