Error When Trying to Upload an Image to Imgbb

Question

I'm trying to upload images to ImgBB using NodeJS and GraphQL. I have a uploadImage mutation that takes an image in the form of a data url string, and goes as follows:

import parseDataUrl from "data-uri-to-buffer";

// ...

{
  Mutation: {
    async uploadImage(_, { dataUrl }) {
      const buffer = parseDataUrl(dataUrl); // 
      
      if (buffer.byteLength > 10 * 10 ** 6)
        throw new Error("The image exceeds the maximum size of 10 MB");

      const body = new FormData();
      body.append("image", buffer);

      const result = await fetch(
        `
        {
          method: "post",
          headers: { ...body.getHeaders() },
          body
        }
      ).then<any>(result => result.json());

      if (!result.success || !result.url) {
        const msg = result.error?.message;
        throw new Error(
          `There was an error during upload${msg ? `: ${msg}` : ""}`
        );
      }
      return result.url;
    }
  }
}

body.getHeaders() contains:

{
    'content-type': 'multipart/form-data; boundary=--------------
------------656587403243047934588601'
  }

(I'm using node-fetch)

But no matter the combinations of query params, headers and body I use, I always end up getting this error:

  {
    status_code: 400,
    error: { message: 'Undefined array key "scheme"', code: 0 },
    status_txt: 'Bad Request'
  }

I can't find anything about it, do you have an idea?

Accepted Answer

There are multiple things you can do to resolve your issue.

Important thing with FormData, you need to explicitly provide a name for the image buffer if it's not already included, uploading without name API would throw the same error you have mentioned.

body.append("image", buffer, "addSomeImageName.png");

The api does not require any header explicitly so you can remove it.

{
    method: "post",
    headers: { ...body.getHeaders() }, // This can be removed.
    body
}

The logic you are using to check for the result is faulty and would always throw error even if the result is successful.

if (!result.success || !result.url) {  // Check for success flag only.
  const msg = result.error?.message;
  throw new Error(
    `There was an error during upload${msg ? `: ${msg}` : ""}`
  );
}

This is the block I tested and is working fine:

import parseDataUrl from "data-uri-to-buffer";
import fetch from 'node-fetch';
import FormData from "form-data";


async function uploadImage({
  dataUrl
}) {

  const buffer = parseDataUrl(dataUrl);

  if (buffer.byteLength > 10 * 10 ** 6)
    throw new Error("The image exceeds the maximum size of 10 MB");

  const body = new FormData();
  body.append("image", buffer, "someImageName.png");

  const result = await fetch(
    ` {
      method: "post",
      // headers: { ...body.getHeaders() },
      body
    }
  ).then(result => result.json())
  // .then(data => {
  //   console.log(data); // Working fine here too.
  // });

  console.log("-------result--------\n", result); // Result is fine.

  // Logic testing.
  console.log(result.success);
  console.log(result.url);
  console.log(!result.success);
  console.log(!result.url);
  console.log(!result.success || !result.url);


  if (!result.success || !result.url) {
    const msg = result.error ? .message;
    console.log(`There was an error during upload${msg ? `: ${msg}` : ""}`)
    // throw new Error(
    //   `There was an error during upload${msg ? `: ${msg}` : ""}`
    // );
  }

  return result.url;
}

console.log("--------------------- console result ------------------------")
console.log(uploadImage({
  dataUrl: "data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"
}));

Answer 2

One thing that seems odd to me:

const buffer = parseDataUrl(dataUrl); //

The package in the comment only offers the function dataUriToBuffer, which you are not using. Are you using parseDataUrl from jsdom? Are you using node-fetch's own implementation of FormData as supposed to according to the documentation?

Please append your question with all relevant import statements and please also share the contents of body.getHeaders().

Error When Trying to Upload an Image to Imgbb

2 Answers

Must Read

Your Answer

James H. Sterling

Error When Trying to Upload an Image to Imgbb

2 Answers

Must Read

Your Answer

Sign up or log in

Post as a guest

James H. Sterling