Does html input support drag & drop from zip folder?

Question

I implemented a drag & drop functionality in a React component with a HTML input box. It works perfectly, it receives the file and uploads it to Amazon S3, checking if the file type is compatible with the one specified from props.

The problem occurs when dragging a file from a ZIP file. I console.loggued the resultant file object, and the only difference with a file dragged from a desktop folder is the size (From ZIP file => size = 0).

When I'm dragging the file, is there a way to recognize that it comes from a ZIP file so it waits until the file has finished uploading to the input? Also, how could I check if the file has finished uploading?

The function that receives the file and checks it:

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)
    }
  }
}

I forgot to mention initially, that when I drop a file in the input, it gets "uploaded" to S3 immediately, but with size 0 (Since it comes from a ZIP file), so the site recognizes it as a file, but when I'm trying to see the content it says error.

Thank you!

Answer 1

I ended up with this workaround, as I also haven't found an actual solution:

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

Because the lastModified is so close to the current time it's most likely automatically generated and in combination with the size of 0 I identify it as an placeholder file.