Example Description
In this example, we exposed two backend endpoints:
-
An endpoint that receives a POST request to upload a new image to a specific collection.
-
An endpoint that receives a GET request to get a random image out of a specific collection and returns it.
How We Built It
Collections
For this example, we created a database collection called “images” that stores image URLs. The POST and GET requests upload and retrieve images from this collection.
Page Elements
Note: We added functionality to our site that works as a playground for testing the HTTP-functions. You would normally make the HTTP requests from an app outside your Wix site.
In our site we added the following page elements:
-
Two Buttons:
-
getImageButton - calls the GET API.
-
uploadButton - calls the POST API.
-
Input element: input1 - Enter an image URL to upload.
-
Image element: image1 - Holds and presents an image from the collection.
-
Two Text elements:
-
successText - Success message on upload.
-
failureText - Failure message on upload.
-
Backend Code
We created 2 backend files:
-
http-function.js - exposes the API endpoints that handle the incoming POST and GET requests.
-
fetch.jsw - a web module that consumes your site’s functionality by reaching the endpoints for your APIs.
As noted above, these calls would normally take place outside your website and are included in the example to provide a playground for the HTTP-functions.
Related Examples
Did this help?
|
Thanks for your feedback!
Expose and Access Site APIs
Use wix-http-functions to expose an API, and wix-fetch to access an external API.
Intermediate
Secrets Manager
Store API keys in a secure manner using Secrets Manager.
Intermediate
Create a Custom Chart
Use JavaScript post messages to communicate with the HTML component.
Advanced