We are trying to build a form featuring a multi-file upload field. For that we need to send the files as binary data to our Make.com webhook so we can build the logic since Webflow itself only uploads a single file and also only if set to default behavior.
We tried this so far:
- Adding custom JS with preventDefault on the form submission - didn’t work.
- Adding your form submit snippet and added both attributes on the form - didn’t work.
Since we are using a webhook what happens is that on form submit we get instantly redirected to Make’s “Accept” page that pops up if the scenario is still disabled.
Does anyone know how I can fix this? We really need this for our support flow so clients can open tickets and add files.
Btw: Building a snippet for multi-file upload fields would be amazing. Or just adding the file data as objects to the form data would already be amazing since it would cut all the manual work.
Update:
I made a massive step forward on this.
We did two main things:
- Add an attribute to the form
- Add an attribute to the file upload field
This is the code:
<script>
document.addEventListener('DOMContentLoaded', () => {
const form = document.querySelector('#YOUR-FORM-ID'); // add your form id
form.setAttribute('enctype', 'multipart/form-data');
const fileInput = form.querySelector('input[name="YOUR-INPUT-NAME"]'); // set to your input field name
const maxFiles = 5; // set to your liking
if (fileInput) {
fileInput.setAttribute('multiple', 'multiple');
fileInput.addEventListener('change', function(event) {
const files = event.target.files;
if (files.length > maxFiles) {
alert(`You can only upload a maximum of ${maxFiles} files.`);
event.target.value = '';
}
});
}
});
</script>
This way the file object is available in the form data and sent alongside the other form fields. This also works now with a webhook.
All that’s left is essentially styling the default file upload input of Webflow. Also since the default processing of Webflow’s backend is not used here, you could also use this approach in a plan that does not include the file upload field. In that case you would need to build some custom logic that stores the files that you want to send to a webhook in a custom element set to input[type=“file”]. As long as the files are sent with the data, you can then do with it what you need.
Ok, next update:
Make’s webhooks have a limit of 5 MB payload size.
This leaves us no choice right now but to go to a third-party provider like uploadcare.com. At least they offer a free/demo tier that should be enough for most cases.
Hey @vierless_julian! Thank you for sharing the issue and the steps you took to fix it.
Let me know if you require any assistance!