I guess you can use the size property from the File and return on error if its bigger than your limit https://developer.mozilla.org/en-US/docs/Web/API/Blob/size

size is in bytes

yeah I could do that but then the whole file will already be loaded in memory.

this is what I used do in tradition express app, look at line 13, I'm pausing the request to prevent server from loading the file any further if payload size exceeds.

maybe instead of using a server action, you could use a route handler and use the request.body that is a ReadableStream

I have tried that, client keeps on uploading the file and creates a relative delay, I can't pause the upload even if the size exceeds, is there any way to pause it?

it seems that you can use the const reader = request.body.getReader() and you can cancel the reader reader.cancel() @Double-striped Thick-knee

look at the cpu usage, it will increase as the file size increases, @Velvet ant

you need to iterate through the reader

Why not just check client side?

yes also but still need a server check

Well, thats a silly question, it can be bypassed. but yeah

I was writing that 😄

yeah that's the issue

ts error, reader is not an array

readStream.on('data', (chunk) => {
      totalBytes += chunk.length;
      if (totalBytes > MAX_SIZE) {
        readStream.destroy();
        res.status(413).json({ error: 'File too large' });
      }
    });

I do something similar to this in express..... but not sure how it translates.

Not in front of a computer so I cant test anything.

Little different though, I dont care about bandwidth, so im just checking once I start reading the file.

That doesnt help

Hrmmm.

without size limit, someone can overwhelm the server with huge files

Yeah no I get it.

Thats why I said that doesnt help 🙂

Im kind of thinking through this as im typing.

I saw a lot of tutorials but looks like they aren't caring about it

Yeah, often overlooked. I know how to do what your asking in express, but nextjs is a different animal. Im looking through some documentation for an answer

true, only if they provided some functions to control the request flow

Its a hard thing to expose with a serverless environment I would imagine.

maybe this example could help https://developer.mozilla.org/en-US/docs/Web/API/ReadableStreamDefaultReader#examples

they did expose alot tho, but not the request object

alright

I ran into this same kinds of issues when I tried to implement streaming from the server side, its not super straight forward, had to disect the nextjs ai package and figure out how its doing it.

looks like it's for loading data

https://github.com/vercel/next.js/discussions/57973

This is somewhat relevant, but unanswered

I tried bodySizeLimit, but didn't work

I wonder if you could inspect in middleware?

the default is 2mb

tried that 2h ago, lemme try again

Are you hosting through vercel?

normally I do

Just so you know before going down this path vercel has a max server action request size built in.

what about api routes

With vercel there is a hard limit let me find.

how are they limiting the size, can we do it ourself?

If your self hosting, it depends on what your using. I use nginx, there I can specify limits for any endpoint, because your handling it at the network level.

I would open a discussion topic on github, ive had some success with that in the past, there might still be a way, might look at it later when I have some free time.

does it perform well on self hosting

lemme know if you find anything, until then I will proceed with anti ddos protection

Yeah I use it at the enterprise level. 100+ active users at a time (m-f) and probably 2000-3000 unique visits a day, all routing through nginx as as reverse proxy

http {
    client_max_body_size 10M;  # Default limit for all requests

    server {
        location / {
            # ... other configurations
        }

        location /specific_url {
            client_max_body_size 5M;  # Limit for /specific_url
            # ... other configurations for /specific_url
        }
    }
}

Its pretty easy to do with nginx.

will look into it, thanks for your help

my formData looks like this,

title: string
content: string
file: File

so with the first approach I had to upload all data to the nextjs server, and the server would handle them itself, such as uploading the file and then store the rest of the data in database

but what about the second approach, do i need to upload the File from client and send rest of the data to nextjs server?

yes, you would upload the file via POST (or PUT) to your file storage server. You already have the file: File in your data, so that's easy for you. After you got the result, that the file was uploaded successfully (check your POST (or PUT) request), you can insert it inside your database.

As I am using s3, I only know a way for s3 [(see here)](https://aws.amazon.com/de/blogs/compute/uploading-to-amazon-s3-directly-from-a-web-or-mobile-application/)
For it, you get an upload url (if needed with policy) and then upload thought you body from the request directly to your file storage server

thanks, it was helpful, so basically I have to send two requests from client, one for uploading file to storage server and second request will be used to post rest of the content to nextjs server.

I'm curious about something, what if the second request gets blocked intentionally or unintentionally

only the image will be uploaded but records won't be stored on database

yes and you want to check if the file upload was successful before inserting a new record in your database

It's the sime like if you would do it in one function (on nextjs server). Something is finished first. So there is not much difference

since file is getting uploaded from client, how would i know?

sry if my question sounds dumb

oh, when you start uploading by creating your request:

form.append("file", file);
const res = await fetch(uploadUrl, {
  method: "POST",
  body: form,
});

You can then check if the request was successful or not:

if (res.status === 201) {
  // todo create db record
  // ...
}

and then i will post the title and content in nextjs server that will upload it in the database, does that sound right

exactly 👍

but i'm concerned about it, what if someone intentionally blocks the second request from client @B33fb0n3

then there won't be any entry

is there any way to prevent it

The upload request is created by client and like that the client checks if it was successful (we extracted the nextjs server because of the limit). So, I don't know a way

alright thanks, maybe i have to use cron jobs to check if there are any images without entries

that's a possible way of doing a cleanup. If you also want to find these lonely files, you can check the creation date of your image and check if there is any database entry created at this point as well (maybe give it a 5 sec timespan). Like that you can find these files, that don't have any database record with it (but it will be very rare)

i was thinking of using redis queue and check every hour for files with no entries and delete them

Every hour?? Shouldn't it be normal, that every fetch request will go though? And only for the rare client, that does not work, you have this queue?

well, i'm worried about that one malicious client

of course you should use a policy for your upload url. If you using s3 upload urls, yo can add a upload limit. Normally only logged in users can upload stuff (in most of my cases). So you have a user and normally this user is somehow limited. Maybe there are account limits, maybe there are file managers with limits, maybe ... So when creating the upload url (with the policy), you add the line on how much the person can upload. The creation of thie upload url also contains the substraction of available limits. The file is directly uploaded after the creation of the upload url is done (without further action from the client) so it will be uploaded perfectly.

If there is a malicious client, that just want to upload stuff to your storage, then he will eventually hit that limit and fail to create more upload urls.

owh, it looks more promising, thanks, this is definitely what i need

That sounds great. Can I ask you one last question? What file storage server are you using?

i haven't choosen one yet, i was using cloudinary for testing

Ah ok. Enjoy 😊
(Please mark solution)