Cloudinary offers a comprehensive and powerful JavaScript plugin but also allows working directly against API endpoints for all kinds of operations as explained in our documentation.
The CodeSandbox below shows how to perform a basic upload to Cloudinary using pure JavaScript code:
Additional functionalities can be added to this uploader to achieve more advanced capabilities as per our documentation.
Comments
14 comments
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.
Hi Adrian,
If running via the shared jsFiddle, make sure to rerun the script once providing your cloud-name.
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/
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.
Hey, I'd like to make it work in a signed way but I keep getting this error:
Response for preflight is invalid.
In your snippet, I replaced this line:
xhr.send(new FormData(formElement));
by:
var formData = new FormData();
formData.append("timestamp", xxx);
formData.append("signature", xxx);
formData.append("api_key", xxx);
xhr.send(formData);
(I get the timestamp + signature + api_key from a previous ajax call to my server)
Please see the following example of how to upload using pure javascript:
https://jsfiddle.net/tocker/fpoca4c8/
While it uses unsigned uploads, the same principle can be implemented with signed uploads too by passing the relevant parameters.
Please let us know if this helps?
I'm sorry but it doesn't work for me (it only works in unsigned mode).
How do I pass the parameters? What's wrong with my code?
Thanks for your response, Jerome.
Here's a working example, based on the previous example, but this time of signed uploads (demonstrated with PHP):
https://gist.github.com/taragano/a000965b1514befbaa03a24e32efdfe5
Please let me know if it works for you?
Is not possible send assigned files directly from my Browser?
Need I use backend in PHP/JAva/NodeJS?
Hi,
In order to perform signed upload from clinet side - you need to generate the signature on your backend, and then perform the upload with this signature.
Please let me know if it works for you?
Hi, I was trying to create the call in a different way with jquery
var settings = {
"async": true,
"crossDomain": true,
"url": "https://api.cloudinary.com/v1_1/<cloud name>/image/upload",
"method": "POST",data:{"upload_preset":"xcc2qerf", "file":"data:image/png;base64, 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"},
"headers": {
"cache-control": "no-cache",
}
}
$.ajax(settings).done(function (response) {
console.log(response);
});
This is returning {"error":{"message":"Unsupported source URL: data:image/png;base64, .... and if I do instead
var settings = {
"async": true,
"crossDomain": true,
"url": "https://api.cloudinary.com/v1_1/<cloud name>/image/upload",
"method": "POST",data:{"upload_preset":"xcc2qerf", "file":"data%3Aimage%2Fpng%3Bbase64%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%3D"},
"headers": {
"cache-control": "no-cache",
}
}
$.ajax(settings).done(function (response) {
console.log(response);
});
I get {"error":{"message":"public_id (anonymous/data_3Aimage_2Fpng_3Bbase64_2C... I do not understand what I am doing wrong
Hi ,
Could you please try this code:
var form = new FormData();
form.append("file", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...........");
form.append("upload_preset", "xcc2qerf");
var settings = {
"async": true,
"crossDomain": true,
"url": "https://api.cloudinary.com/v1_1/<cloud_name>/image/upload",
"method": "POST",
"headers": {
"Cache-Control": "no-cache",
},
"processData": false,
"contentType": false,
"mimeType": "multipart/form-data",
"data": form
}
$.ajax(settings).done(function (response) {
console.log(response);
});
Please let me know if it works for you.
Thanks,
Yakir
Goals. All accomplished in a progressive web app, not native app.
- User takes picture with device camera which is stored locally.
- User initiates sending image to Cloudinary via javascript
- Using your eager_notification_url, we are notified at our server after transformation is complete so we can do further processing as necessary. Able include tags and context parameters.
Is this possible with javascript? It seemed the eager_notification_url was not an option with signed or unsigned javascript implementations. I would really like this positive experience for the user and separate notification at our server.
Examples truly appreciated in your response.
Hi Troy,
You can set the eager notification URL via an upload preset, under 'Eager Notification URL'.
Please sign in to leave a comment.