html 輸入是否支持從 zip 文件夾拖放？

Question

我在帶有 HTML 輸入框的 React 組件中實現了拖放功能。 它運行完美，它接收文件並將其上傳到 Amazon S3，檢查文件類型是否與 props 指定的兼容。

從 ZIP 文件中拖動文件時會出現問題。 我 console.loggued 結果文件 object，與從桌面文件夾拖動的文件的唯一區別是大小（來自 ZIP 文件 => 大小 = 0）。

當我拖動文件時，有沒有辦法識別它來自 ZIP 文件，以便它等到文件完成上傳到輸入？ 另外，如何檢查文件是否已完成上傳？

接收文件並檢查它的 function：

export default function(e, onUpload, acceptedTypes) {
  e.stopPropagation()
  e.preventDefault()
  if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
    const file = e.dataTransfer.files[0]
    if (isAcceptedType(file, acceptedTypes)) {
      onUpload(file)
    }
  }
}

我一開始忘了提到，當我在輸入中放置一個文件時，它會立即“上傳”到 S3，但大小為 0（因為它來自 ZIP 文件），所以該站點將其識別為一個文件，但是當我正在嘗試查看它說錯誤的內容。

謝謝！

Answer 1

我最終采用了這種解決方法，因為我還沒有找到實際的解決方案：

const timeTolerance = 10;
const now = new Date().getTime();
const isAutoGenerated = now - file.lastModified < timeTolerance;
if (file.size === 0 && isAutoGenerated) {
  return false; // invalid file
}

因為lastModified非常接近當前時間，所以它很可能是自動生成的，結合 0 的大小，我將其識別為占位符文件。