I’m building a web app that lets people upload files to Firebase Storage. When users open my site in Chrome on their Android phone and tap the file input button, it opens Android’s built-in file picker.
The problem is that users can pick files from Google Drive through this picker, not just local files. When they do this, the file gets returned as a normal File object in JavaScript, but uploading it to Firebase fails with “net::ERR_UPLOAD_FILE_CHANGED” error.
I want to either stop users from picking Google Drive files completely, or detect when they do and show them a warning message. I tried looking at the File object properties but couldn’t find any way to tell if it came from local storage or Google Drive.
<input type="file" id="file_picker" class="hidden"/>
$("#file_picker").on('change', function(event) {
if (!event.target.files) {
return;
}
const selectedFile = event.target.files[0];
handleFileUpload(selectedFile);
});
handleFileUpload(selectedFile) {
const storageReference = firebase.storage().ref();
const fileReference = storageReference.child(`users/${currentUserID}/files/${selectedFile.name}`);
const uploadProcess = fileReference.put(selectedFile);
}
Yeah, this is a pain with the native file picker API. I’ve dealt with this exact problem - there’s no reliable way to completely block Google Drive access since the system controls the file picker, not your web app. But I found a workaround that works pretty well. I validate files before uploading to Firebase by checking the webkitRelativePath property and watching upload progress. Google Drive files usually fail super fast during upload. What worked for me: wrap the Firebase upload in a promise with a timeout, catch the ERR_UPLOAD_FILE_CHANGED error specifically, then show users a custom message telling them to download the file locally first. Not perfect, but it made the UX way better in my production app.
I faced a similar challenge while developing a file upload feature. The ‘ERR_UPLOAD_FILE_CHANGED’ error occurs because files from Google Drive aren’t stored locally; they are merely links that can become invalid during upload. To address this, I recommend checking the ‘lastModified’ timestamp and file size. Files from Drive often have unusual ‘lastModified’ values or a size of zero bytes. Additionally, you might want to use FileReader to attempt reading a part of the file—if it encounters issues, it’s likely a file from the cloud. Alternatively, you can implement a try-catch around your upload logic to gracefully handle this error and prompt users to first download the file to their device.
the webkitRelativePath approach was super unreliable for me. i ended up checking both file.webkitRelativePath and file.type since google drive files often have weird mime types or just empty strings. also try reading the first few bytes with FileReader.readAsArrayBuffer() - if it throws an error or hangs, it’s probably a cloud storage file.