Cloudflare Developers•10mo ago

R2 binding questions

Hello, first off just want to say I'm very new to CF and web development in genrl. What I'm doing: I'm working on a project and trying to understand the R2 function binding on CF pages, so I made a small hello world page project to try and load a image from R2 on page load. So I can have a bucket of a lot of images and just have the key for the image on the html and load it in when the page is loaded on a users browser. side note* is this a good setup for speed? can images get cached this way? Problem/question: I'm running in to problems with loading the image from R2 I'm using some boiler plate code from cloudflare developer documentation site on pages R2 bindings. my code and error messages pics are at the bottom. I tried to just remove the "context.env." and just use "MEDIA_DB.get()". but got error saying: "Uncaught (in promise) ReferenceError: MEDIA_DB is not defined"
I have made a binding to the bucket in the page project to MEDIA_DB. *(I understand the env variable can somehow be used for specifying different context of deployment like sandbox or production etc. but I don't know how to use the property or if it can be removed...(any good place to read up on this, not theory of it but application of the code of env property?)) lmk if you need any more info to help me out 🙂

3 Replies

Corsix👾OP•10mo ago

My code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Hello, world!</title>
</head>
<body onload = "fetchImage()" >
    <h1>Hello, world!</h1>
    <div id="image-container"></div>
 
<script>
    async function onRequest(context) {
        const obj = await context.env.MEDIA_DB.get('test_1/try1.jpg');
        if (obj === null) {
            return new Response('Not found', { status: 404 });
        }
        return new Response(obj.body);
    }
    function fetchImage() { 
        const imageUrl = URL.createObjectURL(onRequest());
        const imageElement = document.createElement("img");
        imageElement.src = imageUrl;
        const container = document.getElementById("image-container");
        container.appendChild(imageElement);
    }
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Hello, world!</title>
</head>
<body onload = "fetchImage()" >
    <h1>Hello, world!</h1>
    <div id="image-container"></div>
 
<script>
    async function onRequest(context) {
        const obj = await context.env.MEDIA_DB.get('test_1/try1.jpg');
        if (obj === null) {
            return new Response('Not found', { status: 404 });
        }
        return new Response(obj.body);
    }
    function fetchImage() { 
        const imageUrl = URL.createObjectURL(onRequest());
        const imageElement = document.createElement("img");
        imageElement.src = imageUrl;
        const container = document.getElementById("image-container");
        container.appendChild(imageElement);
    }
</script>
</body>
</html>

Chaika•10mo ago

That looks like you're confusing server-side and local code and that editor looks like the Worker Editor If you're just making a basic static site, just upload the images along with your html. It'll be faster then R2, versioned, etc.

Chaika•10mo ago

If you want to use Functions, there's a getting started guide here: https://developers.cloudflare.com/pages/functions/get-started/

Cloudflare Docs

Functions - Get started · Cloudflare Pages docs

This guide will instruct you on creating and deploying a Pages Function.

Gaming

Programming

R2 binding questions