Is it possible to upload directly to Cloudinary using pure Javascript code?

Cloudinary offers a comprehensive Javascript plugin which is available in several formations, see: https://github.com/cloudinary/cloudinary_js#new-api as well as an Angular plugin.

Since ourJS uploading mechanism is Blueimp dependent, it also requires jQuery in order to function.

Cloudinary also allows working directly against our endpoint for all kind of operations (some require authentication and some don't), as further explained and demonstrated in the documentations.

The following JSFiddle example shows how a pure Javascript (jQuery free) uploader can be implemented in no time: http://jsfiddle.net/tocker/fpoca4c8/

Additional functionalities can be added to this uploader to achieve more advanced capabilities.

Have more questions? Submit a request

Comments

  • Avatar
    Adrian

    Hello Nadav!

    I'm getting the next error:

    {"error":{"message":"Unknown API key "}}

    I already tried inputting both the API key and the upload preset in the UI, am I supposed to put it somewhere in the code?

    Thanks in advance, this seems as easy as it gets and I really want to play around with it.

  • Avatar
    Nadav Ofir

    Hi Adrian,

    If running via the shared jsFiddle, make sure to rerun the script once providing your cloud-name.

  • Avatar
    Adrian

    Hello Nadav,

    I ran it locally and it worked, I didn't have to change a thing, I don't know what the problem was.

    Now, I have another question: I made a form with a file input, I need to do two very simple things but I can't find a direct instruction in the documentation.

    What I want my form to do is upload when the attachment is loaded and save the url property on another object I have. The submit button will push an object to my firebase and send you to a success page, but that part I have it covered.

    Here's a fiddle of my DOM:

    https://jsfiddle.net/e2bxx75c/

  • Avatar
    Nadav Ofir

    Hi Adrian, the example that is shared above does exactly that.
    It uploads the image on submission and utilizes the response.

    Note that usually we recommend to store the public ID rather than the URL to allow more flexibility in adding transformations to your delivered images.

Powered by Zendesk