Upload progress bar significantly delayed when deployed behind Cloudflare

[nivetaiyer]

Describe the bug
When deploying a Reflex app behind Cloudflare (with HTTPS enabled), the rx.upload(progress=True) component does not show the progress bar until the entire file upload is complete. The handle_upload() function on the backend is not triggered until the full body is received, which delays the start of the progress bar by 10–20 seconds for large files.

This behavior does not occur when the app is run locally (without a reverse proxy), where the progress bar appears immediately and tracks the upload in real time.

To Reproduce
Deploy a Reflex app using rx.upload(progress=True) behind NGINX and Cloudflare (proxy enabled).

Upload a large file (10MB+).

Observe the delayed appearance of the progress bar.

Check DevTools: the /_upload request shows Request Sent duration = 10–20s, with Waiting (TTFB) only starting after the file is fully uploaded.

• Code/Link to Repo:

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.
https://github.com/user-attachments/assets/6a7c1b01-ac73-4ac3-9cf0-137a77ca9878

Specifics (please complete the following information):

• Python Version: 3.12
• Reflex Version: 0.7.13
• OS: Amazon Linux
• Browser (Optional): Chrome

Additional context
Add any other context about the problem here.

[linear[bot]]

ENG-6099 Upload progress bar significantly delayed when deployed behind Cloudflare

[Alek99]

This is interesting we use cloudflare and have not experienced this - but maybe ours is set up differently

Just to get some more context you are using cloudflare to serve your static files from reflex export and have a prod server with reflex running - is this server also behind cloudflare?

[nivetaiyer]

Thanks Alek, there's something certainly off with my setup then!

The server is behind cloudflare. I have the app running on an EC2 instance (frontend @ port 3000, backend @ port 8000), and cloudflare points to the EC2 instance's public static IP. I don't know if the problem lies in cloudflare, or nginx or reflex itself :)

I initially served my static files via reflex export, but the progress bar never showed up (not even after a delay). So I changed my setup to serve both front and backend live. These are my docker configs:

Dockerfile (backend):

FROM python:3.12

ENV REDIS_URL=redis://redis PYTHONUNBUFFERED=1

WORKDIR /app
COPY . .

# Install rsync and clean up cache
RUN apt-get update && \
    apt-get install -y rsync && \
    rm -rf /var/lib/apt/lists/*

RUN pip install -r requirements.txt

ENTRYPOINT ["reflex", "run", "--env", "prod", "--backend-only", "--loglevel", "debug" ]

web.Dockerfile (frontend):

FROM python:3.12

ENV REDIS_URL=redis://redis PYTHONUNBUFFERED=1

WORKDIR /app
COPY . .

# Install rsync and clean up cache
RUN apt-get update && \
    apt-get install -y rsync && \
    rm -rf /var/lib/apt/lists/*

RUN pip install -r requirements.txt

ENTRYPOINT ["reflex", "run", "--env", "prod", "--frontend-only", "--loglevel", "debug" ]

compose.yml

version: '3.8'

services:
  frontend:
    build:
      context: .
      dockerfile: web.Dockerfile
    ports:
      - "3000:3000"
    depends_on:
      - backend

  backend:
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "8000:8000"
    volumes:
      - ~/.ssh:/root/.ssh:rw
      - ~/users.yaml:/app/users.yaml

  nginx:
    image: nginx:latest
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
    ports:
      - "80:80"
    depends_on:
      - frontend
      - backend
  
  redis:
    image: redis

nginx:

server { 
 listen 80;
 listen  [::]:80;
 server_name app.crescer.ai;
 client_max_body_size 500M;

 proxy_buffering off;
 proxy_request_buffering off;

 error_page   404  /404.html;

 location /_event {
    proxy_set_header   Connection "upgrade";
    proxy_pass http://backend:8000;
    proxy_http_version 1.1;
    proxy_set_header   Upgrade $http_upgrade;
 }

 location /ping {
    proxy_pass http://backend:8000;
 }

 location /_upload {
    proxy_pass http://backend:8000;
    proxy_request_buffering off;
    proxy_buffering off;
 }

 location / {
    proxy_pass http://frontend:3000;
    proxy_http_version 1.1;
   # This would be the directory where your Reflex app's static files are stored at
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

    #### New settings!
    proxy_buffer_size 128k;
    proxy_buffers 4 256k;
    proxy_busy_buffers_size 256k;
    proxy_max_temp_file_size 0;
 }

}

[nivetaiyer]

Any ideas?

[Alek99]

Sorry don't have the bandwidth right now to help debug the infra set up.

But in cloudflare logs you may be able to see if it's the culprit based on response time. I would tend to not think it's a framework related issue as we have production set ups where this hasn't been an issue. Also behind a CDN and load balancers

Our hosting service handles all this but understand if you need to self host for some other reasons