The new iOS 11 supports drag and drop between Files and Safari, but apparently the JavaScript interface works only on a restricted set of "standard" file types, e.g. .txt, .png, .pdf, .docx, .doc. Is this a known restriction? Is there a work-around?
Consider the following test web page:
<html>
<head>
<title>Drag and Drop test</title>
</head>
<body>
<canvas id='x' width='90' height='90' style='border: 1px solid red;'></canvas>
<script>
document.getElementById('x').addEventListener('dragover', function(e){
e.preventDefault();
});
document.getElementById('x').addEventListener('drop', function(e){
var i, files;
e.preventDefault();
files = e.dataTransfer.files;
for (i=0; i<files.length; i++) {
console.log('%s [%s]', files[i].path || files[i].name, files[i]);
}
});
</script>
</body>
</html>
If you create and visit this web page on a Mac Desktop (using FF, Chrome, or Safari), you can drag/drop any file (or group of files) onto the red target and see the file name(s) displayed in the JavaScript console.
But visit this page on an iOS 11 iPad and connect to Desktop Safari for debugging. Then bring up the Files app in split screen mode, and drag and drop files (e.g., from Dropbox or iCloud) onto the red target. Only files with "standard" extensions such as .txt, .pdf, .docx, or .png will be processed in the loop. Thus, a text file called "foo.foo" will not be processed, even if it is identical in content to a text file called "foo.txt" (which will be processed).
I am unable to find any mention of this restriction on the web or any hint about how to remove it.