im getting error = POST https://api.cloudinary.com/v1_1/sumitsoni/image/upload 400 (Bad Request)

[Sumitsoni123]

const postData = () => {
const data = new FormData();
data.append("file", image);
data.append("upload_preset", "insta-clone");
data.append("cloud_name", "sumitsoni")
fetch("https://api.cloudinary.com/v1_1/sumitsoni/image/upload", {
method: "POST",
body: data
})
.then(res => res.json())
.then(data => {
console.log(data);
})
.catch(err => {
console.log(err);
})

}

[PixelCook]

Hey there, looks like you're missing your API key, look at this complete fetch example.

var formdata = new FormData();
formdata.append("file", fileInput.files[0], "[PROXY]");
formdata.append("upload_preset", "");
formdata.append("public_id", "");
formdata.append("api_key", "{{Username}}");

var requestOptions = {
method: 'POST',
body: formdata,
redirect: 'follow'
};

fetch("https://api.cloudinary.com/v1_1/{{cloud_name}}/image/upload", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));

[Sumitsoni123]

Here is my complete Code ....can u correct this

import React, { useState } from 'react';

export default function CreatePost() {
const [title, setTitle] = useState("");
const [body, setBody] = useState("");
const [image, setImage] = useState("");

const postDetails = () => {
    const data = new FormData()
    data.append("file", image)
    data.append("upload_preset", "insta-clone")
    data.append("cloud_name", "sumitsoni")
    data.append("api_key", "744888656888825");
    fetch("https://api.cloudinary.com/v1_1/sumitsoni/image/upload", {
        method: "post",
        body: data
    })
        .then(res => res.json())
        .then(data => {
            console.log(data)
        })
        .catch(err => {
            console.log(err)
        })
}

return (
    <div className='card input-filed'
        style={{
            maxWidth: "500px",
            margin: "26px auto",
            textAlign: "center",
            padding: "20px"
        }}
    >
        <input type="text" placeholder='title' value={title} onChange={(e) => setTitle(e.target.value)} />
        <input type="text" placeholder='body' value={body} onChange={(e) => setBody(e.target.value)} />

        <div className="file-field input-field">
            <div className="btn">
                <span>File</span>
                <input type="file" onChange={(e) => setImage(e.target.files)} />
            </div>
            <div className="file-path-wrapper">
                <input className="file-path validate" type="text" />
            </div>
        </div>

        <button className='btn waves-effect waves-light' onClick={() => postDetails()}>Create</button>
    </div>
)

}

[PixelCook]

Have a look at this sandbox. https://codesandbox.io/s/jq4wl1xjv?file=/src/index.js