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

TTCTheo's Typesafe Cult

•Created by Tilo on 4/19/2023 in #questions

Passing a object with readonly attributes through tRPC

I have a class (provided by a library)

import { Asset, GameMode, IMatch, MapName, Participant, PlatformRegion, PubgAPI, Roster, SeasonState, Telemetry } from '..';

export declare class Match {
    private _id;
    private _dateCreated;
    private _duration;
    private _gameMode;
    private _isCustomMatch;
    private _map;
    private _patchVersion;
    private _seasonState;
    private _shardId;
    private _participants;
    private _rosters;
    private _asset?;
    private constructor();
    static get(api: PubgAPI, matchId: string): Promise<Match>;
    static fromDetail(matchDetail: IMatch): Match;

    readonly id: string;
    readonly dateCreated: Date;
    readonly duration: number;
    readonly gameMode: GameMode;
    readonly isCustomMatch: boolean;
    readonly map: MapName;
    readonly patchVersion: string | undefined;
    readonly seasonState: SeasonState;
    readonly shardId: PlatformRegion;
    readonly asset: Asset;
    readonly participants: Participant[];
    readonly rosters: Roster[];

    getParticipantById(id: string): Participant | undefined;
    getParticipantByName(name: string): Participant | undefined;

    getWinners(): Participant[];
    getTelemetry(api: PubgAPI): Promise<Telemetry>;
}

import { Asset, GameMode, IMatch, MapName, Participant, PlatformRegion, PubgAPI, Roster, SeasonState, Telemetry } from '..';

export declare class Match {
    private _id;
    private _dateCreated;
    private _duration;
    private _gameMode;
    private _isCustomMatch;
    private _map;
    private _patchVersion;
    private _seasonState;
    private _shardId;
    private _participants;
    private _rosters;
    private _asset?;
    private constructor();
    static get(api: PubgAPI, matchId: string): Promise<Match>;
    static fromDetail(matchDetail: IMatch): Match;

    readonly id: string;
    readonly dateCreated: Date;
    readonly duration: number;
    readonly gameMode: GameMode;
    readonly isCustomMatch: boolean;
    readonly map: MapName;
    readonly patchVersion: string | undefined;
    readonly seasonState: SeasonState;
    readonly shardId: PlatformRegion;
    readonly asset: Asset;
    readonly participants: Participant[];
    readonly rosters: Roster[];

    getParticipantById(id: string): Participant | undefined;
    getParticipantByName(name: string): Participant | undefined;

    getWinners(): Participant[];
    getTelemetry(api: PubgAPI): Promise<Telemetry>;
}

I want to send this / the data of the readonly attributes to the client, but either while sending it directly or while destructing the object everything get's prefixed with and underscore (because it is private and readonly I think ?). The problem is if I try to access this data on the client Typescript will throw an error because the attribute is "private". How can I clone this data and or send it so that I can access it on the client ?

9 replies

Gaming

Programming