I am creating a user profile feature on my website. I am trying to send an image to my PHP backend without refreshing the page using the JavaScript Fetch API function. I am appending the image file to the FormData inside my change event listener and sending it to the PHP backend file.
The problem is, my PHP backend keeps printing $_FILES is empty! To debug, I added a file type.startsWith('image/') check in my JavaScript, but now my browser console is giving me an error that is -
Uncaught TypeError: Cannot read properties of undefined (reading 'startsWith')
If a user selects a file, why is getting this undefined error? Am I making any mistakes in my JavaScript code?
I share my JavaScript code.
document.getElementById('imageInput').addEventListener('change', function(e) {
const file = e.target.files;
const status = document.getElementById('statusMessage');
if (file) {
if (!file.type.startsWith('image/')) {
status.innerHTML = "Please select a valid image file!";
return;
}
const formData = new FormData();
formData.append('profile_pic', file);
fetch('upload.php', {
method: 'POST',
body: formData
})
.then(res => res.json())
.then(data => { status.innerText = data.message; })
.catch(err => { status.innerText = "Upload failed."; });
}
});
Kindly check my JavaScript code and let me know where the mistake is.
shakti
(9.5K Points)
vishalrana
(3.5K Points)
You are getting an error because e.target.files does not return a single file object. Instead, it returns a FileList (which behaves like an array/collection of files), even if your input doesn't have multiple attributes.
Because it's a collection, the raw collection itself does not have a .type property (hence it is undefined). When you try to call .startsWith() on something undefined, JavaScript crashes.
The Fix
Change your second line from this:
const file = e.target.files;
to
const file = e.target.files[0];
It’s not a single value; it returns a FileList, behave like an array.
Fix in your JavaScript code like this –
document.getElementById('imageInput').addEventListener('change', function(e) {
const file = e.target.files[0];// Fix: Added index
const status = document.getElementById('statusMessage');
if (file) {
// This will now check the actual file type without throwing an error
if (!file.type.startsWith('image/')) {
status.innerHTML = "Please select a valid image file!";
return;
}
// Send file to background
const formData = new FormData();
formData.append('profile_pic', file); // File object appended correctly
fetch('upload.php', {
method: 'POST',
body: formData
})
.then(res => res.json())
.then(data => { status.innerText = data.message; })
.catch(err => { status.innerText = "Upload failed."; });
}
});
Update the code, and your issue will be fixed. You will not get an error like
$_FILES is empty! To debug, I added a file.type.startsWith('image/')
And JS error -
Uncaught TypeError: Cannot read properties of undefined (reading 'startsWith')
You can check the similar tutorial available here –
Upload and preview Image without refreshing page using PHP and JavaScript
This live website is powered by Techno Smarter QA. The complete source code is now available with a powerful admin panel, responsive design, future updates, and support.
