[misc]: Really slow upload on a small file
Closed this issue · 21 comments
I understand that this issue may be closed if it should be filed in another category
- I understand
My issue
I'm want to use uploadthing for an intensive image uploading app, but I'm concern about the speed of the uploads, there's a reason why it takes 6 seconds to upload a 1.6kb image ?
The request
The image in UT dashboard.
The implementation
Please tell me if I'm doing something wrong, thanks for the help!
FWIW, the UTApi functions are more intended for use cases where the files are generated serverside, and we primarily recommend handling client-side uploads with a fileRouter and whichever client-side helpers make sense in your use case.
That said, the server-side function should not be that slow, looking into that now.
Was able to repro similar behavior locally, ~4s for a 7kb file. Same upload took less than a second using elysia server example we provide (using react client, and fileRouter pattern)
Only difference being that one uploads from the client, vs the other which ingests the file to the server, then uploads it 🤔
@markflorkowski so the UTApi is more slow because it ingest the files to the server and then uploads to UT?
the other thing is the examples provided are outdated :(, Elysia is on 1.1.x and I getting this error now. Maybe something change?
now I'm getting this error:
Edit:
added the impl
I think this here is were the router is throwing,
Oh ok, I think I get it now, so I need to use the UT react client in order to make it work.
So what if I need to use it on the server and create my own endpoint implementation, isn't the UTApi function made for that? and if so, why is so slow?
Here is an example of a server action with nextjs >13,
https://docs.uploadthing.com/api-reference/ut-api#uploadfiles
I supose this also gonna take 4 to 6 seconds?
@markflorkowski so the UTApi is more slow because it ingest the files to the server and then uploads to UT?
No, I am still unsure why it is slower. It shouldn't be.
So what if I need to use it on the server and create my own endpoint implementation, isn't the UTApi function made for that?
Yes, the UTApi is intended for uploading from the serverside. If your product is an api that others are hitting and uploading files to, or you are modifying files before storing them, it makes sense to use the UTApi functions.
If instead, your product is a web app, where your users are uploading files from within said app, it makes more sense to use our client adapters, and the fileRouter.
If so, why is so slow?
Still investigating this.
@markflorkowski so the UTApi is more slow because it ingest the files to the server and then uploads to UT?
No, I am still unsure why it is slower. It shouldn't be.
So what if I need to use it on the server and create my own endpoint implementation, isn't the UTApi function made for that?
Yes, the UTApi is intended for uploading from the serverside. If your product is an api that others are hitting and uploading files to, or you are modifying files before storing them, it makes sense to use the UTApi functions.
If instead, your product is a web app, where your users are uploading files from within said app, it makes more sense to use our client adapters, and the
fileRouter.If so, why is so slow?
Still investigating this.
Thanks
Hey @markflorkowski, I decided to do the nextjs app router implementation instead of doing in my own server, its almost the same time, it takes almost 6 seconds to upload an image of 1.7kb, could be because im located in south america?
Here's the browser network tab:
In this case the long time is likely due to polling (on by default), if you are not using data returned from a serverside onUploadComplete on the client, you can add skipPolling option to the components/hook to have the client treat the upload as complete without waiting for your backend server to be hit with our webhook. When v7 is released, this will be a non-issue as the entire flow of files is changed.
@LeoCaprile -- Just following up on this, now that V7 is live, have you had a chance to give it a try to see if the performance is any better?
This issue has been automatically marked as stale because it has not had any activity for 10 days. It will be closed in 5 days if no further activity occurs.
This issue has been closed because it has not had any activity for 5 days since being marked as stale.
This issue has been closed because it has not had any activity for 5 days since being marked as stale.
I don't think this issue should be closed. A 10kb file takes +3 seconds
@AhmedBaset - Can you repro this behaviour on the latest v7 versions of uploadthing?
I stumpled across this issue in v7.2.0 of uploadthing
const response = await utapi.uploadFiles([image]);
is taking ages. am using express
Same here, I'm using the REST API. The upload is not finished, keep uploading state forever!
Same here, I'm using the REST API. The upload is not finished, keep uploading state forever!
This looks more like what happens when your server can't be reached by our servers for the incomplete callback. In this case it will stay in the "uploading" state until a timeout is reached (1 day I believe), then transition to "failed"
I stumpled across this issue in v7.2.0 of uploadthing
const response = await utapi.uploadFiles([image]);is taking ages. am using express
Can you enable debug logs and share the output for a test file upload, it should have timing data so we can narrow down what in the upload process is slow.
Same here, I'm using the REST API. The upload is not finished, keep uploading state forever!
Did you solve?
Same here, I'm using the REST API. The upload is not finished, keep uploading state forever!This looks more like what happens when your server can't be reached by our servers for the incomplete callback. In this case it will stay in the "uploading" state until a timeout is reached (1 day I believe), then transition to "failed"
So basically we can't use rest api in a nextjs app? I am currently testing locally as below so that I can upload, but it gets stuck in uploading
So basically we can't use rest api in a nextjs app? I am currently testing locally as below so that I can upload, but it gets stuck in uploading
You should be able to, though we do offer a native NextJS implementation that makes things much easier than having to manually interact with the api.
That said, I can't really tell what you are doing from your screenshot. What is the value of UPLOADTHING_API_URL?