Documentation on Direct Browser Upload Without jQuery?

Brad

July 16, 2020 20:43

Hello,

I'd like to upload images directly from the browser to Cloudinary, and I'm working on having a Node.js server that only generates a signature for the browser request to Cloudinary to use.

However, the documentation doesn't really spell out what should be in the params_to_sign that the server receives, or really just the process in general.

Has anyone successfully setup signed uploads directly from the browser without using the jQuery solution? Nowadays jQuery is rather frowned upon and I'd rather just use plain JavaScript.

Thanks!

0

• 

  Loic Verger Del Bove

  July 17, 2020 14:19

  Hi Brad,

  Based on https://cloudinary.com/documentation/upload_widget#signed_uploads, you can find an example of a signed upload using the Upload Widget here :

  https://codesandbox.io/s/keen-cray-4pfuu?file=/src/index.js
  

  To test it, you can add your credentials on the index.js starting Line 11 and your signed upload_preset to line 4 of the script.js.

  The sample project uses the 'string' method by adding all the parameters used to a string 'params_to_sign' :

  var params_to_sign = "source=" + source + "&timestamp=" + timeStamp + "&upload_preset=" + uploadPreset;
  

  and you can generate a sha1 signature by using the following piece of code :

  var sha1 = crypto.createHash("sha1");
  sha1.update(params_to_sign + cloudinary.config("api_secret"));
  var signature_sha = sha1.digest("hex");
  

  You can use also the api_sign_request of our SDK that will generate the signature automatically by passing the 'params_to_sign' not as a string but as an object :

  var params_to_sign = {
      source: source,
      timestamp: timeStamp,
      upload_preset: uploadPreset
  };
  

  and you can generate the same signature like this :

  var signature_sha = cloudinary.utils.api_sign_request(params_to_sign,cloudinary.config("api_secret"));
  

  If you add any parameters to the upload widget, you will have to add this value in the 'params_to_sign' term.

  You can also get more informations on the following link: https://cloudinary.com/documentation/upload_images#generating_authentication_signatures.

  Best regards,
  Loic

  NB: you may need to sign up to codesandbox.io as the project use a container not supported by codesandbox template

  0

Post is closed for comments.