Wix integration. Sending CDN URL to WIX DB

Questions / Help
,
1

Hi there,

I am building a site in Wix that will enable members to upload images.
I would like to use Uploadcare for the image upload/resize etc features.

I’ve followed the Wix set up instructions here: https://uploadcare.com/docs/guides/wixtutorial/

And have seen my images successfully uploaded to uploadcare.

Unfortunately, I am not clear on how to have them, or their url, actually uploaded to my Wix databases for later retrieval or to display after a user uploads.

How do I connect the uploadcare uploaded to the specific dataset I want the images included in?

THanks in advance.

  • Josh
2

Hi @Josh_Vogel, thanks for the question! It may be tricky because the HTML element creates a sandboxed environment (an iframe) that does not have direct access to the other elements on your page. However, it’s possible to pass data between your page code and the code in an HTML element using JS events. You can learn more about it from this article

The idea behind this is to get a URL of the uploaded file using the JS API of the uploader and pass it on to the website page. Then, using page code, add a record to your WIX database.

In the embedded element, you can use the following script to get a file URL

var widget = uploadcare.Widget("[role=uploadcare-uploader]");
widget.onUploadComplete(function(fileInfo) {
  window.parent.postMessage("File uploaded", fileInfo.cdnUrl);
});

On the host page, you can add a hidden text input element, link it to a field in your DB, and set its value programmatically:

$w.onReady(function() {
  // when a message is received from the HTML element
  $w("#myHtmlElement").onMessage( function(event) {
    $w("#hiddenInput").value = event.data;
  });
});

Hope that helps.

3

Alex, this is super helpful, thank you so much.

4

@Alex I’ve got this working for now which is great, thank you again!

Question: using the image URL, can I enable deletion from my UploadCare database?

The wix integration covers uploading an image to uploadCare… I can now add the image URL to a Wix DB and retrieve that URL.

On the frontend, if I wanted to allow a customer to change their image I can just write a new URL to the DB in WIX, BUT is there any way I can trigger a deletion of the original UploadCare file through this type of flow?

5

@Josh_Vogel glad that helped! Technically, you can delete a file from Uploadcare with a request to the REST API

Please, notice that requests to the REST API require authentication, so making requests from the front-end is not secure because your secret key may be exposed. To implement file deletion, you need a backend or a serverless function in order to keep your secret key secure and hide it from the third-party.