Cloudflare Developers•4mo ago

Image upload and transformation on r2 how

Hello guys , I am running a service to upload images from up to 10 mb to a cloudflare r2 storage bucket . I am using spring boot with aws s3 sdk to do the same . But These large image files are making my webserver slow and increasing upload times , also these raw untransformed images are very slow for users to load (60mb total to load my website home page ):
I want to allow users to use preassigned url to upload directly from client side and then use workers to transform the image some how , but i dont know how to do so please help .

2 Replies

SuperHelpflare•4mo ago

Support AI

I'd be happy to help you with that. It seems like you're experiencing performance issues with large image uploads and slow load times on your website. To address this, you can leverage Cloudflare's features to optimize image uploads and delivery. To allow users to upload images directly from the client-side using a preassigned URL, you can use Cloudflare's Direct Creator Upload feature. This allows you to generate a one-time token that can be used to upload images directly to your Cloudflare R2 bucket. To transform the images using Cloudflare Workers, you can use the Images API to resize, optimize, and transform the images. You can create a Worker that listens for uploads to your R2 bucket and then transforms the images using the Images API. Here's a high-level overview of the steps you can take: 1. Set up Direct Creator Upload for your Cloudflare R2 bucket. This will generate a one-time token that you can use to upload images directly from the client-side. 2. Create a Cloudflare Worker that listens for uploads to your R2 bucket. You can use the fetch event to capture the upload request and then use the Images API to transform the image. 3. Use the Images API to resize, optimize, and transform the image. You can specify the desired transformations, such as resizing, cropping, and formatting, using the Images API. 4. Store the transformed image in your R2 bucket. Here's some sample code to get you started:

// Create a Worker that listens for uploads to your R2 bucket
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  // Get the upload request
  const uploadRequest = request.clone()
  const uploadUrl = new URL(request.url)
  const bucketName = 'your-bucket-name'
  const objectKey = uploadUrl.pathname.split('/').pop()

  // Use the Images API to transform the image
  const imageResponse = await fetch(`https://api.cloudflare.com/client/v4/accounts/${accountId}/images/v1/${bucketName}/${objectKey}`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      'resize': {
        'width': 800,
        'height': 600
      },
      'format': 'webp'
    })
  })

  // Store the transformed image in your R2 bucket
  const transformedImage = await imageResponse.json()
  const r2 = new R2({
    accountId: accountId,
    apiKey: apiKey
  })
  await r2.put(objectKey, transformedImage.body)
  return new Response('Image uploaded and transformed successfully!', { status: 201 })
}

// Create a Worker that listens for uploads to your R2 bucket
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  // Get the upload request
  const uploadRequest = request.clone()
  const uploadUrl = new URL(request.url)
  const bucketName = 'your-bucket-name'
  const objectKey = uploadUrl.pathname.split('/').pop()

  // Use the Images API to transform the image
  const imageResponse = await fetch(`https://api.cloudflare.com/client/v4/accounts/${accountId}/images/v1/${bucketName}/${objectKey}`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${apiKey}`
    },
    body: JSON.stringify({
      'resize': {
        'width': 800,
        'height': 600
      },
      'format': 'webp'
    })
  })

  // Store the transformed image in your R2 bucket
  const transformedImage = await imageResponse.json()
  const r2 = new R2({
    accountId: accountId,
    apiKey: apiKey
  })
  await r2.put(objectKey, transformedImage.body)
  return new Response('Image uploaded and transformed successfully!', { status: 201 })
}

Note that this is just a sample code snippet, and you'll need to modify it to fit your specific use case. You'll also need to replace the placeholders (your-bucket-name, accountId, and apiKey) with your actual Cloudflare account information. I hope this helps you get started with optimizing your image uploads and delivery using Cloudflare!

Sources

* Optimizing image delivery with Cloudflare image resizing and R2 - Cloudflare Reference Architecture docs * Transform user-uploaded images before uploading to R2 - Cloudflare Images docs * Overview - Cloudflare Images docs

This is an AI generated response, it may not be 100% accurate. Please validate the output. You can ask followups by replying to this message or mentioning me.

SuperHelpflare•4mo ago

Please do not post your question in multiple channels/post it multiple times per the rules at #😃welcome-and-rules. It creates confusion for people trying to help you and doesn't get your issue or question solved any faster.

Gaming

Programming

Image upload and transformation on r2 how

Did you find this page helpful?