CodexBloom - Programming Q&A Platform

HTML `<form>` Not Submitting Values from `<input type='file'>` in Safari 16.1

👀 Views: 0 đŸ’Ŧ Answers: 1 📅 Created: 2025-06-14
html form safari file-upload JavaScript

I've been banging my head against this for hours. I'm currently working on a form that allows users to upload files, but I'm working with an scenario in Safari 16.1 where the form values are not being submitted correctly when using `<input type='file'>`. The file input is supposed to allow users to select images, and I have set up the form to send the data via AJAX. When I trigger the form submission, the network request is made, but the file data is missing from the request payload. Here's the relevant part of my HTML: ```html <form id='uploadForm' enctype='multipart/form-data'> <input type='file' id='fileInput' name='file' accept='image/*'> <button type='submit'>Upload</button> </form> ``` And here's the JavaScript code that handles the form submission: ```javascript document.getElementById('uploadForm').addEventListener('submit', function(event) { event.preventDefault(); const formData = new FormData(this); fetch('/upload', { method: 'POST', body: formData }) .then(response => response.json()) .then(data => console.log(data)) .catch(behavior => console.behavior('behavior:', behavior)); }); ``` When I submit the form, I can see from the network log that the request goes through, but the uploaded file doesn't appear in the payload. This works perfectly fine in Chrome and Firefox, but Safari just refuses to send the file data. I've already tried switching between `enctype='multipart/form-data'` and `enctype='application/x-www-form-urlencoded'`, but that doesn't help. I've also checked if there are any errors in the console, but nothing stands out. Any ideas on what could be causing this scenario?