Client Side Signed Upload - Upload Widget Or Not

leodeo
leodeo Member Posts: 4
edited June 2023 in Developer APIs

Hello All:

I want to enable my users to upload a profile image to cloudinary directly without it hitting my servers. I am trying to use the Upload Widget. However where do I specify the signature? My server is returning the signature. Do I also return a timestamp? The documentation is very mixed up about all this.

Once I have the signature where do I put it? The example shows the below for the widget. But this has no spot to take in a signature? I have created an upload preset for signed. However it is still is detecting it as unsigned.

var widget = window.cloudinary.createUploadWidget({

cloudName: cloudName,

uploadPreset: uploadPreset,

cropping: false,},

(error, result) => {

if (!error && result && result.event === "success") {

console.log("Done! Here is the image info: ", result.info);

document

.getElementById("uploadedimage")

.setAttribute("src", result.info.secure_url);

}

}

);

Isnt there a more straightforward way to do this?

Tagged:

Comments

  • leodeo
    leodeo Member Posts: 4

    I also tried to do a signed upload like this

    var widget = window.cloudinary.createUploadWidget({

    cloudName: cloudName,

    api_key : "522sdsdsdsds7",

    uploadSignature: data.signature,

    cropping: false,},

    (error, result) => {

    if (!error && result && result.event === "success") {

    console.log("Done! Here is the image info: ", result.info);

    document

    .getElementById("uploadedimage")

    .setAttribute("src", result.info.secure_url);

    }

    }

    );


    It gives me an error. What format does upload signature have to be in?

    How is the timestamp to be treated?

    Am just not able to get the signed upload happening

  • Cloudinary Team
    Cloudinary Team Administrator, Cloudinary Staff Posts: 172 admin

    Hi,

    Thank you for reaching out! Please follow our Manual signature generation. Taking from the document's example:

    For example, if your API secret is abcd, your API key is 1234, the Unix time now is 1315060510 and you are posting a request to upload a file from 'https://www.example.com/sample.jpg', set its Public ID as sample_image, and eagerly generate 2 images:

    Parameters to sign:

    timestamp: 1315060510
    public_id: sample_image
    eager: w_400,h_300,c_pad|w_260,h_200,c_crop

    Serialized sorted parameters in a single string:

    eager=w_400,h_300,c_pad|w_260,h_200,c_crop&public_id=sample_image&timestamp=1315060510
    String including the API secret that is used to create the SHA-1 signature:
    eager=w_400,h_300,c_pad|w_260,h_200,c_crop&public_id=sample_image&timestamp=1315060510abcd

    SHA-1 hexadecimal result:

    bfd09f95f331f558cbd1320e67aa8d488770583e
    The final request parameters for the upload POST request:

    timestamp: 1315060510

    public_id: sample_image
    api_key: 1234
    eager: w_400,h_300,c_pad|w_260,h_200,c_crop
    file: https://www.example.com/sample.jpg
    signature: bfd09f95f331f558cbd1320e67aa8d488770583e

    Let us know if you encounter any errors and need further assistance.

    Regards,
    Anthony

    Developer Support Engineer
    Cloudinary


    Join the Cloudinary Community


  • leodeo
    leodeo Member Posts: 4

    Hello all I finally got the signed uploads working and wrote a blog post about it, for those who follow it is here

    https://medium.com/@leodeo/signed-uploads-to-cloudinary-b3b30f00613d

  • Tom
    Tom Member, Cloudinary Staff Posts: 112

    Hi @leodeo ,

    Thanks for the update, glad you were able to figure it out :).

    And thanks for writing and sending us the blog too.

    Please let me know if you have any other questions or queries.

    Kind Regards,

    Thomas