Comments

7 comments

  • Avatar
    Chris Hill

    I've been able to get angular working with signed upload. You will need a server to connect to, and on the server you will need to generate a signed upload request. This upload request is itself signed by the server using the server's secret so it cannot be forged. You will need to define your options such as transformations and presets and pass these to the signing request. This signed request can then be sent to Cloudinary using the Angular cloudinary library's 'cloudinary_fileupload' widget.

    To break it down.

    1. Angular controller/service requests a signed upload request from your server with preset and option info.
    2. Server returns a signed request that cannot be forged by your client.
    3. Angular controller gets the upload request.
    4. Inject the form data from your request into the $(".cloudinary_fileupload") object.
    5. Optionally listen to the 'cloudinaryprogress' and 'cloudinarydone' events from the cloudinary_fileupload object in your form.
    6. Submit this form data by calling submit() on the html form that contains the cloudinary_fileupload widget.
    7. In your 'cloudinarydone' listener you should be able to do something with the data returned from cloudinary, possibly saving it to your database or something.

    There are quite a few pitfalls in this process due to the steps. But it does work. If you're familiar with how things like Facebook's 3rd party authentication works its similar.

    Hope this helps!

    1
    Comment actions Permalink
  • Avatar
    Marcos

    Thanks, it' helped, we stared doing it in a very similar way.

     

    0
    Comment actions Permalink
  • Avatar
    Pratik Upacharya

    Hi Chris Hill, 

    Do you have any working example of this for Nodejs as a backend or Java as a backend and Angular as a frontend? 

    0
    Comment actions Permalink
  • Avatar
    Chris Hill

    Hi Pratik, sorry, my backend is Python.

    0
    Comment actions Permalink
  • Avatar
    Raya Straus

    Hey Pratik,

    While we don't have a code sample these are the guidelines that should be followed-

    Do you want to create the signature by yourself? If that's the case, you'll have to follow the instructions in this page -
    http://cloudinary.com/documentation/upload_images#creating_api_authentication_signatures
    (as it depends on the specific parameters you wish to include).
    Otherwise, you can use the following KB in order to create the signature using our API - 
    https://support.cloudinary.com/hc/en-us/articles/203817991-How-to-generate-a-Cloudinary-signature-on-my-own-

    For example in Node-

    var apiSecret = 'your-api-secret';
    // grab a current UNIX timestamp
    var millisecondsToSeconds = 1000;
    var timestamp = Math.round(Date.now() / millisecondsToSeconds);
    // generate the signature using the current timestmap and any other desired Cloudinary params
    var signature = Cloudinary.utils.api_sign_request({ timestamp: timestamp }, apiSecret);
    // craft a signature payload to send to the client (timestamp and signature required, api_key either sent here or stored on client)
    var payload = {
      signature: signature,
      timestamp: timestamp
    };
    // return payload to client

     

     

     

     

     

     

    0
    Comment actions Permalink
  • Avatar
    Pratik Upacharya

    Hi Raya Straus, 

     

    Thanks for your help. I would like to know one more thing regarding this private content access feature of Cloudinary. 

    Let's say I am uploading an image from client side by generating Signed URL and upload is successful. 

    Now if I want to access that private content, what will the procedure? Do I need to generate a token or signature? How can I access that private content? 

    0
    Comment actions Permalink
  • Avatar
    Raya Straus

    Hi Pratik,

    The access type of the uploaded image is not derived from the upload method. To upload an image as private please add type private to the upload process. Please take a look at the following for more information- https://cloudinary.com/documentation/image_transformations#control_access_to_images 

    0
    Comment actions Permalink

Please sign in to leave a comment.