is there an example to receive a file uploads via POST? and maybe uploading it to R2? can anyone sha

PPaolo is there an example to receive a file uploads via POST? and maybe uploading it t...

H

Like this?

export const onRequestPost: PagesFunction<{ R2: R2Bucket}> = async (ctx) => {
    await ctx.env.R2.put("name", ctx.request.body);
    return new Response("ok");
};

export const onRequestPost: PagesFunction<{ R2: R2Bucket}> = async (ctx) => {
    await ctx.env.R2.put("name", ctx.request.body);
    return new Response("ok");
};

export const onRequestPost: PagesFunction<{ R2: R2Bucket}> = async (ctx) => {
    await ctx.env.R2.put("name", ctx.request.body);
    return new Response("ok");
};

export const onRequestPost: PagesFunction<{ R2: R2Bucket}> = async (ctx) => {
    await ctx.env.R2.put("name", ctx.request.body);
    return new Response("ok");
};

HHello, I’m Allie!Like this? ```ts export const onRequestPost: PagesFunction<{ R2: R2Bucket}> = as...

P

PaoloOP•3/11/24, 10:22 AM

perfect, but how do i know if ctx.request.body is a file and get the file name?

PPaolo perfect, but how do i know if ctx.request.body is a file and get the file name?

H

Hello, I’m Allie!•3/11/24, 10:23 AM

How are the uploads created?

H

Hello, I’m Allie!•3/11/24, 10:23 AM

Is it with a form?

HHello, I’m Allie!How are the uploads created?

P

PaoloOP•3/11/24, 10:24 AM

I haven't decided, I'm writing it up now

P

PaoloOP•3/11/24, 10:24 AM

I'm open to suggestions

P

PaoloOP•3/11/24, 11:17 AM

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();
     
formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();
     
formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();
     
formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});

let photo = document.getElementById("image-file").files[0];
let formData = new FormData();
     
formData.append("photo", photo);
fetch('/upload/image', {method: "POST", body: formData});

P

PaoloOP•3/11/24, 11:18 AM

for some reason I never ever handled image upload in my life

M

Marius Gundersen•3/11/24, 11:27 AM

Have a look at the request in your browsers devtools when you upload, you'll see that it starts with some plain text then it is followed by the actual image bytes. You can use ctx.request.text() to parse this yourself or look for a library that can handle multipart form content for you

PPaolo ``` let photo = document.getElementById("image-file").files[0]; let formData = n...

H

Hello, I’m Allie!•3/11/24, 11:32 AM

You can use https://developer.mozilla.org/en-US/docs/Web/API/Request/formData to get a

formData

formData

formData

formData object from the

Response

Response

MDN Web Docs

Request: formData() method - Web APIs | MDN

The formData() method of the Request interface
reads the request body and returns it as a promise that resolves with a FormData object.

L

Lambo•3/11/24, 11:48 AM

Hello,

I'm trying to disable local mode so that I can access my production D1 instance via my Pages Function.

I had originally expected there to just be the option to press

l

l like when running workers in dev to disable this, but there isn't. This led me to discover the

--local false

--local false

--local false

--local false flag. However, this doesn't do anything. I can see my binding is still referencing a local miniflare database.

When running

npx wrangler pages dev public --local false

npx wrangler pages dev public --local false

npx wrangler pages dev public --local false

npx wrangler pages dev public --local false I see:

Your worker has access to the following bindings:
- D1 Databases:
  - DB: database-name (database-id)
⎔ Starting local server...

Your worker has access to the following bindings:
- D1 Databases:
  - DB: database-name (database-id)
⎔ Starting local server...

Your worker has access to the following bindings:
- D1 Databases:
  - DB: database-name (database-id)
⎔ Starting local server...

Your worker has access to the following bindings:
- D1 Databases:
  - DB: database-name (database-id)
⎔ Starting local server...

Any ideas? Thanks

LLambo Hello, I'm trying to disable local mode so that I can access my production D1 ...

H

Hello, I’m Allie!•3/11/24, 11:50 AM

Pages Dev is local-only at the moment

L

Lambo•3/11/24, 11:50 AM

That's annoying, I don't suppose there's any form of workaround?

L

Lambo•3/11/24, 11:51 AM

or a way I can set a worker I have to be local, and have the pages function access that?

LLambo or a way I can set a worker I have to be local, and have the pages function acce...

H

Hello, I’m Allie!•3/11/24, 11:51 AM

Maybe adapting https://www.npmjs.com/package/cf-bindings-proxy to use Workers instead of Pages?

npm

cf-bindings-proxy

Experimental proxy for interfacing with bindings in projects targeting Cloudflare Pages. Latest version: 0.7.1, last published: 4 months ago. Start using cf-bindings-proxy in your project by running

npm i cf-bindings-proxy

npm i cf-bindings-proxy

npm i cf-bindings-proxy

npm i cf-bindings-proxy. There are no other projects in the npm registry using cf-bindings-proxy.

L

Lambo•3/11/24, 11:51 AM

I'll investigate. Thanks

L

Lambo•3/11/24, 11:52 AM

Is non-local mode for pages dev planned?

LLambo Is non-local mode for pages dev planned?

H

Hello, I’m Allie!•3/11/24, 11:52 AM

Haven't heard about it, maybe with Convergence(merging of Workers/Pages)?

L

Lambo•3/11/24, 11:52 AM

I'm not aware of Convergence

LLambo I'm not aware of Convergence

H

Hello, I’m Allie!•3/11/24, 11:53 AM

It's not active, but when it is, Pages and Workers will become a single product

L

Lambo•3/11/24, 11:53 AM

That makes sense

L

Lambo•3/11/24, 11:53 AM

Thanks!

L

Lambo•3/11/24, 2:48 PM

Hey, me again...

So I have a Pages Function in the root of my functions directory called

[articleId].ts

[articleId].ts

[articleId].ts

[articleId].ts. A catch all for all

domain.com/<id>

domain.com/<id>

domain.com/<id>

domain.com/<id>.
This is great, however, it also catches

domain.com

domain.com

itself. Which I do not want, as it will trigger the function for no reason.

I thought I could disable this via

_routes.json

_routes.json

_routes.json

_routes.json:

{
  "version": "1",
  "include": ["/*"],
  "exclude": "/"
}

{
  "version": "1",
  "include": ["/*"],
  "exclude": "/"
}

{
  "version": "1",
  "include": ["/*"],
  "exclude": "/"
}

{
  "version": "1",
  "include": ["/*"],
  "exclude": "/"
}

L

Lambo•3/11/24, 2:48 PM

However, this appears to do nothing. I still see the function being hit. Any ideas?

K

King•3/12/24, 1:18 AM

Hello guys, I need some help to define a way to handle file uploads to a quote form in a pages website and sent e-mail notifications with the files attached to them.

LLambo Hey, me again... So I have a Pages Function in the root of my functions directo...

M

Marius Gundersen•3/12/24, 6:29 AM

It might be related to this: https://github.com/cloudflare/workers-sdk/issues/3406

GitHub

🐛 BUG: Index route is overwritten by wildcard route · Issue #3406 ·...

Which Cloudflare product(s) does this pertain to? Wrangler What version of Wrangler are you using? 3.0.1 What operating system are you using? Windows Describe the Bug The pages functions routing ru...

MMarius Gundersen It might be related to this: https://github.com/cloudflare/workers-sdk/issues/34...

L

Lambo•3/12/24, 10:18 AM

Seems so. Annoying no one has responded to it! How are you dealing with it?

LLambo Seems so. Annoying no one has responded to it! How are you dealing with it?

M

Marius Gundersen•3/12/24, 10:54 AM

For me the problem was that I couldn't have separate functions for index and fallback at the root level, but the simple workaround was to combine the functions and check the incoming url

L

Lambo•3/12/24, 11:03 AM

Right okay sure

N

Nicolas•3/15/24, 3:19 PM

Hi all,

I was wondering what the recommended approach is for ingesting and processing form data, when deploying to cloudflare pages. Cloudflare pages supports the ideas of functions by adding a

/functions

/functions

directory and placing scripts there: https://developers.cloudflare.com/pages/functions/get-started/, however I also noticed that Astro has this guide on endpoints: https://docs.astro.build/en/guides/endpoints/, and it seems this could also work? However, when using Cloudflare Pages for deployment, I am not sure which method is recommended. If i follow Astro's guide on endpoints, would these automatically be served by Pages in a similar way to the Functions? Anyone with experience with deploying Astro to Cloudflare Pages can shine some light on this?

Thank you!

NNicolas Hi all, I was wondering what the recommended approach is for ingesting and proc...

B

Beny•3/18/24, 3:58 PM

There's a plugin which is good for processing forms using a middleware function: https://developers.cloudflare.com/pages/functions/plugins/static-forms/
However if you're using Astro I assume you'll want to use their middleware instead.

Here's an example:

// src/middleware.js
export async function onRequest({ request, locals }, next) {
    // Check if the current request path matches the specific form action path
    if (new URL(request.url).pathname === '/form-path' && request.method === 'POST') {
        try {
            // Process form data
            const formData = await request.formData();

            // Example of form data processing.
            if(formData.get('name') !== "john") {
                throw new Error("Name must be john!")
            }

            // After processing successfully, redirect to `/form-submitted`
            return Response.redirect(new URL("/form-submitted", request.url), 302);
        } catch (error) {
            // If there's an error in processing, set `locals.formError`
            // This can later be checked in the endpoint handling the form submission
            locals.formError = error.message;
        }
    }

    // If the path does not match, proceed with the normal request flow.
    return next();
}

// src/middleware.js
export async function onRequest({ request, locals }, next) {
    // Check if the current request path matches the specific form action path
    if (new URL(request.url).pathname === '/form-path' && request.method === 'POST') {
        try {
            // Process form data
            const formData = await request.formData();

            // Example of form data processing.
            if(formData.get('name') !== "john") {
                throw new Error("Name must be john!")
            }

            // After processing successfully, redirect to `/form-submitted`
            return Response.redirect(new URL("/form-submitted", request.url), 302);
        } catch (error) {
            // If there's an error in processing, set `locals.formError`
            // This can later be checked in the endpoint handling the form submission
            locals.formError = error.message;
        }
    }

    // If the path does not match, proceed with the normal request flow.
    return next();
}

// src/middleware.js
export async function onRequest({ request, locals }, next) {
    // Check if the current request path matches the specific form action path
    if (new URL(request.url).pathname === '/form-path' && request.method === 'POST') {
        try {
            // Process form data
            const formData = await request.formData();

            // Example of form data processing.
            if(formData.get('name') !== "john") {
                throw new Error("Name must be john!")
            }

            // After processing successfully, redirect to `/form-submitted`
            return Response.redirect(new URL("/form-submitted", request.url), 302);
        } catch (error) {
            // If there's an error in processing, set `locals.formError`
            // This can later be checked in the endpoint handling the form submission
            locals.formError = error.message;
        }
    }

    // If the path does not match, proceed with the normal request flow.
    return next();
}

// src/middleware.js
export async function onRequest({ request, locals }, next) {
    // Check if the current request path matches the specific form action path
    if (new URL(request.url).pathname === '/form-path' && request.method === 'POST') {
        try {
            // Process form data
            const formData = await request.formData();

            // Example of form data processing.
            if(formData.get('name') !== "john") {
                throw new Error("Name must be john!")
            }

            // After processing successfully, redirect to `/form-submitted`
            return Response.redirect(new URL("/form-submitted", request.url), 302);
        } catch (error) {
            // If there's an error in processing, set `locals.formError`
            // This can later be checked in the endpoint handling the form submission
            locals.formError = error.message;
        }
    }

    // If the path does not match, proceed with the normal request flow.
    return next();
}

Cloudflare Docs

Static Forms · Cloudflare Pages docs

The Static Forms Pages Plugin intercepts all form submissions made which have the data-static-form-name attribute set. This allows you to take action …

I

Isaac McFadyen•3/18/24, 5:17 PM

You shouldn't need to use Astro's middleware to do this though.

I

Isaac McFadyen•3/18/24, 5:18 PM

You should be able to use Endpoints, the middleware just adds complexity because you need to check the path yourself.

S

Smarter•3/18/24, 7:04 PM

I am using a Pages Function as a proxy to my backend API, to get it to work I had to install CF SSL Cert, and use SSL on my backend API host, I was unable to use regular http. However, I was wondering if I must also use port 443 for my backend API or if I can specify one and that will work? I figured I'd ask before I went through trying it out, since everything is technically working right now.

S

Smarter•3/19/24, 6:37 PM

I can't seem to provide a custom port for my backend, it fails with a 521 error code.

S

Smarter•3/19/24, 6:41 PM

But requests from the script to the standard 443 HTTPS port work fine.

S

Smarter•3/19/24, 6:41 PM

But I'm trying to deploy a dev copy as well at 8443 in my Preview enviorment.

S

Smarter•3/19/24, 6:47 PM

Documentation shows that 8443 is a supported port as well

(https://developers.cloudflare.com/fundamentals/reference/network-ports/)

S

Smarter•3/19/24, 6:54 PM

Oh... damn: https://developers.cloudflare.com/workers/platform/known-issues/#custom-ports

K

Kilisei•3/20/24, 12:35 PM

Hi i have a question regarding turnstile and mailchannels for my contact form im stuck and cant get my turnstile key to verify correctly is there an example i could look at and maybe find my mistake?

CChamp Has Pages Functions supported the Server-Sent Events web standard yet?

O

outsideurimagination•3/20/24, 12:57 PM

did you get server sent events working? for me the client gets disconnected right away and tries reconnecting constantly after. I've heard we may need to do something with durable objects or just resort to websockets. hard to find info out there

S

soy.david•3/20/24, 3:22 PM

How can I use TCP sockets in my SvleteKit project? I don't understand how to import it into the route .

D

D5•3/20/24, 8:03 PM

So I thought building a blog that fetches data from Appwrite and generates a static Cloudflare pages (SSR page generation with Astro)

The doubt is, from what I'm seeing, there's a limit to 10ms CPU time? Then as the code needs to fetch data form appwrite it will throw an instant timeout (as it will take probably more that 10ms to get some response)?

DD5 So I thought building a blog that fetches data from Appwrite and generates a sta...

H

Hello, I’m Allie!•3/20/24, 8:04 PM

CPU Time is time doing some kind of work. Even if AppWrite takes 10 seconds to return a response, that isn't counted

HHello, I’m Allie!CPU Time is time doing some kind of work. Even if AppWrite takes 10 seconds to r...

D

D5•3/20/24, 8:05 PM

Oh, fine. So I could generate then the page successfully, right?

DD5 Oh, fine. So I could generate then the page successfully, right?

H

Hello, I’m Allie!•3/20/24, 8:05 PM

You should be able to, assuming you aren't doing more than 10 ms. of work rendering the actual page