Unable to post image to imgur api with axios.post

I'm posting an image to imgur, via their API. This is a ReactJS app on TS.

Here base64 is base64 string of the image, usually between 50 to 100kb

const imgurApi = axios.create({
  headers: {
    'Authorization': 'Client-ID xxx'
  }
})

export async function postImgurImage(base64: string, username: string, desc: string) {
  try {
    const data = {
      "image": base64,
      "title": username,
      "description": desc
    }
    const res = await imgurApi.post('https://api.imgur.com/3/image', data)
    if (res.status === 200) {
      console.log(res.data);
      return res.data
    } else {
      return `Error: ${res.statusText}`
    }
  } catch (err) {
    console.log(err);
    return err
  }
}

This works on postman, but when I try this on the browser, I get this error

Error: Request failed with status code 429
at createError (createError.js:16)
at settle (settle.js:17)
at XMLHttpRequest.handleLoad (xhr.js:62)

EDIT 1

This is how the postImgurImage is being called.

const handleImg = (e: React.ChangeEvent < HTMLInputElement > ) => {
  e.preventDefault();
  if (e.target.files !== null) {
    let reader = new FileReader();
    let file = e.target.files[0];
    reader.onloadend = () => {
      setPostImgPreview(reader.result ? .toString())
    }
    reader.readAsDataURL(file);
  }

}

const handlePost = (e: React.MouseEvent < HTMLButtonElement, MouseEvent > ) => {

  e.preventDefault();
  const postNameVal = postname.current ? .value
  const postContentVal = postcontent.current ? .value


  if (postNameVal && postContentVal && postImgPreview) {
    const base64 = postImgPreview.split(',')[1];

    postImgurImage(base64, currentUser ? .username ? ? '', postContentVal).then(data => {
      console.log(data);
    })
  }
}

<input type="file" name="post-image" id="post-image" accept="image/x-png,image/jpeg" onChange={e=> handleImg(e)} />

<button className="post-button" onClick={handlePost}>Post</button>

Recommended topics

Hot tags