'How to upload local files to IMGBB with base64 string with axios js

I've tried the imgbb-uploader npm package but I only got it to work with other image URLs and not local files.

axios
  .post("https://api.imgbb.com/1/upload", {
  image: BASE_64_STRING,
  name: file.name,
  key:  process.env.MY_API_KEY,
})
   .then((res) => console.log(res))
   .catch((err) => console.log(err));```


Solution 1:[1]

What about this:

// fileinput is the file/index 0 from input-type-file eg: e.target.myfileinput.files[0]
const uploadImg = ( fileinput ) => {

     const formData = new FormData();
     formData.append( "image", fileinput ); // has to be named 'image'!

     let apiresponse = axios.post( 'https://api.imgbb.com/1/upload?key=your-api-key', formData )
       .then( res => { return res.data } )
       .catch( error => { return null } )

    return apiresponse;
}

Solution 2:[2]

//From graph ql perspective


const { createReadStream, filename } = await file;
const url = "<URL_TO_IMAGE_SERVER&key=<YOUR_API_KEY>";

const stream = createReadStream();

const form = new FormData();
form.append("image", stream, filename);

try {
  const response = await axios.post(url, form, {
    headers: { ...form.getHeaders() },
  });
  console.log({ response });
  return { Location: response.data.display_url };
} catch (error) {
  return { ...error };
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Marrix
Solution 2 cvakiitho