Sent binary data example

Related feature: https://community.n8n.io/t/how-to-sent-binary-data-as-multipart-form-data

I receive a webhook with some audio file that I like to sent to a webservice for conversion. However I can’t find the right options to successfully post it to the service. Below is my node configuration and the API of the service. Could someone help me find the right configuration for this?

{
  "nodes": [
    {
      "parameters": {
        "httpMethod": "POST",
        "path": "ptt-input",
        "options": {
          "binaryData": true
        }
      },
      "name": "PTT-Webhook",
      "type": "n8n-nodes-base.webhook",
      "typeVersion": 1,
      "position": [
        260,
        300
      ]
    },
    {
      "parameters": {
        "requestMethod": "POST",
        "url": "http://audioconverter/convert-to/wav",
        "responseFormat": "file",
        "jsonParameters": true,
        "options": {
          "bodyContentType": "multipart-form-data"
        },
        "sendBinaryData": true,
       "binaryPropertyName": "file:data"
      },
      "name": "AudioConverter",
      "type": "n8n-nodes-base.httpRequest",
      "typeVersion": 1,
      "position": [
        540,
        140
      ]
    }
  ],
  "connections": {
    "PTT-Webhook": {
      "main": [
        [
          {
            "node": "AudioConverter",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}

Looks on the first look ok.

When you send the data to the n8n Webhook does the data end up in the binary property named “data”?

That was what I thought. As I understand this option stores the data per default in data:
image

This is the error I get on the audio (post) node when executing the workflow:

ERROR: 400 - {"type":"Buffer","data":[123,34,116,121,...]}

StatusCodeError: 400 - {"type":"Buffer","data":[123,34,116,121,...]}
    at new StatusCodeError (/usr/local/lib/node_modules/n8n/node_modules/request-promise-core/lib/errors.js:32:15)
    at Request.plumbing.callback (/usr/local/lib/node_modules/n8n/node_modules/request-promise-core/lib/plumbing.js:104:33)
    at Request.RP$callback [as _callback] (/usr/local/lib/node_modules/n8n/node_modules/request-promise-core/lib/plumbing.js:46:31)
    at Request.self.callback (/usr/local/lib/node_modules/n8n/node_modules/request/request.js:185:22)
    at Request.emit (events.js:310:20)
    at Request.<anonymous> (/usr/local/lib/node_modules/n8n/node_modules/request/request.js:1154:10)
    at Request.emit (events.js:310:20)
    at IncomingMessage.<anonymous> (/usr/local/lib/node_modules/n8n/node_modules/request/request.js:1076:12)
    at Object.onceWrapper (events.js:416:28)
    at IncomingMessage.emit (events.js:322:22)

With multi-part, multiple files can be send at the same time and they all get send under a specific name which also n8n uses.

Here an example.

Receive data workflow:

{
  "nodes": [
    {
      "parameters": {
        "httpMethod": "POST",
        "path": "test",
        "options": {
          "binaryData": true
        }
      },
      "name": "Webhook",
      "type": "n8n-nodes-base.webhook",
      "typeVersion": 1,
      "position": [
        450,
        300
      ]
    }
  ],
  "connections": {}
}

Send workflow (URL of HTTP Request2 has to be adjusted to point to receive workflow):

{
  "nodes": [
    {
      "parameters": {
        "url": "https://imgs.chip.de/2eqbJ_mnNYnL6N32N25VpDV0TvE=/220x220/filters:format(jpeg):fill(fff,true)/www.chip.de%2Fii%2F2496016366_bb52b941cf.jpg",
        "responseFormat": "file",
        "options": {}
      },
      "name": "HTTP Request1",
      "type": "n8n-nodes-base.httpRequest",
      "typeVersion": 1,
      "position": [
        450,
        150
      ]
    },
    {
      "parameters": {
        "requestMethod": "POST",
        "url": "http://localhost:5678/webhook-test/264/webhook/test",
        "jsonParameters": true,
        "options": {
          "bodyContentType": "multipart-form-data"
        },
        "sendBinaryData": true,
        "binaryPropertyName": "k1:data"
      },
      "name": "HTTP Request2",
      "type": "n8n-nodes-base.httpRequest",
      "typeVersion": 1,
      "position": [
        650,
        150
      ]
    }
  ],
  "connections": {
    "HTTP Request1": {
      "main": [
        [
          {
            "node": "HTTP Request2",
            "type": "main",
            "index": 0
          }
        ]
      ]
    }
  }
}

For me, that worked fine and I did not get the error. Can you please create an issue on Github with a workflow to reproduce the issue you are seeing that we can fix it. Thanks!

O.K., I tested it locally - like you did - with a file that I retrieve by WebApi GET. That works without a problem. So I think the multipart POST is not the problem. The problem is the webhook that is receiving the file. Maybe webhook has problems handling files?

Webhook.site data for comparison:

My webhook:
image

{
  "nodes": [
    {
      "parameters": {
        "httpMethod": "POST",
        "path": "ptt-input",
        "options": {
          "binaryData": true
        }
      },
      "name": "PTT-Webhook",
      "type": "n8n-nodes-base.webhook",
      "typeVersion": 1,
      "position": [
        260,
        390
      ]
    }
  ],
  "connections": {}
}

I can reproduce the issue by using curl to trigger the webhook via:

curl --location --request POST 'https://n8n...../webhook-test/53/ptt-webhook/ptt-input' \
--header 'Content-Type: application/octet-stream' \
--data-binary '@/C:/test.opus'

@jwillmer Just tested it as you suggested using a .opus file and the webhook receives the file.

curl --location --request POST '/webhook-test/86/ptt-webhook/ptt-input' \
--header 'Content-Type: application/octet-stream' \
--data-binary '@/Users/Ricardo/Desktop/2019-05-01_-_Undercover_Spy_Agent_-_David_Fesliyan_1.opus'

I believe the server proxy is preventing the file from getting to the n8n webhook. If I test my setup locally it works perfect. Will investigate in this direction. Thank you for validating my actions :wink:

I found the problem - had nothing to do with the proxy. I had EXECUTIONS_PROCESS: main enabled for n8n and after starting n8n without this flag i received the file. @jan I think there is an issue with this flag.

Ah yes there were problems with EXECUTIONS_PROCESS=main:

A fix just got released with [email protected] can you please check if it works fine in that version else we will have another look.

Does not work for me. Without the option the webhook gets executed and I see the file. With the option the webhook gets executed but the file is missing.

Edit:
There is also a difference in Webhook vs HTTP request:
Receiving the ogg-file via HTTP request works fine and my next HTTP request can use the file.
image
Receiving the same file via Webhook works (without the EXECUTIONS_PROCESS option) but the next step throws the error I posted previously: Sent binary data example.
image

Edit2:
When I click on the show data in the HTTP request it plays the ogg file. If I do the same on the webhook it shows me:
image

File preview comparison:

It seems to only be a display issue. The data gets send so fast to the Editor-UI that it is not aware yet what execution is active.
So if you have the workflow active (so with the production webhook) it should work without a problem. But testing will so currently sadly not be possible. I will work on a fix. But for now you can simply test without EXECUTIONS_PROCESS=main. You can, however, have it set in production.

Did push a fix which will be released with the next version.

1 Like

Btw. I could sadly not reproduce the problem with the invalid video file for webhooks. I used this example file:
http://techslides.com/demos/sample-videos/small.ogv

And not matter how I get it into n8n, if via HTTP Request or Webhook it works fine and plays just fine.

Got released with [email protected]