Images uploaded to R2 bucket using curl is broken

Developers Storage
1

I am using the following format:

curl -X PUT https://my-bucket-name.<accountid>.r2.cloudflarestorage.com/dog.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential<credential>&X-Amz-Date=<timestamp>&X-Amz-Expires=3600&X-Amz-Signature=<signature>&X-Amz-SignedHeaders=host&x-id=PutObject -F "[email protected]"

for uploading files to my r2 bucket.
the upload is success, and i can download the file as well from my bucket. But the image is broken, i opened the image in a text editor and saw some additional content added on the top of the file like the following:

--------------------------a39f8754132c4e64

Content-Disposition: form-data; name=“data”; filename=“st.jpg”

Content-Type: image/jpeg

2

That’s uploading a FormData object.

Use --data-binary @file.png instead.

3

Kian, can you please point to one of your answers in the forum where you mentioned that data should be sent as raw binary instead of appending to formdata object? I can’t seem to find it anywhere. I remember you saying that attempt to upload the whole file may fail due to size restrictions on the edge so sending them as raw or implementing transformer strem is an option

4

Workers have a memory limit of 128MB and using FormData in Workers requires that the file is buffered into memory, whereas just passing the request body straight to the put(...) method will stream it without loading it into memory.

5

Could you please assist me, @KianNH ? I am working on implementing a form element in reactjs on the front end, and I want to ensure that the handle submit function is properly configured to allow uploading of large files without hitting the 128mb limit. Thank you for your reply earlier.

async function handleSubmit(e: FormEvent<HTMLFormElement>) {
  e.preventDefault();

  const formData = new FormData();

  if (fileInputRef.current && fileInputRef.current.files) {
    const imageFile = fileInputRef.current.files[0];
    console.log("Selected file:", imageFile);
    formData.append("file", imageFile);
  }

  try {
    const response = await fetch([worker_url], {
      method: "POST",
      body: formData, // Send the FormData object as the request body
    });

    if (response.ok) {
      console.log("File uploaded successfully:", await response.json());
    } else {
      console.error("Error uploading file:", response.statusText);
    }
  } catch (error) {
    console.error("Error uploading file:", error);
  }
}