Hi Community,
While building my last workflow, I needed to convert uploaded files into a Data URL in order to send them to an external API.
I have the feeling this is something beginners run into quite often – especially when working with data extraction APIs. So I decided to break the process down step by step and turn it into a short tutorial to share with you.
Introduction
In n8n, you can solve almost anything with a Code node – often in just a few dozen lines of JavaScript.
But for learning purposes (and for building workflows that are easier to understand and maintain), I personally prefer to structure transformations visually and step by step whenever possible.
In this tutorial, we will:
-
Receive a binary file
-
Convert it into a Base64 string
-
Construct a proper Data URL
-
Send it to an external API via HTTP Request
All without writing a single line of code.
Step 1 – Entry Point (Receiving a Binary File)
First, we need a trigger that outputs a binary file.
In my case, I’m using the:
- On form submission trigger
When a user uploads a file via the form, it appears in the output as a binary property.
That’s our starting point.
Step 2 – Convert Binary to Base64
n8n already provides a built-in way to extract a Base64 string from a binary file.
Add the node:
Data Transformation → Extract from File
Then choose:
Operation: Move file to base64 string
This converts the binary file into a Base64-encoded string that we can use in further transformations.
At this stage, we now have:
-
The file’s MIME type (e.g.
application/pdf,image/png) -
The Base64-encoded file content
However, this still isn’t a valid Data URL yet.
Step 3 – Create the Data URL
Now comes the important part.
A valid Data URL follows this structure:
data:<mimetype>;base64,<data>
Example:
data:application/pdf;base64,JVBERi0xLjQKJ...
Add an Edit Fields node
-
Set Mode to
Manual Mapping -
Create a new string field, for example:
data_url
Set its value to:
data:{{$binary.file.mimeType}};base64,{{$json.data}}
(Adjust property names if yours differ.)
Where:
-
mimeType→ comes from the original binary file -
data→ is the Base64 string generated in the previous step
Now you have a fully valid Data URL 
Step 4 – Send the HTTP Request
Finally, add an HTTP Request node.
This allows you to send the generated Data URL to a third-party API.
In my case, I tested this using
extractor.easybits.tech
where I created a data extraction pipeline and sent the request to a dedicated endpoint to verify everything was working correctly.
I can definitely recommend this tool to anyone looking to set up data extraction with minimal effort. It doesn’t require complex configurations or coding skills, and in the use cases I’ve tested so far, it has delivered consistently accurate results. If you’d like to give it a try: Data Extraction for n8n Builders | easybits
Depending on the API, you can pass the Data URL:
-
In the JSON body
-
As a form field
-
Or in any parameter expected by the endpoint
Why Do It This Way?
Instead of using a Code node, this approach:
-
Keeps every transformation visually transparent
-
Is easier for beginners to follow
-
Improves maintainability
-
Makes debugging much clearer in the execution view
You can literally see how the file evolves step by step.
When Do You Need a Data URL?
Common use cases include:
-
AI APIs
-
OCR services
-
Document extraction tools
-
Image analysis APIs
-
Any service that expects inline Base64 file content
If anyone has a cleaner or more elegant approach – I’d love to see it. Happy to hear your feedback and alternative solutions!