Thanks for responding Chaika! No, I am just a free customer, with 7 buckets and paid billing activat

Original message was deleted

E

Erisa•5/1/24, 8:18 AM

Currently those requests are billed

C

cornernote•5/1/24, 8:19 AM

hello, i upload a file to R2 this using

Aws\S3\S3Client

Aws\S3\S3Client

Aws\S3\S3Client

Aws\S3\S3Client as follows:

        $s3Client->putObject([
            'Bucket' => 'pictures',
            'Key' => 'test/test2.jpg',
            'Body' => fopen('test/test2.jpg', 'rb'),
            'ACL' => 'public-read',
        ]);

        $s3Client->putObject([
            'Bucket' => 'pictures',
            'Key' => 'test/test2.jpg',
            'Body' => fopen('test/test2.jpg', 'rb'),
            'ACL' => 'public-read',
        ]);

        $s3Client->putObject([
            'Bucket' => 'pictures',
            'Key' => 'test/test2.jpg',
            'Body' => fopen('test/test2.jpg', 'rb'),
            'ACL' => 'public-read',
        ]);

        $s3Client->putObject([
            'Bucket' => 'pictures',
            'Key' => 'test/test2.jpg',
            'Body' => fopen('test/test2.jpg', 'rb'),
            'ACL' => 'public-read',
        ]);

it seems to be in the folder

test/

test/

test/

test/ but if you see the screenshot it shows the

as

%2F

%2F

%2F

%2F
https://pictures2.serranoaustralia.com.au/test/test2.jpg <-- forces download of the image
https://pictures2.serranoaustralia.com.au/test%2Ftest2.jpg <-- views the image

Is there any way to prevent this behaviour? I notice it doesn't happen when I use

rclone

rclone

C

cornernote•5/1/24, 8:20 AM

its not forcing download now...

C

cornernote•5/1/24, 8:21 AM

and i just checked the

rclone

rclone

ones, they look the same in the gui .. i think everything is ok

C

cornernote•5/1/24, 8:22 AM

seems i'm good at asking for support before checking it fully myself

N

nikiv.dev•5/1/24, 10:09 AM

is there a nice ts wrapper to upload images to r2?

N

nikiv.dev•5/1/24, 10:10 AM

or something that others use and like

N

nikiv.dev•5/1/24, 10:10 AM

i want to use r2 in place of S3 but confused how to best make it work from TS

Nnikiv.dev is there a nice ts wrapper to upload images to r2?

E

Erisa•5/1/24, 10:31 AM

any S3-compatible library will work

E

Erisa•5/1/24, 10:31 AM

see e.g. https://developers.cloudflare.com/r2/examples/aws/aws-sdk-js-v3/

Cloudflare Docs

aws-sdk-js-v3 · Cloudflare R2 docs

You must generate an Access Key before getting started. All examples will utilize access_key_id and access_key_secret variables which represent the …

EErisa any S3-compatible library will work

N

nikiv.dev•5/1/24, 11:16 AM

I don't care about s3 compat tho

N

nikiv.dev•5/1/24, 11:16 AM

i am just looking for nice api to upload

base64

base64

base64

base64 images or whatever has nicest api

N

nikiv.dev•5/1/24, 11:16 AM

r2.upload(encodedImage: string)

r2.upload(encodedImage: string)

r2.upload(encodedImage: string)

r2.upload(encodedImage: string)

N

nikiv.dev•5/1/24, 11:16 AM

something like that

N

nikiv.dev•5/1/24, 11:16 AM

and i get back id i guess

N

nikiv.dev•5/1/24, 11:17 AM

not sure what best encoding for images is

C

Code•5/1/24, 11:41 AM

hiya, is there a way to use a local directory as the source for simulating an r2 bucket?

CCode hiya, is there a way to use a local directory as the source for simulating an r2...

H

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

Sort of? You can tell wrangler to dump all of the bindings into a directory, but using it requires reading a SQLite file

Original message was deleted

H

Hello, I’m Allie!•5/1/24, 11:57 AM

I don’t think Miniflare has a directory import function

H

Hello, I’m Allie!•5/1/24, 11:57 AM

Though wrangler might, come to think?

C

Code•5/1/24, 11:58 AM

i've tried using miniflare and wrangler but they both appear to use a sqlite database

CCode i've tried using miniflare and wrangler but they both appear to use a sqlite dat...

H

Hello, I’m Allie!•5/1/24, 11:58 AM

Yeah, that’s what I mean. There isn’t a way to just mount a directory, but you should be able to import a directory with wrangler/miniflare

C

Code•5/1/24, 11:59 AM

i've looked into it and i think it's no longer being worked on

C

Code•5/1/24, 11:59 AM

https://github.com/cloudflare/workers-sdk/issues/3687

GitHub

🚀 Feature Request: Ability to emulate a public R2 bucket when devel...

Describe the solution Under Wrangler 2, when running locally any files you'd upload to a "local" R2 bucket would be saved in a directory with the exact filename you gave it at upload ...

C

Code•5/1/24, 11:59 AM

hmm

C

Code•5/1/24, 12:02 PM

do you mind pointing me towards an example of either being used to like serve local files?

C

Code•5/1/24, 12:03 PM

the examples i'm finding are simply referencing copying or accessing local files like within rclone/minio

B

bun•5/1/24, 12:04 PM

i have an example that i use locally:

import { Database } from "bun:sqlite";
import p from "path";
import fs from "node:fs";
import { drizzle } from "drizzle-orm/bun-sqlite";
import { eq } from "drizzle-orm";
import * as schema from "./schema";

const blobsPath = p.join(
  p.dirname(p.dirname(import.meta.dir)),
  ".wrangler/state/v3/r2/rn-updates/blobs"
);

const basePath = p.join(
  p.dirname(p.dirname(import.meta.dir)),
  ".wrangler/state/v3/r2/miniflare-R2BucketObject"
);

const sqlitePath = fs.readdirSync(basePath).find((f) => f.endsWith(".sqlite"));

if (!sqlitePath) {
  throw new Error("SQLite file not found");
}

const file = p.join(basePath, sqlitePath);

const client = new Database(file);

console.log("Using SQLite file", file);

const db = drizzle(client, { schema });

Bun.serve({
  port: 8788,
  async fetch(request) {
    const filename = new URL(request.url).pathname.slice(1);

    console.log("Requesting", filename);

    const object = await db.query.objects
      .findMany({
        where: eq(schema.objects.key, filename),
        limit: 1,
      })
      .then((r) => r[0]);

    if (!object || !object.blobId) {
      return new Response("Not found", { status: 404 });
    }

    const file = Bun.file(p.join(blobsPath, object.blobId));

    return new Response(file, {
      headers: {
        "content-disposition": `attachment; filename="${filename}"`,
      },
    });
  },
});

import { Database } from "bun:sqlite";
import p from "path";
import fs from "node:fs";
import { drizzle } from "drizzle-orm/bun-sqlite";
import { eq } from "drizzle-orm";
import * as schema from "./schema";

const blobsPath = p.join(
  p.dirname(p.dirname(import.meta.dir)),
  ".wrangler/state/v3/r2/rn-updates/blobs"
);

const basePath = p.join(
  p.dirname(p.dirname(import.meta.dir)),
  ".wrangler/state/v3/r2/miniflare-R2BucketObject"
);

const sqlitePath = fs.readdirSync(basePath).find((f) => f.endsWith(".sqlite"));

if (!sqlitePath) {
  throw new Error("SQLite file not found");
}

const file = p.join(basePath, sqlitePath);

const client = new Database(file);

console.log("Using SQLite file", file);

const db = drizzle(client, { schema });

Bun.serve({
  port: 8788,
  async fetch(request) {
    const filename = new URL(request.url).pathname.slice(1);

    console.log("Requesting", filename);

    const object = await db.query.objects
      .findMany({
        where: eq(schema.objects.key, filename),
        limit: 1,
      })
      .then((r) => r[0]);

    if (!object || !object.blobId) {
      return new Response("Not found", { status: 404 });
    }

    const file = Bun.file(p.join(blobsPath, object.blobId));

    return new Response(file, {
      headers: {
        "content-disposition": `attachment; filename="${filename}"`,
      },
    });
  },
});

import { Database } from "bun:sqlite";
import p from "path";
import fs from "node:fs";
import { drizzle } from "drizzle-orm/bun-sqlite";
import { eq } from "drizzle-orm";
import * as schema from "./schema";

const blobsPath = p.join(
  p.dirname(p.dirname(import.meta.dir)),
  ".wrangler/state/v3/r2/rn-updates/blobs"
);

const basePath = p.join(
  p.dirname(p.dirname(import.meta.dir)),
  ".wrangler/state/v3/r2/miniflare-R2BucketObject"
);

const sqlitePath = fs.readdirSync(basePath).find((f) => f.endsWith(".sqlite"));

if (!sqlitePath) {
  throw new Error("SQLite file not found");
}

const file = p.join(basePath, sqlitePath);

const client = new Database(file);

console.log("Using SQLite file", file);

const db = drizzle(client, { schema });

Bun.serve({
  port: 8788,
  async fetch(request) {
    const filename = new URL(request.url).pathname.slice(1);

    console.log("Requesting", filename);

    const object = await db.query.objects
      .findMany({
        where: eq(schema.objects.key, filename),
        limit: 1,
      })
      .then((r) => r[0]);

    if (!object || !object.blobId) {
      return new Response("Not found", { status: 404 });
    }

    const file = Bun.file(p.join(blobsPath, object.blobId));

    return new Response(file, {
      headers: {
        "content-disposition": `attachment; filename="${filename}"`,
      },
    });
  },
});

import { Database } from "bun:sqlite";
import p from "path";
import fs from "node:fs";
import { drizzle } from "drizzle-orm/bun-sqlite";
import { eq } from "drizzle-orm";
import * as schema from "./schema";

const blobsPath = p.join(
  p.dirname(p.dirname(import.meta.dir)),
  ".wrangler/state/v3/r2/rn-updates/blobs"
);

const basePath = p.join(
  p.dirname(p.dirname(import.meta.dir)),
  ".wrangler/state/v3/r2/miniflare-R2BucketObject"
);

const sqlitePath = fs.readdirSync(basePath).find((f) => f.endsWith(".sqlite"));

if (!sqlitePath) {
  throw new Error("SQLite file not found");
}

const file = p.join(basePath, sqlitePath);

const client = new Database(file);

console.log("Using SQLite file", file);

const db = drizzle(client, { schema });

Bun.serve({
  port: 8788,
  async fetch(request) {
    const filename = new URL(request.url).pathname.slice(1);

    console.log("Requesting", filename);

    const object = await db.query.objects
      .findMany({
        where: eq(schema.objects.key, filename),
        limit: 1,
      })
      .then((r) => r[0]);

    if (!object || !object.blobId) {
      return new Response("Not found", { status: 404 });
    }

    const file = Bun.file(p.join(blobsPath, object.blobId));

    return new Response(file, {
      headers: {
        "content-disposition": `attachment; filename="${filename}"`,
      },
    });
  },
});