I'm trying to construct a simple Cloudinary image upload based on this codepen example: --

I've converted it to work with fetch but even though I've gone to my Cloudinary settings and created an unsigned upload preset, which I'm providing to the headers, I'm still getting an error

POST 400 (Bad Request)

with the error message

Upload preset must be specified when using unsigned upload

The code I'm using is the following

_callCloudinaryApi(file, method = 'post') {

    const config = {
      method
    }

    const cloudName = "myproject" // fictional project name here
    const unsignedUploadPreset = "mypreset" // fictional preset name here
    const url = `/${cloudName}/upload`;


    const fd = new FormData();
    fd.append('upload_preset', unsignedUploadPreset);
    fd.append('tags', 'browser_upload'); // Optional - add tag for image admin in Cloudinary
    fd.append('file', file);


    if (method !== 'get') {
      config.headers = {}
      config.headers['X-Requested-With'] = 'XMLHttpRequest'
    }

    return fetch(url, config)
      .then(res => res.json())
      .then(res => {
       console.log(res)
        return res;
      })
  }

Can anyone help me to determine what the problem might be? Thanks very much!

I'm trying to construct a simple Cloudinary image upload based on this codepen example: https://codepen.io/team/Cloudinary/pen/QgpyOK --

I've converted it to work with fetch but even though I've gone to my Cloudinary settings and created an unsigned upload preset, which I'm providing to the headers, I'm still getting an error

POST https://api.cloudinary./v1_1/myproject/upload 400 (Bad Request)

with the error message

Upload preset must be specified when using unsigned upload

The code I'm using is the following

_callCloudinaryApi(file, method = 'post') {

    const config = {
      method
    }

    const cloudName = "myproject" // fictional project name here
    const unsignedUploadPreset = "mypreset" // fictional preset name here
    const url = `https://api.cloudinary./v1_1/${cloudName}/upload`;


    const fd = new FormData();
    fd.append('upload_preset', unsignedUploadPreset);
    fd.append('tags', 'browser_upload'); // Optional - add tag for image admin in Cloudinary
    fd.append('file', file);


    if (method !== 'get') {
      config.headers = {}
      config.headers['X-Requested-With'] = 'XMLHttpRequest'
    }

    return fetch(url, config)
      .then(res => res.json())
      .then(res => {
       console.log(res)
        return res;
      })
  }

Can anyone help me to determine what the problem might be? Thanks very much!

• javascript
• reactjs
• fetch-api
• cloudinary

3 Answers 3

You can try something like the following-

    var data = new FormData();
    data.append('upload_preset', '<upload_preset>');
    data.append('file', file);
    data.append('cloud_name', '<cloud_name>');

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

   var imgurl = "https://api.cloudinary./v1_1/<cloud_name>/image/upload";

   fetch(imgurl, config)
    .then(responseData => {
              console.log(JSON.stringify(responseData, null, 4));
    })

I had this error too, going to https://cloudinary./console/settings/upload, you do have an Upload presets there, be sure that there is one with a Signing Mode turned to Unsigned.

It's maybe not the best thing to do in terms of security (better way will be to get authenticated I guess).

I found the clue about the 400 error with the Devtools network tab btw.

I encountered the same issue, hope this solution helps others

uploadFile = async (e) => {
    const files = e.target.files;
    const data = new FormData();
    data.append('file', files[0]);
    data.append('upload_preset', 'PRESET_NAME');
    const res = await fetch('https://api.cloudinary./v1_1/{YOUR_ACOUNT_USER}/image/upload', {
      method: 'POST',
      body: data
    });
    const file = await res.json();
    console.log(file);
    this.setState({
      image: file.secure_url
    })
  }