Webhook accepting multipart data from form loses name of binary data input files

I’m using a webhook that accepts a post request from an html form.

The form has multiple fields, including multiple file input fields. I need to know which image was uploaded in which input field.

Before I didn’t have ‘Binary data’ enabled in the webhook node and the form had multipart/form-data off and I noticed that the filename would be passed along in the json.

With multipart/form-data on however and Binary data set to on in the node, I get all uploaded files, but the names of the input fields are gone from the json and not present in the binary info. Also the binary files themselves are not in the same order as they were in the original form. So manually matching positions is not an option.

How do I go about this? I know I could process the uploads separately and then just have URLs send instead of the actual files, but that is a workaround I’d rather not make.

EDIT: I also made github issue for this: Webhook removes input name from binary data and renames them · Issue #3741 · n8n-io/n8n · GitHub

I believe the file input names are set here:

am I correct if I say that xfile would be the correct name as set in <input type="file" name="firstPhoto" />?

Hi @Wouter_Vandenneucker, welcome to the community!

Would you be able to share a curl request in which the filenames get lost? I just tried submitting binary and text data to my webhook endpoint but didn’t run into any problem.

The text fields cam through:

And so did the filenames:

Also, could you share your webhook node (simply select it on your n8n canvas, copy it with Ctrl+C and paste the JSON code here on the forum), just to make sure I am not missing anything here?

Thanks so much!

Hey @MutedJam thanks for the response. you can find my webhook here:

For reference: We’ve got a giant feedback form with +30 input fields, 16 of them are images. Our teammembers take pictures with their phones and upload these to the corresponding file-input-fields.

There might be an image for Room A and one for Room B both are present int the form as <input type="file" name="room-a-picture" /> and <input type="file" name="room-b-picture" /> . When uploaded these are usually named IMG_xxx.

So when submitted by a user: for Room A the photo might be IMG_285 and for Room B it might be IMG_284. We don’t know in which order the photos were taken, we don’t know in which field they where uploaded and the order in which they are visible in n8n does not correspond to the position of that field within the form. So for us it’s impossible to know which picture is from Room A and which is from Room B; Room C which also exists as an input field might even be empty. That information is present in the original request but is stripped in the beforementioned sourcecode.

To sum it up: I don’t care about the filename of the file, I care about the inputfield name of the file.

Thanks @Wouter_Vandenneucker! Could you also share a curl request letting me reproduce the exact data structure you’re sending to your webhook node?

So Chrome doesn’t show the uploaded data from post requests for me so I can’t copy that curl request.

But straight from commandline, this command gives the same ‘problem’: curl -F [email protected]_0268.jpg [email protected]_0369.jpg https://n8n.ourdomain.be/webhook-test/SoMe-Id

Where I lose the room-a-photo info from IMG_0268.jpg (that now is called data0 or data1) and room-b-photo info that from IMG_0369.jpg (that now is called data0 or data1).

Hey @Wouter_Vandenneucker,

I have just given this a bash and I can kind of see the issue you are having, When Binary Property is set instead of getting

You are getting

image

When you set Binary Property on the webhook it will replace the field names which is by design for those that don’t need to know the field names.

Name of the binary property to write the data of the received file to. If the data gets received via “Form-Data Multipart” it will be the prefix and a number starting with 0 will be attached to it.

It sounds like to solve this issue just removing that option will do the job, So your Webhook node would just need to be

This then results in what you are after.

If I have missed anything let me know.

1 Like

Oh wauw, I feel like a complete idiot now…

Thanks! This works!

The toggle ‘binary data’ and it’s helper text Whether the webhook will receive binary data doesn’t do what it claims to be doing though…

1 Like

Hey @Wouter_Vandenneucker,

That one is interesting, I have given it a quick test and it looks like you can send binary data with or without it so there must be something else it does. I will have to dig through the code to work it out unless @MutedJam knows.

I will mark the Github issue as closed.

1 Like

I will have to dig through the code to work it out unless @MutedJam knows.

Unfortunately not and after being wrong once today I am scared to make a guess :see_no_evil:

1 Like