My submit function responds with Bad Gateway 502

Question

I am trying to set up "Cloudinary" for image uploads from my React app.

My submit function keeps responding with: "Bad Gateway 502" and "SyntaxError: Unexpected end of input".

I'm assuming something is wrong with my headers, but I can't find the issue...

handleFileSelect = (e) => {
    this.formValid()
      this.setState({
        picture: e.target.files[0] })
  }




submit(){

    const CLOUDINARY_URL= 
    "https://api.cloudinary.com/v1_1/dvz27u2gu/image/upload"
    const CLOUDINARY_UPLOAD_PRESET= "jshvp3nh"
    

        const obj = Object.assign({}, this.state);
        const formData = new FormData();
        formData.append("file", obj.picture);
        formData.append("upload_preset", CLOUDINARY_UPLOAD_PRESET); 

        fetch(CLOUDINARY_URL,{ 
          mode: 'no-cors',
          method:'post',
          headers: { "Content-Type": "application/x-www-form-urlencoded"}, 
          body:formData,
        })
        .then((res)=>{return res.json()})
        .then(data=>console.log(data))
        .catch(err=>console.log(err));
}

I might be an issue on their side: https://support.cloudinary.com/hc/en-us/community/posts/201149862-Upload-docx-file — Benjamin, Feb 11 '19 at 19:13
That specific issue was resolved four years ago, so if it's a server-side issue, it's probably not exactly the same — Igy, Feb 12 '19 at 11:55

score 0 · Answer 1 · answered Feb 12 '19 at 13:54

You can try something like the following:

<div><input type="file" onChange={this.submit}/></div>


submit = (e) => {

    var file = e.target.files[0];
    var data = new FormData();
    data.append('upload_preset', 'jshvp3nh');
    data.append('file', file);
    data.append('cloud_name', 'dvz27u2gu');

    const config = {
        method: "POST",
        body: data 
      };

     var imgurl = "https://api.cloudinary.com/v1_1/dvz27u2gu/raw/upload";
     fetch(imgurl, config)
        .then(responseData => {
           console.log('here');
           console.log(JSON.stringify(responseData, null, 4));
           console.log(responseData);
         })}

Thanks for the help, I solved the issue, there was a problem with my headers and I wasn't setting up the credentials to cloudinary as I should. — Boris Aronson, Feb 13 '19 at 07:21

score 0 · Answer 2 · answered Feb 13 '19 at 07:23

This is how it worked for me.

    const CLOUDINARY_URL= "https://api.cloudinary.com/v1_1/dvz27u2gu/image/upload"
    const CLOUDINARY_UPLOAD_PRESET= "jshvp3nh"

        const obj = Object.assign({}, this.state);

        const formData = new FormData();
        formData.append("file", obj.picture);
        formData.append("api_key", "xx")
        formData.append("api_secret", "xx")
        formData.append("upload_preset", CLOUDINARY_UPLOAD_PRESET); 
        formData.append("timestamp", (Date.now() / 1000) | 0);


        fetch(CLOUDINARY_URL,{
            method:'POST',
            body: formData,
            
        })
        .then((res)=>{return res.json()})
        .then((data)=>{
            obj.img_url_cloudinary=data.secure_url; 
            this.sendForm(obj);
        }).catch(err=>console.log(err));;

My submit function responds with Bad Gateway 502

2 Answers2