Upload Progress Bar Not Working with Nginx

Question

I’m experiencing issues with an upload progress bar that won’t update when uploading files through Nginx. The progress bar fails to reflect any progress updates, staying at 0% throughout the upload.

Here’s my Nginx configuration:

server {
listen 80;
listen 443 ssl http2;
server_name example.com;
root /www/wwwroot/example/example.com;
index index.php index.html index.htm;

client_max_body_size 20M;
client_body_buffer_size 128k;

add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization';

# SSL configuration
ssl_certificate /www/server/panel/vhost/cert/example.com/fullchain.pem;
ssl_certificate_key /www/server/panel/vhost/cert/example.com/privkey.pem;

# Enforce HTTPS
if ($server_port !~ 443){
    rewrite ^(/.*)$ https://$host$1 permanent;
}

# PHP config
include enable-php-83.conf;

# Location for uploads
location /u/uploads {
    client_max_body_size 20M;
    client_body_buffer_size 128k;
    proxy_request_buffering off;
    proxy_buffering off;
}

# Forbidden files or directories
location ~ ^/(\.user.ini|\.htaccess|\.git|\.env|\.svn|LICENSE|README.md) {
    return 404;
}

access_log /www/wwwlogs/example.com.log;
error_log /www/wwwlogs/example.com.error.log;

}

I’m using JavaScript XMLHttpRequest to send the file and track progress:

function uploadFile(file) {
const xhr = new XMLHttpRequest();
const formData = new FormData();
formData.append('file', file);

xhr.open('POST', '/u/upload.php', true);

xhr.upload.onprogress = function (event) {
    if (event.lengthComputable) {
        const percentComplete = (event.loaded / event.total) * 100;
        console.log(`Upload progress: ${percentComplete}%`);
    }
};

xhr.onload = function () {
    if (xhr.status === 200) {
        console.log('File uploaded successfully');
    } else {
        console.error('Upload failed');
    }
};

xhr.send(formData);

}

izissise · Accepted Answer · 2024-10-28 17:01:48Z

Using the following nginx configuration:

server {
listen 80;
listen 443 ssl http2;
server_name example.com;
root /www/wwwroot/example/example.com;
index index.php index.html index.htm;

client_max_body_size 20M;
client_body_buffer_size 128k;

add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization';

# SSL configuration
ssl_certificate /www/server/panel/vhost/cert/example.com/fullchain.pem;
ssl_certificate_key /www/server/panel/vhost/cert/example.com/privkey.pem;

# Enforce HTTPS
if ($server_port !~ 443){
    rewrite ^(/.*)$ https://$host$1 permanent;
}

# PHP config
include enable-php-83.conf;

# Location for uploads
location /u/uploads {
    client_max_body_size 20M;
    client_body_buffer_size 128k;
    proxy_request_buffering off;
    proxy_buffering off;
    proxy_set_body             off;
    proxy_pass                 http://[::1]:4000/$request_method;
}

# Forbidden files or directories
location ~ ^/(\.user.ini|\.htaccess|\.git|\.env|\.svn|LICENSE|README.md) {
    return 404;
}

access_log /www/wwwlogs/example.com.log;
error_log /www/wwwlogs/example.com.error.log;
}

server {
    listen [::1]:4000;
    location /POST { return 204; }
    location /GET  { return 200; }
}

I correctly get progression on the upload, I used firefox throttling to reduce upload rate, the js progress callback is called every second or so.

You don't necessarily need FormData, if you don't need the file form encoded, you can send it directly xhr.send(file);

Collectives™ on Stack Overflow

Upload Progress Bar Not Working with Nginx

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related