Cloudinary image upload from React: am including Cloudinary unsigned preset but get "Upload preset must be specified when using unsigned upload"

Question

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.com/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.com/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!

score 3 · Answer 1 · answered Aug 01 '18 at 12:52

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.com/v1_1/<cloud_name>/image/upload";

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

answered Aug 01 '18 at 12:52

Matt Greene

424
2
3

2

Thanks but that didn't work either -- still getting the same `400` error. I even created a new preset but no dice. I've gone to my Cloudinary settings, have `Unsigned uploading enabled` and have `unsigned` presets, which I'm using. I tried an online example in which you enter your preset and it also didn't work. Is there a waiting period of some kind before you can upload? I created the account today. – Cerulean Aug 01 '18 at 13:08

score 0 · Answer 2 · answered Nov 09 '18 at 10:57

I had this error too, going to https://cloudinary.com/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.

score 0 · Answer 3 · answered Jan 05 '20 at 12:58

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.com/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
    })
  }

Cloudinary image upload from React: am including Cloudinary unsigned preset but get "Upload preset must be specified when using unsigned upload"

3 Answers3

Linked