Describe the problem/error/question
What is the error message (if any)
Please share your workflow
Description:
I'm encountering issues with integrating a webhook from my custom dashboard to my n8n workflow. Despite following the documentation and performing various troubleshooting steps, I'm unable to successfully send an image from the dashboard and initiate the automation workflow.
Problem Description:
I've set up a webhook in n8n to receive image files from a dashboard. The webhook is configured to listen for POST requests containing binary data. However, when I attempt to upload an image from the dashboard, the workflow fails with a "Status 500 - Error in workflow" message.
Error Message:
"Failed: Status 500 - Error in workflow"
Dashboard Code Snippet:
const imageUploadInput = document.getElementById(‘image-upload’);
const fileNameSpan = document.getElementById(‘file-name’);
const generateCreativeButton = document.getElementById(‘generate-creative-button’);
const CREATIVE_WEBHOOK_URL = ‘https://example.app.n8n.cloud/webhook/example-path-1234’;
const WEBHOOK_SECRET = ‘YOUR_SECRET_HERE’;
if (imageUploadInput && fileNameSpan) {
imageUploadInput.addEventListener(‘change’, () => {
if (imageUploadInput.files.length > 0) {
fileNameSpan.textContent = imageUploadInput.files[0].name;
} else {
fileNameSpan.textContent = ‘No file selected’;
}
});
}
if (generateCreativeButton && imageUploadInput) {
generateCreativeButton.addEventListener(‘click’, async () => {
if (imageUploadInput.files.length === 0) {
alert(‘Please select an image first.’);
return;
}
const originalText = generateCreativeButton.innerHTML;
generateCreativeButton.disabled = true;
generateCreativeButton.innerHTML = ‘ Generating…’;
const file = imageUploadInput.files[0];
const formData = new FormData();
formData.append(‘image’, file);
try {
const response = await fetch(CREATIVE_WEBHOOK_URL, {
method: ‘POST’,
body: formData,
headers: { ‘X-Webhook-Secret’: WEBHOOK_SECRET }
});
const result = await response.json();
if (response.ok) {
alert('Success: ’ + result.message);
} else {
alert('Failed: Status ’ + response.status + ’ - ’ + (result.message || ‘Unknown Error’));
}
} catch (error) {
alert('Network Error: ’ + error.message);
} finally {
generateCreativeButton.disabled = false;
generateCreativeButton.innerHTML = originalText;
}
});
}
Information on your n8n setup
-
Webhook Node: HTTP Method: POST Path: example-path-1234 Authentication: None Response: When Last Node Finishes Response Data: First Entry JSON Field Name for Binary Data: image Response Headers include WEBHOOK_SECRET (omitted for security reasons)
Steps Taken:
-
Verified that the webhook URL and path in the n8n Webhook node exactly match the URL used in the dashboard.
-
Ensured the “Field Name for Binary Data” in the n8n Webhook node is set to
image, which matches the key used in the dashboard’s FormData. -
Checked that the
WEBHOOK_SECRETis correctly set in both the dashboard code and the n8n Webhook node. -
Tested the webhook manually using tools like Postman to ensure the n8n instance can handle the request correctly.
-
Reviewed network settings to ensure there are no restrictions or firewall rules blocking the POST request.
-
Updated the n8n instance to the latest version and restarted the service.
-
Added a debug node after the Webhook node to log incoming data and ensure it is as expected. Debug Info:
-
n8n Version: 1.109.2-exp.0
-
Platform: Docker (Cloud)
-
Node.js Version: 22.19.0
-
Database: SQLite
-
Execution Mode: Regular
-
Concurrency: 5
-
License: Community
Additional Information: I’ve tried all the solutions suggested areas from the provided list and am still facing issues. I would appreciate any assistance in identifying where we might be stuck and how to rectify it so we can continue building the workflow successfully.
-