Pages & R2
It is third day and am still struggling to implement a simple mechanism for uploading a file using pages and functions. Good news is that I have progressed a little since two days ago. Everything seems to work locally when I test file uploading from postman but not working on internet when I deploy the app. What could be a probable reason for this bug? Attached are screens of code snippets both for handling the submit event on the client and processing the request in the function. Env variable is down in the dashboard as 'PIC',
upload.ts file is located in the api folder which is inside functions folder which is located in the root folder of the app. Attempt to upload the file results in 500 status error with the message 'internal server error'
13 Replies
Have you tried looking at the new Realtime Logs feature in Pages? That’ll let you debug what’s going on when you deploy, AKA what is causing that 500.
It also seems weird to me that things work locally. When you say that, are you running ‘wrangler pages dev’ to start up the dev server?
wrangler pages dev . --persist --r2=PIC -- npm run dev
how do I use Realtime Logs? when I try to google cloudflare realtime logs so many things relted to logs come up: instant logs, r2 logs, web analytics logs, cloudflare logs docs etcOh yeah, so if you go to a specific Pages deployment, then to the Functions tab, you'll see a
Real-time Logs section. You can stream logs from your Pages fucntions (like wrangler tail)Thank you. Just tried it. The error I see in the logs is
Network connection lost
Could it be that this error is related to how I implemented client and not related to cloudflare at all?
I see this error re Network connection lost every time I run the requestMaybe? I don't see anything obviously wrong on either end of the code you posted.
Network connection lost usually means that the client closed the connection, so you may be on to something.Ok, thank you. Let me try to set up cors headers, maybe that is causing the issue
Yeah, so now that you have visibility into both your client (via your browser) and on the function, you should be able to make progress. Let me know if you get stuck!
cool. thank you
Sid, may I please ask few more minutes of your time? when I run the app locally, the client (built using astro and vanilla js) runs on port 3000 and on port 8788 because I ran
wrangler pages dev --r2=PIC -- npm run dev. The one that runs on 3000 responds with the same error as the app deployed to the web, while the other that runs on 8788 works properly with no errors. Could it be that somehow when I deploy my app, the client served on maqal.pages.dev (this is the domain that my app is available on when deployed) is the same client that is served on port 3000 while what I need is the one that is served on 8788?Have you checked out this guide BTW? https://developers.cloudflare.com/pages/framework-guides/astro
Deploy an Astro site · Cloudflare Pages docs
Documentation for Cloudflare Pages, the best way to deploy your static and JAMstack sites
Are you trying to build out your frontend with Astro, and then make (form submit) requests to a Pages function?
Have you been able to deploy your Astro site (without the form submit) to Pages?
I have checked the guide, installed the adapter but still no success
yes, astro site is working without functions well without any errors
it seems that during deploy stage functions are not picked up (i.e. not registered) because when I click the submit button it does request the correct url but results in 404 as if no route exists
You might want to check if you’ve set the ‘Root Directory’ to something other than ‘/‘. If you have, Pages is likely looking there for the ‘functions’ folder, which might might be tripping you up.
Honestly, I’d probably ask in one of the Pages channels on this Discord, you’ll likely get much better help from them 😄
If you could share your Pages config and/or details about your project structure / build step, that’d help too
Yeah, that's what I thought as well. Started discussing this issue there. Thank you for your help here