使用Android的本机文件选择器时，禁止HTML文件输入选择Google云端硬盘中的文件 [英] Prevent HTML file input from selecting files in Google Drive while using Android's native file chooser

问题描述

当前，我正在制作一个页面，该页面允许用户将文件上传到Firebase Storage.通过Android上的Google Chrome浏览器打开网站并从标准HTML文件输入中选择要上传的文件时，它将使用Android的本机文件选择器.

Currently I'm working on a page that allows users to upload a file to Firebase Storage. When opening the site through Google Chrome on Android and selecting a file for upload from a standard HTML file input, it uses Android's native file chooser.

在大多数情况下，用户会选择本地存储在设备上的文件，但是文件选择器还会显示其Google云端硬盘文件，并且当前不会阻止用户选择这些文件之一.该文件以Javascript中的File对象的形式返回，但是尝试上载到Firebase Storage时，它将引发错误:"net :: ERR_UPLOAD_FILE_CHANGED"，并最终超出了重试限制.

In most cases, a user would choose a file stored locally on the device, but the file chooser also shows their Google Drive files and a user currently isn't prevented from selecting one of those files. The file is returned as a File object in Javascript, but when the upload to Firebase Storage is attempted it throws the error: "net::ERR_UPLOAD_FILE_CHANGED" and eventually exceeds it's retry limit.

为防止用户混淆，我想阻止用户在Android的文件选择器中选择Google云端硬盘文件，或者至少要意识到它无法上传并警告用户.

To prevent confusion for the user, I'd like to prevent the user from selecting a Google Drive file in Android's file chooser, or at the very least recognize that it can't be uploaded and warn the user.

我考虑过检查input元素返回的File对象，但是没有任何指示可以告诉Google云端硬盘文件中的本地文件.

I considered checking the File object returned by the input element, but there isn't any indication to tell a local file from a Google Drive file.

<input type="file" id="upload_input" class="hide"/>

$("#upload_input").change(function(e) {
  if (!e.target.files) {
    return;
  }
  const file = e.target.files[0];
  uploadFile(file);
});


uploadFile(file) {

  ...

  const storageRef = firebase.storage().ref();
  const fileRef = storageRef.child(`${userID}/uploads/${file.name}`);
  const uploadTask = fileRef.put(file);

  ...

}

推荐答案

我不知道一种防止文件选择器显示这些文件的方法，我怀疑没有，但是您可以很轻松地检查代码是否将能够通过尝试读取将其发送到您的服务器.

I don't know a way to prevent the file picker to show these files, and I suspect there is none, but you can check quite easily if your code will be able to send it to your server by trying to read it.

我们可以通过切片File对象来尝试仅读取第一个字节，而不是读取整个文件.然后阅读它，我们可以简单地调用其 arrayBuffer()方法会返回一个Promise，或者在文件有效时解决，或者在我们无法访问文件时拒绝:

Instead of reading the whole file, we can try to read only the first byte, by slicing the File object. Then to read it, we can simply call its arrayBuffer() method which will return a Promise, either resolving when the File is valid, or rejecting if we can't access the file:

const inp = document.querySelector('input');
inp.onchange = (evt) => {
  const file = inp.files[ 0 ];
  file.slice( 0, 1 ) // only the first byte
    .arrayBuffer() // try to read
    .then( () => {
      // success, we should be able to send that File
      console.log( 'should be fine' );
    } )
    .catch( (err) => {
      // error while reading
      console.log( 'failed to read' );
      inp.value = null; // remove invalid file?
    } );
};

<input type="file">

请注意，即使存储在磁盘上的文件也可以由用户修改，因为他们确实在您的网站上选择了文件，在这种情况下，上传仍然会失败.为了处理这种情况，您只需要执行相同的精确测试即可.

Note that even Files stored on disk may be modified by the user since they did pick it in your website, in that case, the upload would still fail. To handle this case too, you'd just have to perform the same exact test.

还请注意，Blob.arrayBuffer()是最近才出现的，可能需要使用polyfill，该填充很容易在Internet上制作或找到.

Note also that Blob.arrayBuffer() is quite recent and may require a polyfill, which is easily made or found on the internet.

这篇关于使用Android的本机文件选择器时，禁止HTML文件输入选择Google云端硬盘中的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！