I have a very large site on WIX and have ~10 photo and pdf images stored on Cloudinary. All is working fine. I need to allow my website visitors to upload photos into a staging area on Cloudinary. Cloudinary automatically sends me email when somone uploads an image.
I am trying to implement their image_upload java script behind a button on my Wix Site:
https://jds-cvoa.wixsite.com/cvoa/the-photo-gallery
I created a button event and pasted their code in place but I am seeing errors?
If I paste this code into a regular html page on my old external website and then link the button there, the uploader invokes and works fine. I am replacing my old site with this wix site.
Hey,
You can’t embed HTML in a Wix Code page. You might want to consider using an HtmlComponent . For more information, see the article Working with the HTML Component in Wix Code .
A more secure way to handle web service requests is by using backend (server-side) code. Using backend code you can secure your passwords, API keys, and other secret information. The article Accessing 3rd Party Services explains how this is done.
I hope this helps,
Yisrael
Thanks Yisrael,
I understand that you cannot past html in a Wix Code page… Here is an example they gave me of javascript…
// Define cloud_name and upload_preset
var cloud_name = “cloud_name”;
var upload_preset = “upload_preset”;
$.cloudinary.config({cloud_name: cloud_name});
$(‘#cloudinaryWidget_trigger’).cloudinary_upload_widget(
{
cloud_name: cloud_name,
upload_preset: upload_preset,
cropping: ‘server’,
multiple: false,
max_files: 1,
thumbnails: false,
keep_widget_open: false,
cropping_show_dimensions: true
},
function(error, result) {
//console.log(error, result);
if (result != null)
$(‘.cloudinary-button’).hide(); // Will remove the button after successful upload
}
);
$(document).on(‘cloudinarywidgetsuccess’, function(e, data) {
var img = $.cloudinary.image(data[0].public_id, { width: 1000, height: 300, crop: "crop", gravity: "custom" });
$("#thumbnails").html(img[0].outerHTML);
});
=================================================
Wix Code page does not like it…
As I said previously, you can’t just take the code you received and use it in a Wix Code page - it won’t work.
You will need to use one of the two methods I linked to before.
WixCode understands all of Javascript, except for anything that accesses the DOM. This keeps the user from inadvertently “breaking” something. I myself tried to hack things from the code, from an iFrame, and in my dreams, but WixCode wasn’t having any of it. Accessing document elements such as div, span, button, etc is off-limits. The way to access elements on the page is only through $w.
One small exception is the $w.HtmlComponent (which is based on an iFrame). This element was designed to contain vanilla HTML and it works just fine. You just can’t try to trick it by using parent, window, top, etc. Same goes with the Javascript evaluate() function. It is sandboxed and does not allow access to the DOM.
You will need to check with the service provide to see if they have a REST API that you can use with the 3rd Party Techniques I linked to before.
Yisrael
Thanks. I understand. My first attempt was to create a lightbox and then add HTML iframe inside the lightbox. Here is the html I received from cloudinary. I tested it and it worked fine on my old website. But again Wix did some strange things with it… the upload window came like a 3" square with not handles to resize? Can you please give it a try?
Upload Photos To CVOA Cloud
In the editor, make the HtmlComponent large enough to display the content. This might work for you, but using backend code with a REST interface is a more secure and robust way to do things. You should check with Cloudinary if they have a REST interface.