Hello, Just need some help to setup the custom domain in a R2 bucket, but when I put the subdomain,

../BrunoXing.sh Hello, Just need some help to setup the custom domain in a R2 bucket, but when I...

C

Chaika•4/30/24, 11:46 PM

What's the custom domain you're trying to add? By chance, are you Enterprise with Zone lockdown enabled (you'll need to disable it for a bit to add an r2 custom domain)?

S

suebersson•5/1/24, 3:05 AM

Hi, I would like help with making HTTP > POST requests to upload images to an R2 bucket, but my experience has been terrible and frustrating, I can't find anywhere, not even in the documentation, how to make a request that works

The request will be made in dart

No exact reference, nothing works:

https://developers.cloudflare.com/api/#cloudflare-images-upload-an-image-using-a-single-http-request

https://developers.cloudflare.com/api/operations/cloudflare-images-upload-an-image-via-url

https://developers.cloudflare.com/images/upload-images/upload-url/

Cloudflare API Documentation

Interact with Cloudflare's products and services via the Cloudflare API

Cloudflare Docs

Upload via URL · Cloudflare Image Optimization docs

Before you upload an image, check the list of supported formats and dimensions to confirm your image will be accepted.

Cloudflare API Documentation

Interact with Cloudflare's products and services via the Cloudflare API

CChaika What's the custom domain you're trying to add? By chance, are you Enterprise wit...

.

./BrunoXing.shOP•5/1/24, 7:35 AM

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

The CNAME itself is getting correct on the DNS panel, but when I check it on the bucket settings, always says status Unknown, generating the CNAME error when I try to access the custom domain

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

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

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}"`,
      },
    });
  },
});