Android file selection: Block Google Drive files in HTML input for Firebase upload

Other Questions Google drive
1

I’m building a website that lets users upload files to Firebase Storage. On Android Chrome, the HTML file input uses the native file picker. This works fine for local files, but it also shows Google Drive files. If a user picks a Drive file, the upload fails with a ‘net::ERR_UPLOAD_FILE_CHANGED’ error.

I want to stop users from picking Drive files or at least warn them it won’t work. I’ve tried checking the File object from the input, but there’s no clear way to tell Drive files from local ones.

Here’s my current HTML and JavaScript:

<input type='file' id='file_picker' hidden>

$('#file_picker').on('change', function(event) {
  if (!event.target.files) return;
  let chosenFile = event.target.files[0];
  startUpload(chosenFile);
});

function startUpload(file) {
  let storageRef = firebase.storage().ref();
  let fileLocation = storageRef.child(`${user.id}/uploads/${file.name}`);
  let uploadProcess = fileLocation.put(file);
  // ... rest of upload logic ...
}

Any ideas on how to handle this? Is there a way to disable Drive file selection or detect them before upload?

2

hey, i’ve dealt with this too. it’s a pain! one thing u could try is checking the file size before upload. drive files often show as 0 bytes. like this:

if (chosenFile.size === 0) {
alert(‘looks like a google drive file. plz pick a local one instead.’);
return;
}

not perfect but might catch some. good luck!

3

I’ve run into this issue before, and it can be tricky to handle. Unfortunately, there’s no foolproof way to completely block Google Drive files from being selected, as it’s part of Android’s file system integration.

One workaround I’ve found somewhat effective is to check the file’s last modified date. Google Drive files often have a last modified date far in the future. You could add a check like this:

function isLikelyDriveFile(file) {
  const fiveYearsFromNow = new Date();
  fiveYearsFromNow.setFullYear(fiveYearsFromNow.getFullYear() + 5);
  return file.lastModified > fiveYearsFromNow.getTime();
}

Then use it in your change event:

if (isLikelyDriveFile(chosenFile)) {
  alert('Google Drive files may not upload correctly. Please choose a local file.');
  return;
}

It’s not perfect, but it might catch most Drive files. Another option is to use the File System Access API if you’re targeting modern browsers, which gives more control over file selection. Just be aware of browser support limitations.

4

I’ve encountered this issue in my projects as well. While there’s no foolproof method to block Google Drive files entirely, you could implement a combination of checks to mitigate the problem. One approach I’ve found effective is to examine the file’s type and name.

Google Drive files often have generic MIME types like ‘application/octet-stream’. You could warn users if this type is detected:

if (chosenFile.type === ‘application/octet-stream’) {
alert(‘This may be a Google Drive file. Local files are recommended for reliable uploads.’);
return;
}

Additionally, checking for typical Google Drive file extensions (like .gdoc, .gsheet) could help:

if (chosenFile.name.match(/.(gdoc|gsheet|gslides|gdraw)$/i)) {
alert(‘Google Drive document detected. Please choose a local file instead.’);
return;
}

These checks, combined with the size and last modified date checks mentioned by others, can significantly reduce issues with Drive files. Remember to provide clear instructions to users about using local files for best results.