I need help downloading image from R2 object

I see Cloudflare is introducing R2 as S3 bucket, I created an R2 bucket and upload an image to it for testing purpose, then I bind it to a Worker. However, I was not able to download the image, any help here would be much appreciated. I used the same code as the example from here:

addEventListener("fetch", (event) => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const url = new URL(request.url);
  const key = url.pathname.slice(1);

  switch (request.method) {
    case "PUT":
      await MY_BUCKET.put(key, request.body);
      return new Response(`Put ${key} successfully!`);
    case "GET":
      const object = await MY_BUCKET.get(key);

      if (!object) {
        return new Response("Object Not Found", { status: 404 });
      }

      return new Response(object.body);
    case "DELETE":
      await MY_BUCKET.delete(key);
      return new Response("Deleted!", { status: 200 });

    default:
      return new Response("Route Not Found.", { status: 404 });
  }
}

My worker endpoint would look like this: https://test.MY-NAME-SPACE.workers.dev, I replaced my worker’s name space here.

I would like to view the image from a web browser or download it with pure JavaScript. Something like this:

<!DOCTYPE html>
<html>

<head>
      <title>Download image from Cloudflare R2 with JavaScript</title>
</head>

<body>
      <button onclick="download()">
            Download Image
      </button>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js">
      </script>
      <script>
            function download() {
                  axios({
                        url: 'https://test.MY-NAME-SPACE.workers.dev/image.jpg',
                        method: 'GET',
                        responseType: 'blob'
                  })
                        .then((response) => {
                              const url = window.URL
                                    .createObjectURL(new Blob([response.data]));
                              const link = document.createElement('a');
                              link.href = url;
                              link.setAttribute('download', 'image.jpg');
                              document.body.appendChild(link);
                              link.click();
                              document.body.removeChild(link);
                        })
            }

      </script>
</body>

</html>

What happens when you try to access the image at https://test.MY-NAME-SPACE.workers.dev/image.jpg? Do you hit a 404? Object not found? Have you verified the image exists in your R2 bucket via the dashboard UI or similar?

hello @cherryjimbo , thank you so much for your response. Well, I got nothing when I was trying to access the image at https://test.MY-NAME-SPACE.workers.dev/image.jpg. I got http code 200 but the content-length is 0. I did verify the image exists in my R3 bucket from the dashboard UI. You can see attached screenshot for reference.

The Workers Preview UI uses an older and internal version of the R2 bindings that aren’t documented.

What happens if you switch to a workers.dev zone or your own domain via wrangler?

3 Likes

oh that was helpful, it turns out to be binding compatibility issue. Problem resolved after I updated the compatibility flag. Thank you very much @cherryjimbo , I really appreciate your answer.

This topic was automatically closed 3 days after the last reply. New replies are no longer allowed.