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