Tilo Posts - Answer Overflow

Tilo

Explore posts from servers

CDCloudflare Developers TTCTheo's Typesafe Cult

•Created by Tilo on 2/19/2024 in #pages-help

Sveltekit does not get the platform variable when processing api request

Hello I have a Cloudflare Pages App using Sveltekit and I want to integrate R2. I have configured my wrangler.toml

name = "<name>"
main = "./.svelte-kit/cloudflare/_worker.js"
build.command = "bun run build"
compatibility_date = "2022-06-30"
account_id = "<id>"
workers_dev = true

compatibility_flags = [ "nodejs_compat" ]


[[r2_buckets]]
binding = 'FILE_BUCKET'
bucket_name = '<bucket-name>'

name = "<name>"
main = "./.svelte-kit/cloudflare/_worker.js"
build.command = "bun run build"
compatibility_date = "2022-06-30"
account_id = "<id>"
workers_dev = true

compatibility_flags = [ "nodejs_compat" ]


[[r2_buckets]]
binding = 'FILE_BUCKET'
bucket_name = '<bucket-name>'

I setup my src/app.d.ts:

declare namespace App {
    interface Platform {
        env: {
            FILE_BUCKET: R2Bucket;
        };
        context: {
            waitUntil(promise: Promise<any>): void;
        };
        caches: CacheStorage & { default: Cache };
    }
}

declare namespace App {
    interface Platform {
        env: {
            FILE_BUCKET: R2Bucket;
        };
        context: {
            waitUntil(promise: Promise<any>): void;
        };
        caches: CacheStorage & { default: Cache };
    }
}

I'm running the server through this command: npx wrangler pages dev --proxy 5174 -- npm run dev -- --port 5174 And this is my endpoint

import { fail, json } from '@sveltejs/kit';
import type { RequestEvent } from './$types';

export async function POST(event: RequestEvent) {
    const formData = await event.request.formData();
    console.log(event);
    const env = event.platform!.env;

    console.log(formData);
    const file = formData.get('fileToUpload') as File;

    if (!file.name || file.name === 'undefined') {
        return fail(400, {
            error: true,
            message: 'You must provide a file to upload',
        });
    }

    const buff = Buffer.from(await file.arrayBuffer());
    let res = await env.FILE_BUCKET.put('Test file', buff);
    console.log(res);
    return json({ success: true });
}

import { fail, json } from '@sveltejs/kit';
import type { RequestEvent } from './$types';

export async function POST(event: RequestEvent) {
    const formData = await event.request.formData();
    console.log(event);
    const env = event.platform!.env;

    console.log(formData);
    const file = formData.get('fileToUpload') as File;

    if (!file.name || file.name === 'undefined') {
        return fail(400, {
            error: true,
            message: 'You must provide a file to upload',
        });
    }

    const buff = Buffer.from(await file.arrayBuffer());
    let res = await env.FILE_BUCKET.put('Test file', buff);
    console.log(res);
    return json({ success: true });
}

But event.platform is always undefined, no matter how I start the server, even when I deploy a preview build I do not have platform set. Does anyone have an idea how to fix this, your help would be greatly appreciated.

5 replies

Gaming

Programming