How can we access 3rd party api and upload image from media

Question:
I am trying to upload an image from my wix media manager to the 3rd party api and get the response. I have the script running for uploading the image and get the response but from local. the challenge is how can we access the image from media manager and upload it to the api.

Product:
Wix Editor

What are you trying to achieve:
I want to achieve a submit button in the wix lightbox and once we upload the image. It will call the api with POST, image in the body with base64 encoded and get the json response. I have the code in bit and pieces.
I can upload the image with submit button(On the wix website).
I can upload the to the API and get response(This is on my local machine access from the local storage).
But I couldn’t do the step-2 from the wix website.

My backend Code:

import {getSecret} from 'wix-secrets-backend';
import {fetch} from 'wix-fetch';
import { files } from 'wix-media.v2';
import fs from "fs";


const mySecret = getSecret("MY-SEcrets-API");

export async function myFunction(fileUri) {
  try {
    const fileurldown = await myGenerateFileDownloadUrlFunction(fileUri)
    let filterFile = fileurldown.downloadUrls[0].url
    // const fileUrl = new URL(filterFile);
    // const filePath = new URL(filterFile).pathname
    console.log(fileurldown.downloadUrls[0].url)
    const base64_image = await fs.readFileSync(filterFile, { encoding: "base64" });
    const response = await fetch("My-API-SERVER", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      "x-api-key": mySecret,
    },
    body: JSON.stringify({
      receipt64: base64_image,
    }),
  });

  const myAPIresponse = response.json();
  console.log("myAPIresponse", myAPIresponse);
  return myAPIresponse

  } catch (error) {
    console.error("Error:", error);
  }

}

export async function myGenerateFileDownloadUrlFunction(fileId) {
  try {
    const result = await files.generateFileDownloadUrl(fileId);

    const fileSrc = result.downloadUrls[0].url
    const fileUrl = new URL(fileSrc).pathname;
    console.log(fileUrl)
    return result;
  } catch (error) {
    console.error(error);
    // Handle the error
  }
}

What have you already tried:
I have followed this tutorial to some extent.
[How to send file from wix backend to an API.]

Are you getting an error message or do you have any other info about what exactly isn’t working?

Hi Anthony,
I achieved the solution with otherway. Its is working now. I will soon update the comment with complete solution that might be helpful for others.

1 Like

Awesome. Appreciate you sharing!