Upload preset must be specified when using unsigned upload. Even when sending a signed request.

Comments

3 comments

  • Avatar
    Aleksandar Kostadinov

    Hi Anas,

    I've checked the logs on our side and I see that we are not receiving any of the data you are trying to POST to Cloudinary as part of your Upload API call. When we don't receive a "signature" or "upload_preset" (unsigned) parameter then you will receive the error you ran into.

    May I please ask you to replace the following code:

      const uploadImage = async (file) => {
    const signature = await getSignature();
    const res = await axios.post(endPoints.uploadEndpoint, {
    data: {
    apiKey: baseConfig.apiKey,
    timestamp: baseConfig.timestamp,
    file,
    signature,
    },
    });
    return res;
    };

    With the following:

      const uploadImage = async (file) => {
    const signature = await getSignature();

    const data = new FormData();
    data.append("api_key", baseConfig.apiKey);
    data.append("timestamp", baseConfig.timestamp);
    data.append("file", file);
    data.append("signature", signature);

    const res = await axios.post(endPoints.uploadEndpoint, data);
    return res;
    };

    The above would take the same parameters you are currently sending and just add them as FormData parameters and then we pass that FormData object (data) as the POST params that Axios will use.

    Please try this out and let me know how it goes.

    0
    Comment actions Permalink
  • Avatar
    Anas

    Hi Aleksandar,

    Thank you so much. This worked, I just had to do one extra thing. I also included one of the signed uploads presets to get the signature from the back-end. Then I used the same upload preset to upload an image on Cloudinary. I can do signed uploads. In my opinion, I think the documentation for Cloudinary service can be improved.

    Also, I don't wanna take up any of your time so please feel no obligation to reply to this, why did FormData work? Because as far as I understand, when we use data key with Axios, it sends it in the body?

    0
    Comment actions Permalink
  • Avatar
    Aleksandar Kostadinov

    Hi Anas,

    You're welcome. Glad that worked for you.

    The most likely reason is that the previous 'data' parameter contained some params as key/val pairs while "file" and "signature" are just the values. The default Content-Type of Axios is application/json I believe and those "file" and "signature" values may have been skipped/ignored because there's no key for them. FormData worked since it will pass the keys and values and automatically set the Content-Type to "multipart/form-data".

    You could try your old code but add the "key" for "file" and "signature" and the same values and see if those requests work. E.g.

          data: {
    api_key: baseConfig.apiKey,
    timestamp: baseConfig.timestamp,
    file: file,
    signature: signature,
    }

    Let me know if that works?

    0
    Comment actions Permalink

Please sign in to leave a comment.