We built this function as we were looking to prototype the use of GPTs and AI Image generators to create images tuned to their purpose. For example, images in a list should help click-through rates, and images shown as the main headers of an article should support the content of that article and deepen engagement.

For this, we needed an easy way to update image fields using, in our case, make.com as our automation platform. This solution will work equally well with other automation platforms like n8n or Zapier.

You can get the full function here:

https://github.com/MCTO-the-dig/wix/blob/main/uploadImageToItem.js

We needed a simple way of ā€˜pushingā€™ these image updates into a field in a Wix collection item. As in the example scenario below, which reacts to an image file upload and then loads it to the right field and collection in Wix

Make.com Diagram of an automated workflow with colored icons and labels: Google Cloud, Data Store, Text Parser, Tools, and Wix HTTP Request.
Make.com scenario that automatically uploads and updates images

There are two parts to getting this function working.

šŸ› ļøStep 1: AddĀ the code to backend/http-functions.js

This file creates a secure HTTP endpoint that allows uploading images to a Wix collection from external tools (like Make.com) using public image URLs.

Make sure you add the authorisation function to your http-functions.js if you have not already done so.

The code is below for convenience. How it works is fully documented here:

https://github.com/MCTO-the-dig/wix/blob/main/codeToUpdateAnyField

which has a similar function focused on updating data fields.

Add a secret to Wix Secret if you have not already done so

Use the first part of the code from https://github.com/MCTO-the-dig/wix/blob/main/uploadImageToItem.js

And paste it into your - backend/http-functions.jsĀ - file on your Wix site.

Code editor interface showing a file menu.
Paste the relevant code into your http-functions.js file

And when you have pasted the code, it should look something like this

Example of the code added to a wix site showing Code editor with JavaScript code for uploading images, including functions, error handling
Example of Image Updater code added to the site

āš™ļøStep 2: Add the code below to your backend/events.jsĀ file

This is the automatic follow-up handler. When the image is successfully uploaded to the Media Manager, this function gets triggered and updates the related item in your collection. It is effectively where the main work happens.

It is clearly marked, and you can lift it from here:

https://github.com/MCTO-the-dig/wix/blob/main/uploadImageToItem.js

It will look something like this:

Code editor screenshot with JavaScript file
Code added to events.js on Wix site

šŸš€Final Step: Using the function

Use Case:Ā Upload an image via a URL from Make.comĀ (or similar) and automatically update a Wix database itemā€™s image field.

Security:Ā Uses a secret key stored in Wix Secrets Manager to authorise requests.

To use this function, all you need to do is send an HTTP request containing a public URL of the image, and it will do the rest. Below is the example set up in make.com

From Make.com or any system, send a POSTĀ request to:

https://your-wix-site.com/_functions/uploadImageToItem

Understanding the base URL for your use case is documented here:

https://dev.wix.com/docs/velo/velo-only-apis/wix-http-functions/wix-http-function-request/base-url

With the headers:

and body:

Ā šŸ“ IMPORTANT Field Mapping: Make sure you prefix your Field ID with image_

API settings screenshot with URL, POST method, headers including
Example HTTP module setup in make.com