How to Retrieve and Base64 Encode an Image from a Provided URL using the Pipedream POST Request?

Help
1

This topic was automatically generated from Slack. You can find the original thread here.

Pipedream is receiving a POST request with multipart/form-data that contains an imageFile property and a URL where an image is hosted. How can get the image from the hosted URL and then encode it to be Base64 encoded?

2

To achieve this, you can use the axios package to make a GET request to the image URL, and then use the Buffer object to convert the image data to a Base64 string. Here’s an example of how you could do this in a Pipedream workflow: import { axios } from "@pipedream/platform"; export default defineComponent({ async run({ steps, $ }) { // Get the URL from the incoming request const imageUrl = steps.trigger.event.body.imageFile; // Make a GET request to the image URL const response = await axios($, { method: "GET", url: imageUrl, responseType: "arraybuffer", }); // Convert the image data to a Base64 string const base64Image = Buffer.from(response.data, "binary").toString("base64"); // Return the Base64 string return base64Image; }, }); This code will take the URL from the imageFile property of the incoming POST request, download the image from that URL, convert the image data to a Base64 string, and then return that string.

3

The event body looks like this:

{"imageDescription":"This is an image of golden hour","imageFile":{"encoding":"7bit","filename":"golden hour - Google Search 2023-11-22 at 9.14.14 AM.jpg","mimetype":"image/jpeg","url":"https://pipedream-catcher-bodies.s3.amazonaws.com/25e434a5-96ad-4668-851e-448d2231726f?AWSAccessKeyId=ASIA5F5AGIEASYZKSTAI&Expires=1700675037&Signature=miR1sBhWujzv9ypBLdbuPK3wvOk%3D&x-amz-security-token=FwoGZXIvYXdzEOr%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDAsE6zldJfkdpTNBUiKNBEGhgzJ%2Bzs7Z6pFPJBrZj1F9eMHeyQeKd2nCMbXx4l77W1qDl4P5MSvOa3GRDcYaakCCihZSwWb2QxSrGpaGtj%2B4e6KRblQ1eRFIKODc%2Fqz%2FFZ9wpgOn8ZGnrjKUzjctH9zBm3h6w1VXF85hNuJM5uoKS3D%2FSwTF2YeGip2bwkEnt71xbpr148FpLcAu0u4Fd2Tqa68tThZ6laTzA%2BrXOeDZ6lPts3PrXl%2FqOljPC2fGngziRQIONk%2FN4YzeRIsVvIpS1o5dNMcSGIWBu8FqQz0dOZDw5mAFZWPtmQJmAJGnJLufGlazBbNBIijKl8D7V9bG2KkmENyKIVBOlk1tRTJdxyYJzIlnPSyuWzBuDC8IMbTd5nyZV8WaGCZTb5cAfGBCwIvD57LYAghQVH3M%2B8pxKOP%2FHVBXhj%2BJJuXXwDrbM8t3zQv%2Fwbg0qv3VAdLDv8FPz5wccm0wnaCoUZLWuJY5bZ5S4jb6Md3KuD4Ux8NQuXHer0zyVh71qe5FZMCSAHj7lAGSrUGSSs9DMbiusUL3ecCKuTRKmtiUu6xiX4BWFpemSqt%2F6ZzEM6m83L%2BRWsdoRhpQ%2Fgy94kDmWq9vsSHsJxmLtkiOwTtEcWzh%2B59Bh1rFIBATt5aZfflUB02tDgUHoZxXQPsTNBMMGiJisps0pMhr%2Bm%2BNm6Nm9ydEUY90fRyTMEF%2Bk3VcOF2ouiiU4PiqBjIqi5fxLpAvU7krhP9UYZZFziGzlqb3c9FZaFFMO5GEEUOR%2FOJpR1FQAyIR"}}

Running that code I got this error: The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received undefined

4

The error message you’re seeing typically occurs when a function that expects a string or a Buffer-like object is given undefined instead. In your case, it seems like you’re trying to process an image file from an event body. The url field in the imageFile object is wrapped in angle brackets < >, which might be causing the issue. You might be trying to pass this URL to a function that expects a string, but the angle brackets could be causing the URL to be interpreted as undefined. Try removing the angle brackets from the URL and see if that resolves the issue. If the problem persists, could you please provide more details about the code you’re running? That would help me give a more accurate solution.

5

There’s no angle brackets in the URL

6

I apologize for the confusion earlier. If there are no angle brackets in the URL, the issue might be elsewhere. Could you please provide more details about the error message you’re seeing and the code you’re running? This will help me better understand the problem and provide a more accurate solution.

7

This is the code I’m running:

import { axios } from "@pipedream/platform";

export default defineComponent({
  async run({ steps, $ }) {
    // Get the URL from the incoming request
    const imageUrl = steps.trigger.event.body.imageFile.url;

    // Make a GET request to the image URL
    const response = await axios($, {
      method: "GET",
      url: imageUrl,
      responseType: "arraybuffer",
    });

    // Convert the image data to a Base64 string
    const base64Image = Buffer.from(response.data, "binary").toString("base64");

    // Return the Base64 string
    return base64Image;
  },
});

And this is the trigger step data:

{"imageDescription":"This is an image of golden hour","imageFile":{"encoding":"7bit","filename":"golden hour - Google Search 2023-11-22 at 9.14.14 AM.jpg","mimetype":"image/jpeg","url":"https://pipedream-catcher-bodies.s3.amazonaws.com/25e434a5-96ad-4668-851e-448d2231726f?AWSAccessKeyId=ASIA5F5AGIEASYZKSTAI&Expires=1700675037&Signature=miR1sBhWujzv9ypBLdbuPK3wvOk%3D&x-amz-security-token=FwoGZXIvYXdzEOr%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDAsE6zldJfkdpTNBUiKNBEGhgzJ%2Bzs7Z6pFPJBrZj1F9eMHeyQeKd2nCMbXx4l77W1qDl4P5MSvOa3GRDcYaakCCihZSwWb2QxSrGpaGtj%2B4e6KRblQ1eRFIKODc%2Fqz%2FFZ9wpgOn8ZGnrjKUzjctH9zBm3h6w1VXF85hNuJM5uoKS3D%2FSwTF2YeGip2bwkEnt71xbpr148FpLcAu0u4Fd2Tqa68tThZ6laTzA%2BrXOeDZ6lPts3PrXl%2FqOljPC2fGngziRQIONk%2FN4YzeRIsVvIpS1o5dNMcSGIWBu8FqQz0dOZDw5mAFZWPtmQJmAJGnJLufGlazBbNBIijKl8D7V9bG2KkmENyKIVBOlk1tRTJdxyYJzIlnPSyuWzBuDC8IMbTd5nyZV8WaGCZTb5cAfGBCwIvD57LYAghQVH3M%2B8pxKOP%2FHVBXhj%2BJJuXXwDrbM8t3zQv%2Fwbg0qv3VAdLDv8FPz5wccm0wnaCoUZLWuJY5bZ5S4jb6Md3KuD4Ux8NQuXHer0zyVh71qe5FZMCSAHj7lAGSrUGSSs9DMbiusUL3ecCKuTRKmtiUu6xiX4BWFpemSqt%2F6ZzEM6m83L%2BRWsdoRhpQ%2Fgy94kDmWq9vsSHsJxmLtkiOwTtEcWzh%2B59Bh1rFIBATt5aZfflUB02tDgUHoZxXQPsTNBMMGiJisps0pMhr%2Bm%2BNm6Nm9ydEUY90fRyTMEF%2Bk3VcOF2ouiiU4PiqBjIqi5fxLpAvU7krhP9UYZZFziGzlqb3c9FZaFFMO5GEEUOR%2FOJpR1FQAyIR"}}
8

It seems like you’re trying to fetch an image from a URL, convert it to a Base64 string, and return that string. The provided code looks correct for this purpose. However, it’s important to note that the URL in the trigger step data is HTML-encoded. You need to decode it before using it in the axios request. Here’s the updated code: import { axios } from "@pipedream/platform"; export default defineComponent({ async run({ steps, $ }) { // Get the URL from the incoming request const imageUrl = decodeURIComponent(steps.trigger.event.body.imageFile.url); // Make a GET request to the image URL const response = await axios($, { method: "GET", url: imageUrl, responseType: "arraybuffer", }); // Convert the image data to a Base64 string const base64Image = Buffer.from(response.data, "binary").toString("base64"); // Return the Base64 string return base64Image; }, }); This code uses the decodeURIComponent function to decode the URL before making the GET request. If you’re still encountering issues, please provide more details about the problem you’re experiencing.