Search code examples
javascripthtmldrag-and-drop

Checking HTML5 drag and drop file type

I'd like to change drop zone background color to green or red depending on whether the contained drag over payload contains supported file types (JPEG).

  • Do Gecko and Webkit support determining the file type of drag and drop files?

  • How one can extract the file type in these two browsers?

I have found event.dataTransfer.types API, but for Firefox it seems to be populated with application/x-moz-file and thus I think I am doing something wrong.

Solution

  • You can get the file types in Gecko and webkit supported browsers using file object.

    var files =e.dataTransfer.files||e.target.files; // File list

    The file object returns Name,Type and size. you can get last modified date too.

    var mimeType= files[0].type; //mime type of file list first entry