Cf upload images / err=5455, status : 415

[wjsgywo2001]

let imageUrls = ;

for (let i = 0; i < imageBase64Array.length; i++) {
  //  https://upload.imagedelivery.net/*********fyxFHLWQ/b2dc*******************
  const uploadURL = await getUploadURL();

  if (!uploadURL) return;


  // make form data
  const formData = new FormData();

  const cleanedBase64 = imageBase64Array[i]?.base64; // it's only base64 data

  const byteCharacters = atob(cleanedBase64); // atob => custom function

  const byteNumbers = new Array(byteCharacters?.length);

  for (let i = 0; i < byteCharacters?.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }

  const byteArray = new Uint8Array(byteNumbers);
  const blob = new Blob([byteArray], {type: 'image/jpeg'});

  formData.append('file', blob, name);
  console.log('uploadURL : ', uploadURL);
  console.log('formdata : ', formData);

  // upload image
  if (uploadURL && formData) {
    const result = await fetch(uploadURL, {
      method: 'post',
      body: formData,
    });

    console.log('result : ', result);
    if (result.ok) {
      const json = await result.json();
      console.log('json : ', json);
      const imageUrl = json.result.variants[0];
      if (i == 0) imageUrls = [imageUrl];
      else imageUrls = [...imageUrls, imageUrl];
    }
  }
}

log : “cf-images”: "err=5455 “ok”: false, “status”: 415,

it’s only return 415 status in React native
is there anyone resolve this problem ???

[wjsgywo2001]

let imageUrls = ;

for (let i = 0; i < imageBase64Array.length; i++) {
  //  https://upload.imagedelivery.net/*********fyxFHLWQ/b2dc*******************
  const uploadURL = await getUploadURL();

  if (!uploadURL) return;


  // make form data
  const formData = new FormData();

  const cleanedBase64 = imageBase64Array[i]?.base64; // it's only base64 data

  const byteCharacters = atob(cleanedBase64); // atob => custom function

  const byteNumbers = new Array(byteCharacters?.length);

  for (let i = 0; i < byteCharacters?.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
  }

  const byteArray = new Uint8Array(byteNumbers);
  const blob = new Blob([byteArray], {type: 'image/jpeg'});

  formData.append('file', blob, name);
  console.log('uploadURL : ', uploadURL);
  console.log('formdata : ', formData);

  // upload image
  if (uploadURL && formData) {
    const result = await fetch(uploadURL, {
      method: 'post',
      body: formData,
    });

    console.log('result : ', result);
    if (result.ok) {
      const json = await result.json();
      console.log('json : ', json);
      const imageUrl = json.result.variants[0];
      if (i == 0) imageUrls = [imageUrl];
      else imageUrls = [...imageUrls, imageUrl];
    }
  }
}

log “cf-images”: "err=5455 “ok”: false, “status”: 415,

it’s only return 415 status in React native
is there anyone resolve this problem ???

1. List item

[asemiglazov]

Most likely it’s missing boundary, e.g. FormData request header doesn't include boundary · Issue #4631 · axios/axios · GitHub