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

Activity

1. PixelCook commented on Jul 27, 2022

   

   PixelCook

   on Jul 27, 2022

   More actions

   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));
2. Sumitsoni123 commented on Jul 28, 2022

   

   Sumitsoni123

   on Jul 28, 2022

   Author

   More actions

   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>
   )
   

   }
3. PixelCook commented on Jul 28, 2022

   

   PixelCook

   on Jul 28, 2022

   More actions

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

   assigned

   PixelCook

   on May 28, 2023
5. roeeba

   added

   question

   on May 28, 2023